Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 4:

Механизмы CSS

< Лекция 3 || Лекция 4: 12345 || Лекция 5 >

Каскадные таблицы стилей

Языки каскадных таблиц стилей, такие как CSS, позволяют объединять стилевую информацию из различных источников. Каскад задается последовательностью элементов link и/или style в элементе head HTML-документа.

<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
  <link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
  <link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
  <link rel="stylesheet" href="common.css" type="text/css">
  <style type="text/css">
    p.special {
      color: rgb(230, 100, 180);
    }
  </style>

В приведенном примере присутствуют две альтернативные таблицы стилей с именем compact. Если пользователь выбирает стиль "compact", браузер должен использовать обе эти таблицы плюс таблицу common.css, присутствующую постоянно, и информацию из элемента style. Если пользователь выбирает стиль "big print", используются таблицы bigprint.css, common.css и элемент style.

Каскад может состоять из таблиц, применяемых к различным носителям информации:

<link rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
  <link rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
  <link rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
  <link rel="stylesheet" href="techreport.css" type="text/css">
  <style media="screen, print" type="text/css">
    p.special {
      color: rgb(230, 100, 180);
    }
  </style>

Здесь атрибут media элементов link и style задает тип носителя информации. Голосовой браузер будет использовать только таблицу corporate-aural.css (media="aural"), экран и принтер - corporate-screen.css и corporate-print.css, соответственно, плюс стили из элемента style.

Наследование стилей

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

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

Если атрибут наследуется, браузер проверяет родительский элемент. Процесс продолжается, пока не найдено подходящее правило. Этот механизм позволяет уменьшить размеры таблицы стилей. Например, разработчик может задать гарнитуру ( font-family ) элемента body, и она будет применена ко всем отображаемым на страницы элементам.

Правила CSS

Стилевая информация каскадной таблицы стилей состоит из отдельных строительных блоков, называемых правилами. Каждое правило, в свою очередь, состоит из двух частей, селектора и объявления стиля, заключенного в фигурные скобки ({}). Селекторы используются для отбора ("селекции") элементов HTML-страницы, к которым будет применено правило. Объявление состоит из пар имя свойства – значение, разделенных двоеточием (:). Пары между собой разделяются точкой с запятой (;).

h1 {
      color: red;
      font-size: large;
    }

Точка с запятой после последней пары необязательна, однако ее наличие считается хорошей практикой.

Селекторы

Простой селектор – это селектор типа либо универсальный селектор (*), за которым сразу (без пробелов) могут следовать селектор ID, селекторы класса и/или псевдо-класса.

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

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

Селектор типа

Этот селектор указывает тип элемента. h1 {color: red;}

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

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

Универсальный селектор (*) соответствует любому элементу в документе. * {border: solid 1px blue;}

В этом примере правило определяет тонкую синюю рамку вокруг каждого элемента.

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

  • *.myclass эквивалентно .myclass
  • *#myId эквивалентно #myId
Селекторы атрибутов

Спецификация CSS 2.1 позволяет связывать стилевую информацию с атрибутами HTML-элементов.

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

[title] {color: blue;} помечает синим цветом все элементы, имеющие атрибут title.

a[name]:before {content: "\2660";} помещает символ пиковой масти перед каждой закладкой в документе.

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

a[rel="Copyright"] {color: red;} помечает красным все гиперссылки на страницы с авторскими правами.

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

a[title~="map"] {color: green;} помечает зеленым гиперссылки, атрибут title которых содержит слово "map", например, "Site map".

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

[lang|="ru"] {color: red;}
[lang|="en"] {color: blue;}

Помечает элементы, имеющие атрибут lang (естественный язык) со значением "ru" или "ru-ru", красным, а английский текст ( lang="en-us" или lang="en-uk" ) синим. Как правило, этот селектор применяется для различения естественных языков.

< Лекция 3 || Лекция 4: 12345 || Лекция 5 >
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?