Как хорошо, что я занимаюсь саморазвитием.

Я выучу CSS за месяц, а то и быстрее

Шаг 4: Просмотр HTML страницы в браузере

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

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

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

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

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

   РЕЗУЛЬТАТ:

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

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

   Внешние (связанные) стили

   Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

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

   В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

   Пример

   ......... ......... .........

   Подключение стилей

   Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

   Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

   P { text-indent: 30px; font-size: 14px; color: #666; }

   Объявление стиля – это пара свойство CSS: значение CSS .

   Например: color: red

   При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

   Селекторы CSS

   Селектор	Описание	Подробнее
   *	Любой элемент
   E	Элемент, определенный тегом E
   E#myid	Элемент E с идентификатором "myid"
   E.myclass	Элемент E класса "myclass"
   E	Селектор существования атрибута
   E	Селектор равенства атрибута
   E	Селектор атрибута со списком значений	Селекторы атрибутов
   E	Селектор префикса атрибута
   E	Селектор суффикса атрибута
   E	Селектор подстроки атрибута
   E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
   E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
   E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
   E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
   E:focus	Элемент E в фокусе	Динамические псевдоклассы
   E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
   E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
   E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
   E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
   E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
   E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
   E:root	Элемент E, корень документа	Структурные псевдоклассы
   E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
   E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
   E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
   E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
   E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
   E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
   E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
   E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
   E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
   E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
   E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
   E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
   E::first-line	Первая строка элемента E	Псевдоэлементы
   E::first-letter	Первая буква элемента E	Псевдоэлементы
   E::before	Содержимое до элемента E	Псевдоэлементы
   E::after	Содержимое после элемента E	Псевдоэлементы
   E::selection	Выделение в элементе E	Псевдоэлементы
   E F	Элемент F, который находится внутри элемента E
   E > F	Элемент F, который находится непосредственно внутри элемента E
   E + F	Элемент F, который следует сразу после элемента E
   E ~ F	Элемент F, который следует после элемента E

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

   Универсальный селектор соответствует любому элементу html-документа.

   Для обозначения универсального селектора применяется символ "звёздочка" (*).

   Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

   * { margin: 0; padding: 0; }
   

   В некоторых случаях символ "звёздочка" (*) может быть опущен:
   *.myclass и .myclass эквиваленты,
   *#myid и #myid эквивалентны

   Селекторы тегов

   В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

   H1 {color: red; text-align: center;}

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

   H1, h2, h3, h4 {color: red; text-align: center;}

   Селекторы идентификаторов

   HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

   ...

   Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

   Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

   В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

   Div#a1 {color: green;}

   аналогично

   #a1 {color: green;}
   

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

   Селекторы классов

   Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

   ...

   Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

   Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

   В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

   I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

   ...

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

   Селекторы атрибутов

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

   
   h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
   input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
   a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
   span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
   a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
   { display: block; float: left; width: 280px; }
   

   Между именем тега и квадратной скобкой ([) не должно быть пробела!

   
   

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

   Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

   Контекстные селекторы

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

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

   Пример

   1. Пушкин А.С.
      • «Выстрел»
      • «Метель»
      • «Дубровский»
   2. Гоголь Н.В.
      • «Ревизор»
      • «Тарас Бульба»
      • «Мертвые души»
   3. Толстой Л.Н.
      • «Война и мир»
      • «Анна Каренина»
      • «Воскресение»

   РЕЗУЛЬТАТ:

   1. Пушкин А.С.
      • «Выстрел»
      • «Метель»
      • «Дубровский»
   2. Гоголь Н.В.
      • «Ревизор»
      • «Тарас Бульба»
      • «Мертвые души»
   3. Толстой Л.Н.
      • «Война и мир»
      • «Анна Каренина»
      • «Воскресение»

   Дочерние селекторы

   Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

   Пример

   1. Пушкин А.С.
      • «Выстрел»
      • «Метель»
      • «Дубровский»
   2. Гоголь Н.В.
      • «Ревизор»
      • «Тарас Бульба»
      • «Мертвые души»
   3. Толстой Л.Н.
      • «Война и мир»
      • «Анна Каренина»
      • «Воскресение»

   РЕЗУЛЬТАТ:

   1. Пушкин А.С.
      • «Выстрел»
      • «Метель»
      • «Дубровский»
   2. Гоголь Н.В.
      • «Ревизор»
      • «Тарас Бульба»
      • «Мертвые души»
   3. Толстой Л.Н.
      • «Война и мир»
      • «Анна Каренина»
      • «Воскресение»

   Соседние селекторы

   Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

   Пример

   РЕФЛЕКСОТЕРАПИЯ

   РЕЗУЛЬТАТ:

   РЕФЛЕКСОТЕРАПИЯ

   Смежные селекторы

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

   Пример

   ---

   РЕФЛЕКСОТЕРАПИЯ

   "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

   ---

   Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

   РЕЗУЛЬТАТ:

   РЕФЛЕКСОТЕРАПИЯ

   "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

   Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

   
   
   

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

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

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

   Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

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

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

   Нет никаких других ограничений на то, какую форму может принимать 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 , то выиграет второе правило.

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

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

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

   Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

   CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:

   Color: red; background: #cccccc ;

   Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

   • Вложение(inline).
   • Встраивание(embeding).
   • Связывание(linking).

   Основа документа - html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

   Метод вложения (inline) CSS

   Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

   Обычный текст

   "color:red; background:#cccccc" > К это абзацу применен стиль методом встраивания.

   Метод встраивания (embeding) CSS

   Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

   < style type= "text/ css"> p { color: red ; background: #cccccc } Здесь применен стиль методом вложения. Обычный текст

   В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

   Элемент “style” ставят только в элементе “head”.

   Метод связывания (linking) CSS

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

   Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

   Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

   Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

   Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ - это таблица стилей.

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

   Основные элементы CSS

   Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

   • Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
   • Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
   • Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
   • Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

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

   Типы селекторов

   В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.

   • Универсальный . Задаёт правила всем элементам страницы, для которых не установлены другие правила.
     Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.
   • Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p , h1 , ul .
     Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов
     .
   • Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
   • Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.

   Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.

   CSS-код будет таким:

   Step {margin-left: 15px;}

   HTML-код, который привяжет элемент к правилу, будет следующим:

   Текст с отступом

   • Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:

   #exclusive {color:orange;}

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

   P i {fint-family: Century;}

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

   Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):

   A.step {margin-left: 15px;}

   Как подключить CSS к HTML-странице?

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

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

   Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна - оформление тега в нём и задано.

   Следующий код задаёт размер и цвет шрифта тексту внутри тега

   Текст, оформленный с помощью внутреннего стиля.

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

   Задаются тегом …

   Связанные стили

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

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

   Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.

   Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

   rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

   Импортированные стили

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

   Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:

   @import url(any.css);

   Команда прописывается строкой ниже открывающего тега