Что такое CSS и как подключить каскадные таблицы стилей к html-документу : WEBCodius
Здравствуйте уважаемые читатели блога webcodius.ru. После блока статей посвященных HTML я решил познакомить вас с CSS, так как средств разметки недостаточно для оформления документов. И вообще, изучение HTML это лишь первый этап в процессе обучения созданию сайтов, следующим шагов является изучение CSS. Так давайте же узнаем что такое CSS и зачем они нужны.
Если посмотреть страницы с чистым HTML, то они выглядят невзрачно. Однообразный текст, таблицы без рамок, тоскливая черно-белая расцветка… Конечно, сделать страницы сайта ярче можно и средствами html, но такой подход только загромождает исходный код и не предоставляет никакой гибкости. Поэтому в современной верстке за внешнее оформление страниц сайта отвечает язык стилевой разметки CSS или просто таблица стилей.
Каскадные таблицы стилей(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой web-страницы и отдельных ее элементов. Эти параметры определяют фон страницы, цвет текста, выравнивание абзацев, параметры рамки таблицы и многое другое.
Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете заголовки с помощью тегов h2-h6 или абзацы через тег p. А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.
Поэтому минимальные знания возможностей каскадных таблиц стилей скорей всего потребуются вам как при создании сайта с нуля, так и при внесении изменений в уже существующий проект. В первую очередь эти знания понадобятся при работе над дизайном сайта.
Добавление стилей или как подключить CSS к HTML документу
Прежде чем говорить о синтаксисе или о свойствах каскадных таблиц стилей, необходимо научиться подключать их к html документу. Всего существует три способа подключения css к html.
1. Первый способ заключается в размещении стилей в отдельном файле или нескольких файлах с расширением .css. В этом случае для подключения CSS стилей используется метатег link, в котором прописан путь до внешнего файла стилей. Помещается этот метатег в раздел заголовков соответствующей веб страницы между тегами head. Вот формат его написания:
Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».
Так примерно будет выглядеть строчка подключения стилей CSS в html коде:
Преимущество этого способа состоит в том, что внешнюю таблицу стилей можно привязать сразу к нескольким веб страницам.
2. Второй способ заключается в написании так называемых глобальных стилей, которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style и обычно помещают в секцию заголовка между тегами head:
Недостаток этого способа в том, что правила CSS глобальных стилей применяются только к той веб-странице, в которой они прописаны.
3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style, который включает в себя в качестве параметров набор CSS свойств:
Абзац с серым фоном и красным текстом
Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.
Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.
Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:
Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):
- селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
- пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
- между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
- свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
- пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
- так же код не чувствителен к регистру символов.
Чтобы было понятней рассмотрим несколько примеров.
Разберем данное CSS правило:
- body — это селектор, который представляет из себя имя тега body;
- background — свойство стиля, с помощью которого задаются параметры фона;
- #0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.
В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега, потому что в качестве селектора указано имя тега без символов .
Рассмотрим еще пример:
Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги h2 зеленым цветом и задаст ему размер шрифта 24 пикселя.
В качестве селектора тега, кроме имени тега, можно указывать класс:
.yellowtext {color:yellow}
Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут class и его значение будет равно имени стилевого класса без точки:
В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.
В качестве значения атрибута class можно задавать несколько имен стилевых классов, разделив их пробелами. В этом случае действие стилевых классов сложится:
В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.
Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:
- в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
- привязка к html элементу осуществляется через атрибут id, в качестве значения которого устанавливают имя стиля без знака решетки;
- значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.
Рассмотрим пример для ясности:
К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.
Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили и задавать сразу несколько одинаковых стилей. Посмотрим пример:
h2.redtext, p strong {color: red}
В примере через запятую указано два селектора: «h2.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h2 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:
Комментарии CSS
Язык css позволяет как и html задавать комментарии. Для того, чтобы выделить фрагмент кода CSS в комментарий достаточно заключить его в специальные слеши со звездочками:
С помощью комментариев можно вносить различные пояснения в css код . Иногда разработчики могут закомментировать некоторые правила, что бы не удалять их.
На этом на сегодня все. В ближайшее время постараюсь продолжить знакомить с CSS. О каскадных стилях можно рассказать еще очень много интересной и полезной информации. Чтобы не пропустить новые статьи не забудьте подписываться на обновления блога. До новых встреч!
Подключение таблицы стилей | bookhtml.ru
Продолжим изучение уроков css. Как же нам прикрепить таблицу стилей к html-странице?
Для начала давайте создадим нашу первую таблицу стилей. В этом нам поможет простой Блокнот. Открываем Блокнот и сохраняем файл как таблицу стилей. Сохраняем файл в ту же папку, где лежит наша html-страничка и даем ему имя, например, style.css. Все, таблица стилей создана, правда в ней пока нет ни одной записи.
Теперь нам необходимо подключить таблицу стилей к нашей html-страничке. Вспоминаем из уроков по html, что у нас создана html-страничка имя которой index.html. И как же подцепить нашу таблицу стилей style.css к данной html-странице?
Открываем файл index.html в Блокноте. Внутри контейнера <head> (между тегами <head> и </head> в голове документа) с помощью одинарного тега <link>. К тегу <link> применяем три атрибута: атрибут href — указывает путь, где лежит таблица стилей (в нашем случае «style.css» так как таблица находится в той же папке), атрибут type — тип подключаемой таблицы стилей (тип всегда один и тот же — «text/css»), атрибут rel — указывает на то, как взаимосвязаны между собой html-страница index.html и таблица стилей style.css ( связь такая: style.css является таблицей стилей для страницы index.html поэтому в значении пишем «stylesheet».
Пример:
<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>
<html>
<head>
<title>заголовок документа (web-страницы)</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»Keywords» content=»Ключевые слова»>
<meta name=»Description» content=»Описание страницы»>
<link href=»style.css» type=»text/css» rel=»stylesheet»>
</head>
<body>
</body>
</html>
Вот так мы подключили таблицу стилей к html-странице.
Способы подключения таблиц стилей | up2top.ru
Существует три основных способа подключения каскадных таблиц стилей в HTML, соответствующие трем видам CSS, а именно:
- строковые (inline),
- внутренние (internal) и
- внешние (external) таблицы стилей.
Строковые (inline) таблицы стилей
Строковые таблицы стилей включаются непосредственно в оформляемый HTML-элемент посредством глобального атрибута style. Например, мы можем выделить параграф текста с помощью следующей записи:
<p style=«color: green; font-size: 13px;»>
Это выделенный абзац текста.
</p>Обратите внимание, данная строковая таблица стилей относится только к содержащему ее HTML-элементу, поэтому, мы не указываем селектор, а сами объявления стилей перечисляем в одну строку без фигурных скобок.
Внутренние (internal) таблицы стилей
Внутренние таблицы стилей относятся ко всей веб-странице и включаются в нее с помощью тега style в разделе мета-данных HTML-документа, т. е. внутри тега head. Например, следующий код:
<head>
<title>Пример внутренней таблицы стилей</title>
<style>
p {
color: green;
font-size: 13px;
}
</style>
</head>определяет оформление всех параграфов на странице.
Внешние (external) таблицы стилей
Наконец, внешние таблицы стилей — это способ подключения каскадных таблиц в HTML-документы из отдельных файлов. Разметка веб-страницы хранится в HTML-файле, а ее оформление — в отдельном файле с расширением css. Связь между веб-страницей и относящейся к ней внешней таблицей стилей устанавливается посредством тега link в разделе мета-данных HTML-документа:
<head>
<title>Пример внешней таблицы стилей</title>
<link rel=«stylesheet» href=«mystyle.css» />
</head>Здесь атрибут rel (от англ. relationship, т. е. отношение) содержит ключевое слово «stylesheet», и таким образом определяет подключаемый файл, как таблицу стилей, а атрибут href содержит путь к этому файлу.
Из всех трех перечисленных способов подключения каскадных таблиц внешние таблицы стилей являются наиболее предпочтительными по следующим причинам:
- полное разделение структуры документа от его оформления.
- возможность использования одной и той же таблицы стилей для разных HTML-страниц.
- возможность изменения оформления целого сайта, путем корректировки одной или нескольких таблиц стилей.
Подключение CSS
Существует три способа подключения CSS к документу HTML.
Внутриэлементные стили
При внутриэлементном или строчном подключении стиля, он определяется непосредственно внутри тега HTML при помощи атрибута style.
Это выглядит следующим образом:
<p>текст</p>
Данное определение сделает параграф красного цвета.
Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления, поэтому внутриэлементный способ определения стилей следует стараться избегать.
Внутридокументные стили
Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы. В теге <head> определяется тег <style>, в котором задаются все стили для веб-страницы.
Такое определение выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Пример CSS</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...
Следующее определение сделает все параграфы страницы красными, а все ссылки синими.
Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать.
Внешние стили
Внешние стили используются для подключения одновременно ко многим страницам сайта. Обычно это отдельный CSS файл, который выглядит приблизительно следующим образом:
p {
color: red;
}
a {
color: blue;
}
Если имя этого файла будет «web.css«, то его подключают к HTML документу следующим образом при помощи тега <link>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" type="text/css" href='web.css' />
...
Далее вы увидите, что есть еще и другие способы подключения внешних стилей, но в данный момент упомянутых способов будет вполне достаточно.
Чтобы максимально плодотворно изучить материал данного учебника, код, приведенный в нем, следует испытать на практике, поэтому в текстовом редакторе создайте новый файл и сохраните его под именем «web.css» в той же директории что и HTML файл.
Теперь измените HTML таким образом, чтобы он начинался со следующих строк:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Моя первая веб-страница</title>
<link rel="stylesheet" type="text/css" href='web.css' />
</head>
...
Сохраните HTML файл. Теперь к нему подключен CSS файл, который на данный момент пустой и поэтому никак не повлияет на HTML файл. По мере изучения учебника «CSS начального уровня» вы будете добавлять данные и менять их в CSS файле, а результаты их работы можно будет увидеть, просто обновляя веб-страницу в браузере.
Создание композиции шапки дизайн-макета сайта
Здравствуйте уважаемый посетитель!
Сегодня мы перейдем к назначению стилей CSS для HTML-кода веб-страницы, созданной в предыдущих статьях. Но, для того, чтобы при оформлении внешнего вида страницы в дальнейшем у нас как можно меньше возникало проблем с кроссообразностью, в первую очередь, сделаем сброс всех свойств стилей, установленных по умолчанию, после чего назначим базовые настройки файла CSS.
Содержание
- Способы добавления стилей на HTML-страницу
- Подключаем внешнюю каскадную таблицу стилей CSS
- Для чего нужен сброс настроек стилей CSS по умолчанию
- Делаем сброс свойств стилей по умолчанию и устанавливаем базовые настройки файла CSS
- Исходные файлы сайта
Способы добавления стилей на HTML-страницу
Добавлять стили на HTML-страницу можно разными способами, такими как:
- встроенные стили;
- внутренние таблицы стилей;
- внешние таблицы стилей.
Для применения встроенных стилей необходимо использовать атрибут «style» непосредственно в том элементе, для которого необходимо назначить свойство CSS. По существу, встроенный стиль является расширением одиночного тега языка HTML, используемого на веб-странице.
Ниже приведен такой пример для тега <div>.
<div style=«width: 100%; background-color:#FCFCFC; border-bottom: 1px solid #888; border-radius: 6px;»>Встроенный стиль для элемента <div></div>
Особенностью данного способа является то, что в этом случае происходит смешивание структуры веб-страницы с ее стилизацией, так как все свойства назначаются в конкретных элементах языка HTML. Такое распределение стилей крайне неудобно как при верстке, так и в дальнейшем при редактировании страниц. Поэтому использование такого способа нежелательно и возможно только в крайних случаях.
Второй, по порядку, способ использования внутренних таблиц стилей отличается тем, что в этом случае все свойства CSS, назначенные для элементов HTML, располагаются в одном месте, в заголовке <head> веб-страницы.
Пример внутренней таблицы стилей приведен ниже.
<head>
<style>
* {margin: 0; padding: 0;}
body {background: #f5f5f5;}
p {text-indent: 10px;}
a {color: #00f;}
</style>
</head>
Хотя этот способ в какой-то степени реализует принцип разделения кода и оформления сайта, но все равно, при большом количестве страниц будет очень неудобно заниматься редактированием свойств CSS такого сайта. Это можно сравнить со статическими сайтами, когда при выполнении каких-либо обновлений нужно вносить изменений в большое количество страниц.
Поэтому, для того, чтобы полностью разделить код HTML-страниц от их оформления, и таким образом существенно упростить работу по верстки и редактированию веб-страниц наиболее широко используется третий способ — внешние таблицы стилей.
Этот способ отличается от предыдущего тем, что все свойства CSS, назначенные для элементов HTML располагаются не в самой странице, а в отдельном, прикрепленном к ней, файле.
Зато, какой эффект дает такое разделение кода и стилей. Ведь, для того, чтобы изменить какой-нибудь элемент, который присутствует на большом количестве страниц (например, в сайдбаре), не надо везде менять код тратя на это кучу времени. А достаточно только заменить свойство цвета в одном месте — в отдельном файле таблицы стилей.
Поэтому, для назначения стилей нашей HTML-страницы мы будем использовать именно такое решение — способ внешней таблицы стилей.
Подключаем внешнюю каскадную таблицу стилей CSS
С начала, создадим в основной папке сайта «www» папку «styles», аналогично, как мы создавали папку «images» в статье Делаем разметку шапки и футера HTML-страницы.
Таким образом, теперь «www» будет содержать два файла и две папки, как показано на следующем скриншоте.
Рис.3
Затем, создадим файл таблицы стилей CSS и сохраним его во вновь созданной папке «styles».
Создается этот файл, аналогично тому, как мы это делали с файлом «index.html» в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере. Только в этом случае назовем его «main.css», означающее, что это будет у нас главная таблица стилей CSS (расширение в этом случае должно быть именно «css», а не «html»).
Ну, а теперь осталось только подключить файл «main.css» к нашей веб-страницы. Делается это записью в заголовке <head> с помощью тега <link>. Ниже показан фрагмент HTML-кода страницы в части, касающейся заголовка, с дополненной строкой 5.
<head>
<meta charset=«utf-8» />
<title>Заголовок страницы</title>
<meta name=«Description» content»=Краткое описание содержания страницы»>
<link rel=«styleshee» type=«text/css» href»=«styles/main.css»/>
</head>
Здесь следует дать некоторые пояснения используемых атрибутов тега <link>:
- rel=«styleshee» — указывает на тип ссылки, в нашем случае это ссылка на таблицу стилей;
- type=«text/css» — указывает тип файла;
- href=«styles/main.css» — определяет путь к CSS-файлу, который указывает, что файл с именем «main.css» находится в папке «styles» того же каталога.
На этом, подключение каскадной таблицы стилей к HTML-странице мы закончили и теперь займемся сбросом всех значений свойств CSS, установленных по умолчанию и установкой базовых настроек файла css.
Для чего нужен сброс настроек стилей CSS по умолчанию
Всем известно, что для просмотра сайтов пользователи интернет используют разные браузеры. При этом, нередко возникает проблема с кроссбраузерностью, при которой один и тот же код веб-страниц может выглядеть в различных браузерах по-разному.
Это очень неприятная особенность работы браузеров, так как в ходе верстки, при оформлении внешнего вида страниц, приходиться довольно много времени уделять постоянной проверке кроссбраузерности при работе сайта в разных условиях.
Почему надо проверять кроссбраузерность в ходе верстке, а не по ее окончании? Да просто потому что, если после большой проделанной работе по верстке сайта, окажется, что у него возникла проблема с кроссбраузерностью, то найти причину этой проблемы будет куда сложнее, чем, если отслеживать работу сайта на разных браузерах поэтапно, зная, какие изменения в коде были сделаны перед появлением проблемы.
Поэтому, есть такая рекомендация, что не стоит вопрос кроссбраузерности оставлять на потом, а все же периодически делать поэтапные проверки.
Для того, чтобы минимизировать издержки от такого неприятного свойства браузеров, обычно делается сброс всех значений свойств CSS, установленных по умолчанию, а затем назначаются общие, базовые настройки стилей, чтобы уже на начальном этапе придать странице одинаковый вид в разных браузерах. Как говориться, начать с чистого листа.
Убедиться в том, что нужно это делать, можно взглянув на нашу страницу в двух разных браузерах, которая имеет на данный момент всего несколько строчек, но и то, при свойствах стилей по умолчанию отображается не совсем одинаково.
Ниже, в качестве примера, приведено 2 скриншота страницы, слева в браузере «Opera», справа — «Mozilla».
Вид страницы в разных браузерах до сброса настроек свойств CSS по умолчанию | |
 Рис.5 Вид страницы в браузере «Opera» |  Рис.6 Вид страницы в браузере «Mozilla» |
Если внимательно посмотреть, то можно заметить такие отличия, как:
- отступы между строками неодинаковые, что приводит к тому, что при одинаковой высоте рабочих окон, нижняя строка в браузере «Mozilla» находится ниже чем, в «Opera»;
- неодинаковый вид подчеркивания ссылок;
- неодинаковый размер маркеров списков;
- разный шрифт, особенно это заметно в последней строке
И это только несколько простых строк. А если бы было здесь множество элементов, да еще таких, как формы, то можно себе представить, как по-разному смотрелась бы страница.
Поэтому, сейчас перейдем к исправлению этой ситуации и запишем в файле каскадной таблицы стилей CSS-код, который позволит отображать нашу страницу в разных браузерах одинаково.
Делаем сброс свойств стилей по умолчанию и устанавливаем базовые настройки файла CSS
Ниже представлен код файла CSS, в котором одна часть предназначена для сброса свойств CSS, а вторая для установки базовых настроек.
/*———-начало сброса настроек по умолчанию———-*/
html, body, div, span, h2, h3, h4, h5, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
padding: 0;
margin: 0;
outline: 0;
vertical-align: baseline;
font-size: 100%;
border: 0;
background: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
a {
padding: 0;
margin: 0;
outline: none;
vertical-align: baseline;
font-size: 100%;
background: transparent;
}
td, td img {
vertical-align: top;
}
input, select, button, textarea {
outline: none;
margin: 0;
font-size: 100%;
}
input[type=»text»], input[type=»password»], textarea {
padding: 0;
}
input[type=»checkbox»] {
vertical-align: bottom;
}
input[type=»radio»] {
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
font-size: smaller;
}
Как работать и подключить CSS к HTML документу на практике
Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.
В прошлом уроке мы бегло узнали историю его появления. Если не читали, то настоятельно рекомендую.
Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.
Как работает CSS?
В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.
Базовый синтаксис CSS
Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:
В стилях подобное мы бы достигли написанием следующего кода:
body {background-color: #FF0000;}
body {background-color: #FF0000;} |
Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:
Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.
Как подключить CSS к HTML документу?
Можно выделить 3 способа подключения CSS к веб странице. Все их мы сейчас рассмотрим на примере. Внимательно смотрите 3 способ, так как он самый правильный с точки зрения стандартов верстки и логики. Другие тоже верны, но это «грубые» варианты. Их лучше не использовать.
Метод 1 – Внутристроковое размещение стилей (через атрибут style)
Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html>
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html> |
Метод 2 – Через использование тегов style
Другой способ подразумевает включение парных тегов стилей <style></style> внутрь той страницы, где мы хотим применить их. Например, как здесь:
<html> <head> <title>Простой пример</title> <style type=»text/css»> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html>
<html> <head> <title>Простой пример</title> <style type=»text/css»> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html> |
Метод 3 – Внешнее подключение файлов стилей.
Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:
<link rel=»stylesheet» type=»text/css» href=»style/style.css» />
<link rel=»stylesheet» type=»text/css» href=»style/style.css» /> |
Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:
Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style/style.css» /> </head> <body> </body> </html>
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style/style.css» /> </head> <body> </body> </html> |
Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)
Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.
Эта техника поможет сэкономить вам уйму времени. Представьте, что Вы хотите изменить цвет фона веб-сайта с количеством 100-200 страниц, таблица CSS спасет вас от необходимости вручную изменять все эти 100-200 документов.
Давайте еще раз закрепим все на практике.
Попробуйте самостоятельно
Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:
Default.htm
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>My first stylesheet</h2> </body> </html>
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>My first stylesheet</h2> </body> </html> |
Style.css
body { background-color: #FF0000; }
body { background-color: #FF0000; } |
Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)
Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.
В следующем уроке мы взглянем на некоторые свойства CSS