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

Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей , таблиц внешних стилей и встроенный стиль.

Сегодня мы поговорим именно о последнем способе.

Внедрения стиля в тег HTML

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

Для примера зададим разные размеры шрифта для двух разных абзацев текста:

< p style= "font-size:25px;" > Задаем этому отрезку текста высоту букв в 25 пикселей. < p style= "font-size:15px; color:#2400ff;" > А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно.

Недостатки

Пример отлично демонстрирует, как такое навешивание стилей засоряет код страницы.

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

Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.

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

Стоит также отметить и путаницу, которая обязательно всплывет в использовании атрибута style. Эта путаница возникнет из-за использования разных кавычек при вписывании стилей.

Для наглядности посмотрим на пример ниже:

< div style= "font-family: "Roboto Condensed", sans-serif" > Запись корректна. < div style= "font-family: " Roboto Condensed ", sans-serif" > Так тоже правильно. < div style= "font-family: " Roboto Condensed ", sans-serif" > Это не корректная запись. < div style= "font-family: " Roboto Condensed ", sans-serif" > И это тоже не верно

Глядя на выкладки, предоставленные выше, напрашивается логический вывод, что применение встроенных стилей связаны с рядом существенных осложнений и неудобств.

Когда стоит использовать встроенный стиль

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

< div id= "productRate" > < div style= "width: 40%" >

Запись нужной ширины для этого блока будет простейшей операцией.

Аналогичная ситуация может возникнуть при необходимости замены фонового изображения(к примеру) пользователя под ролью администратора. В таком случае тег img может не подойти. Поэтому стоит обратится к атрибуту style:

< div style= "background:url(fon.jpg)" >

Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:

< div class = "element" style= "display:block" > Всплывающее окно, которое оформляется в данный момент

Итог

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

CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

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

  • Попробуй сам »

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

  : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

  : font-size:20px; color:red; text-align:center .

  Встроенный стиль

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

  Параграф

  Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Задачи

  • Выравнивание текста по центру

    Используя встроенный стиль к параграфу выровняйте текст по центру.

  Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (CSS), или просто таблиц стилей. Таблица стилей css содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.

  Каждый стиль css должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем css параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль css к какому элементу Web-страницы привязан, или неявная, когда стиль css автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.

  Таблица стилей css может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним из главы 1, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили css можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.

  Таблицыстилей css пишут на особом языке, который так и называется -CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.

  Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.
  

  Создание стилей CSS

  Обычный формат определения стиля CSS иллюстрирует листинг 7.1.

  Вот основные правила создания стиля css.

  Определение стиля css включает селектор и список атрибутов стиля с их значениями.

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

  За селектором, через пробел, указывают список атрибутов стиля css и их значений, заключенный в фигурные скобки.

  Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ: (двоеточие). В некоторых случаях значение атрибута стиля css заключают в кавычки.

  Пары <атрибут стиля>:<значение> отделяют друг от друга символом; (точка с запятой).

  Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.

  Определения различных стилей разделяют пробелами или переводами строк.

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

  Но правила - правилами, а главное - практика. Давайте рассмотрим пример небольшого стиля:

  P { color: #0000FF }

  Разберем его по частям.

  P - это селектор. Он представляет собой имя тега

  Color - это атрибут стиля. Он задает цвет текста.

  - #0000FF - это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB. (Подробнее об RGB-коде и его задании мы поговорим в главе 8.)

  Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам

  ). Это, кстати, типичный пример неявной привязки стиля.

  Стиль css , который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.

  Рассмотрим еще пару таких стилей.

  Вот стиль переопределения тега :

  EM { color: #00FF00;
  font-weight: bold }

  Любой текст, помещенный в тег , Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень "жирности" шрифта, а его значение bold - полужирный шрифт.

  А это стиль переопределения тега :

  BODY { background-color: #000000;
  color: #FFFFFF }

  Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.

  А теперь рассмотрим совсем другой стиль:

  Redtext { color: #FF0000 }

  Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега - HTML-тега не существует.

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

  Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:

  Внимание!

  Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Внимание!". В результате этот абзац будет набран красным шрифтом.

  

  В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу . В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег , а курсивное начертание и красный цвет - стилевой класс attention.

  В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)

  

  В примере из листинга 7.3 мы привязали к тегу сразу два стилевых класса: attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large - большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)

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

  В определении именованного стиля перед его именем ставят символ # ("решетка"). Он сообщает Web-обозревателю, что перед ним именованный стиль.

  Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.

  Значение атрибута тега ID должно быть уникальным в пределах Web-страницы. Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному-единственному элементу Web-страницы.

  В примере

  #bigtext { font-size: large }
  . . .
  

  Это большой текст.

  абзац "Это большой текст" будет набран крупным шрифтом.

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

  Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.

  - Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.

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

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

  Селекторы разделяют пробелами.

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

  Мудреные правила, не так ли?.. Чтобы их понять, рассмотрим несколько примеров.

  Начнем с самого простого комбинированного стиля:

  P EM { color: #0000FF }

  В качестве селекторов использованы имена тегов

  И .

  Сначала идет тег

  За ним - тег . Значит, тег должен быть вложен в тег

  Стиль будет привязан к тегу .

  Этот текст станет синим.

  
  

  А этот не станет.

  
  

  Этот - тоже.

  Здесь слова "Этот текст" будут набраны синим шрифтом.

  Вот еще один комбинированный стиль css:

  P.mini { color: #FF0000;
  font-size: smaller }

  Имя тега

  Скомбинировано с именем стилевого класса mini. Значит, данный стиль css будет применен к любому тегу

  Для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)

  Маленький красный текстик.

  И последний пример комбинированного стиля css:

  P.sel { color: #FF0000 }

  Этот стиль будет применен к тегу , находящемуся внутри тега

  К которому привязан стилевой класс sel.

  Этот текст станет красным.

  В данном примере слово "Этот" будет выделено красным цветом.

  Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:

  H1, .redtext, P EM { color: #FF0000 }

  Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега

  , стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.

  Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.

  Стили последней - пятой - разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.

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

  В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля css от селектора, которого нет.

  Встроенныйстиль css может быть привязан только к одному тегу - тому, в котором он находится.

  Определение встроенного стиля css указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:

  Маленький
  -курсивчик.

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

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

  В главе 14 мы рассмотрим еще одну разновидность стилей CSS . А пока что закончим с ними и приступим к рассмотрению таблиц стилей.

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

  К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style Sheets - CSS ). В рамках учебника HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе CSS учебник .

  Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).

  Каждый элемент HTML имеет стиль по умолчанию . Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style . Атрибут задает встроенный (inline ) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

  Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana .

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

  CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

  Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

  
  Рис. 1. Структура объявления CSS-стиля

  Виды каскадных таблиц стилей и их специфика

  1. Виды таблиц стилей

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

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

  К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

  Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

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

  Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут 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 должен быть уникальным и на одной странице может встречаться только один раз.

  #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 , то выиграет второе правило.

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

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