Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

Внешняя таблица стилей

Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

Пример 1. Подключение внешних стилей

Заголовок

Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

Содержимое файла style.css показано в примере 2.

Пример 2. Содержимое файла style.css

H1 { font-family: "Lobster", cursive; color: green; }

Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей - наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.

Внутренняя таблица стилей

Стили пишутся в самом HTML-документе внутри элемента

Заголовок

В данном примере задан стиль элемента

, который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

Заголовок 1

Заголовок 2

В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

Заголовок 1

Заголовок 2

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

Некоторые стили поддерживаются не всеми браузерами. Однако можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.

Возможно, Вам понадобятся также:

По методам добавления стилей в документ различают три вида стилей.

Внутренние стили

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

РЕЗУЛЬТАТ:

Абзац с текстом синего цвета

Абзац с текстом красного цвета

Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.

Глобальные стили

Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .

Атрибут type="text/css" , ранее обязательный для тега .........

Серый цвет текста во всех абзацах Web-страницы

1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
2. Перенесите из предыдущего примера код CSS (содержимое тега (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

   Взгляните на пример, ниже к нему будут комментарии.

   
   
   
   
   
   
   
   

   Всё о слонах

   
   

   На этом сайте Вы найдёте любую информацию о слонах.

   
   

   Купить слона

   
   

   У нас Вы можете по выгодным ценам приобрести лучших слонов!!

   
   

   Взять слона на прокат

   
   

   Только у нас Вы можете взять любых слонов на прокат!!

   
   
   
   

   Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

   ,

   - будут синими а параграфы

   - красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.

   Теперь обещанные комментарии:

   Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

   Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

   CSS в отдельном внешнем файле.

   Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

   Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

   Body {background-color: #c5ffa0}
   a {color:#000060; font-weight: bold;}
   a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
   h1 {color: #0000ff; font-size:18px}
   h2 {color: #ff00ff; font-size:16px}
   p {color: #600000; font-size:14px}

   О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

   Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

   Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

   Тег имеет атрибуты:

   href - Путь к файлу.
   rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

   • shortcut icon - Определяет, что подключаемый файл является .
   • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
   • application/rss+xml - Файл в формате XML для описания ленты новостей.

   type - MIME тип данных подключаемого файла.

   Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

   Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

   Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

   Файл mystyle.css
   body {background-color: #c5ffa0}
   a {color:#000060; font-weight: bold;}
   a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
   h1 {color: #0000ff; font-size:18px}
   h2 {color: #ff00ff; font-size:16px}
   p {color: #600000; font-size:14px}
   Файл index.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Всё о слонах

   
   

   На этом сайте Вы найдёте любую информацию о слонах.

   
   
   
   Файл elephant.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Купить слона

   
   

   У нас Вы можете по выгодным ценам приобрести лучших слонов!!

   
   
   
   Файл elephant1.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Взять слона на прокат

   
   

   Только у нас Вы можете взять любых слонов на прокат!!

   
   
   
   

   В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

   В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

   • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
   • Используйте тег . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

     ...

     1.3. Встроенные стили

     Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

     Обратите внимание на этот текст.

     Такие стили действуют только на тот элемент, для которого они заданы.

     1.4. Правило @import

     Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

     Правило @import также используется для подключения веб-шрифтов:

     @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

     2. Виды селекторов

     Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.

     2.1. Универсальный селектор

     Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

     2.2. Селектор элемента

     Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

     2.3. Селектор класса

     Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег

     и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

     .headline { text-transform: uppercase; color: lightblue; }

     Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

     Инструкция пользования персональным компьютером

     2.4. Селектор идентификатора

     Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

     Нет никаких других ограничений на то, какую форму может принимать id , в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д.

     Уникальный идентификатор элемента может использоваться для различных целей, в частности, как способ ссылки на конкретные части документа с использованием идентификаторов фрагментов, как способ нацеливания на элемент при создании сценариев и как способ стилизации конкретного элемента из CSS.

     #sidebar { width: 300px; float: left; }

     2.5. Селектор потомка

     Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

     Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

     p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

     p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

     First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

     2.6. Дочерний селектор

     Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
     Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

     2.7. Сестринский селектор

     Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.

     h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

     , не затрагивая остальные абзацы;

     h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

     2.8. Селектор атрибута

     Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

     [атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

     селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

     селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

     селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

     селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

     селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

     селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

     селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

     2.9. Селектор псевдокласса

     Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:

     :hover — любой элемент, по которому проводят курсором мыши;

     :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

     :active — элемент, который был активизирован пользователем;

     :valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

     :invalid — поля формы, содержимое которых не соответствует указанному типу данных;

     :enabled — все активные поля форм;

     :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

     :in-range — поля формы, значения которых находятся в заданном диапазоне;

     :out-of-range — поля формы, значения которых не входят в установленный диапазон;

     :lang() — элементы с текстом на указанном языке;

     :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

     :target — элемент с символом # , на который ссылаются в документе;

     :checked — выделенные (выбранные пользователем) элементы формы.

     2.10. Селектор структурных псевдоклассов

     Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

     :nth-child(odd) — нечётные дочерние элементы;

     :nth-child(even) — чётные дочерние элементы;

     :nth-child(3n) — каждый третий элемент среди дочерних;

     :nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

     :nth-child(n+2) — выбирает все элементы, начиная со второго;

     :nth-child(3) — выбирает третий дочерний элемент;

     :nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

     :first-child — позволяет оформить только самый первый дочерний элемент тега;

     :last-child — позволяет форматировать последний дочерний элемент тега;

     :only-child — выбирает элемент, являющийся единственным дочерним элементом;

     :empty — выбирает элементы, у которых нет дочерних элементов;

     :root — выбирает элемент, являющийся корневым в документе — элемент html .

     2.11. Селектор структурных псевдоклассов типа

     Указывают на конкретный тип дочернего тега:

     :nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

     :first-of-type — выбирает первый дочерний элемент данного типа;

     :last-of-type — выбирает последний элемент данного типа;

     :nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

     :only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

     2.12. Селектор псевдоэлемента

     Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:

     :first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

     :first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

     :before — вставляет генерируемое содержимое перед элементом;

     :after — добавляет генерируемое содержимое после элемента.

     3. Комбинация селекторов

     Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

     img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

     4. Группировка селекторов

     Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

     H1, h2, p, span { color: tomato; background: white; }

     5. Наследование и каскад

     Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.

     5.1. Наследование

     Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

     Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

     Принудительное наследование

     С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.

     Как задаются и работают CSS-стили

     1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

     2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

     3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

     
     Рис. 2. Режим разработчика в браузере Google Chrome

     4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

     div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

     5.2. Каскад

     Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.

     Правило!important

     Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

     Специфичность

     Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:

     для id добавляется 0, 1, 0, 0 ;
     для class добавляется 0, 0, 1, 0 ;
     для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
     для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
     универсальный селектор не имеет специфичности.

     H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

     В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

     Порядок подключённых таблиц

     Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.