Добавление стиля в HTML документ

Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

Наиболее простым (с точки зрения начинающего разработчика) является добавление атрибута style к HTML-элементу, например:

<p style="color: red"> Этот абзац будет выведен красным</p> <p style="color: green"> Этот абзац будет выведен зеленым</p>

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

Элемент style может быть помещен внутри элемента head HTML-документа.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> ... <style type="text/css" media="screen"> p { text-align: justify; text-indent: 1cm; } .RedParagraph { color: red; } </style></head><body> <p> Текст обычного абзаца</p> <p class="RedParagraph"> Этот абзац наследует форматирование обычного абзаца плюс красный цвет текста</p> ...</body></html>

Элемент style имеет ряд атрибутов, из которых обязательным является лишь атрибут type, описывающий язык таблицы стилей (в примере text/css ). Атрибут media определяет, для какого носителя предназначена стилевая информация; возможно как единичное значение, так и разделенный запятыми список, например, media=screen,print. Элемент style может находиться только в элементе head и встречаться там любое число раз. Внутри элемента style помещается стилевая информация, называемая правилами. Правила зависят от языка таблицы стилей. Правила CSS будут обсуждены ниже.

Наиболее продвинутым является использование внешних таблиц стилей. Этот подход дает целый ряд преимуществ:

Разработчик или администратор сайта может применять одну таблицу для многих документов
Разработчик может менять таблицу стилей, не меняя самого документа
Средства просмотра (браузеры) могут загружать таблицы стилей селективно, базируясь на типе носителя.
Стандарт HTML позволяет включать в документ любое число внешних таблиц стилей; язык таблиц стилей определяет, как эти таблицы будут взаимодействовать между собой
Разработчик может определять взаимоисключающие таблицы стилей (называемые альтернативными), и конечный пользователь может выбирать одну из них. Браузер, такой как Internet Explorer 8, позволяет делать такой выбор.
Разработчик может определить одну из альтернативных таблиц стилей как предпочтительную, и браузер будет использовать ее по умолчанию.

Внешние таблицы стилей подключаются к HTML-документу при помощи элементов link, которые располагаются в элементе head.

Здесь атрибут href задает относительный или абсолютный путь к таблице стилей, type описывает тип содержимого (в данном случае язык таблицы стилей), атрибут rel показывает отношение ( relationship ) текущего документа к ссылке, определенной в href. Отметим, что rel="stylesheet" без атрибута title показывает, что указанная таблица стилей должна использоваться во всех случаях.

Разработчик может указать предпочтительную таблицу стилей также при помощи элемента meta (расположенного в элементе head ):

или в http-заголовке (передаваемом до начала загрузки документа):

Default-Style: compact

Если предпочтительная таблица стилей указана несколько раз (в элементах meta и/или HTTP заголовке), предпочтение отдается последней в списке.

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

Элементы meta и HTTP-заголовок имеют преимущество перед элементами link.

Еще одной возможностью подключения внешней таблицы стилей является использование HTTP заголовков. Например: Link: <corporate.css>; rel=stylesheet

Эквивалентно <link href="corporate.css" rel="stylesheet">

При этом следует иметь в виду, что не все браузеры, в том числе Internet Explorer 8, понимают этот метод.

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

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

В приведенном примере присутствуют две альтернативные таблицы стилей с именем compact. Если пользователь выбирает стиль "compact", браузер должен использовать обе эти таблицы плюс таблицу common.css, присутствующую постоянно, и информацию из элемента style. Если пользователь выбирает стиль "big print", используются таблицы bigprint.css, common.css и элемент 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" ) синим. Как правило, этот селектор применяется для различения естественных языков.

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

Селектор класса соответствует атрибуту class элемента.

p.Bordered {border: solid 1px black;} соответствует абзацам, имеющим атрибут class со значением Bordered. Чтобы применить этот стиль, необходимо (и достаточно) добавить к элементу p атрибут class со значением Bordered,

<p class="Bordered">Этот абзац будет окружен рамкой</p>

Имя класса должно следовать сразу после точки (.) без пробела. В простом селекторе может быть задан более чем один класс; точка требуется перед каждым именем.

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

.Bordered.dotted {border-style: dotted;} Соответствует элементам, имеющим атрибут class со значением Bordered dotted.

Селектор класса является подмножеством селекторов атрибутов. Правила .myClass {color: red;} и [class="myClass"] {color: red;} эквивалентны.

Как отмечает спецификация, "CSS дает настолько большую власть атрибуту class, что разработчики могут создавать собственный "язык документа", основываясь на элементах, практически не имеющих собственного форматирования (таких как div и span ), и определяя стилевую информацию через атрибут class. Разработчикам следует избегать этой практики, так как структурные элементы языка документа часто имеют общепринятое значение, тогда как созданные разработчиком классы – нет". Все же следует признать, что концепция классов появилась в CSS существенно раньше введения селекторов атрибутов.

Селектор ID

Селектор id позволяет связать правило CSS с уникальным (в пределах страницы) идентификатором элемента, заданного атрибутом id. #miId {text-align: center}

Многие браузеры, в том числе Internet Explorer допускают несколько элементов с одинаковым id ; в этом случае правило применяется ко всем таким элементам.

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> p.Bordered { border: solid 1px black; } .Bordered.dashed { border-style: dashed; } #grayBorder { border-color: gray; } </style></head><body> <p class="Bordered"> Это абзац класса Bordered</p> <p class="Bordered dashed"> Это абзац классов Bordered и dashed</p></body></html>p.Bordered { border: solid 2px black; } .Bordered.dashed { border-style: dashed; } #grayBorder { border-color: gray; } ... <p class="Bordered"> Это абзац класса Bordered</p> <p class="Bordered dashed"> Это абзац классов Bordered и dashed</p> <p id="grayBorder" class="Bordered dashed"> Это абзац классов Bordered и dashed, имеющий также id</p>

Листинг 5.1. Использование селекторов

Рис. 5.1. Использование селекторов

Псевдо-классы

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

Псевдо-классы :link, :visited, :hover и :active применяются к гиперссылке ( a ) и позволяют менять оформление этого элемента в зависимости от его состояния.

a:link { color: Blue; } a:visited { color: yellow; } a:hover { color: Red; } a:active { color: green; }

a:link – обычный вид гиперссылки, которая не относится к "недавно посещавшимся"
a:visited – "недавно посещавшаяся" ссылка. Период времени для определения "недавности" различается от браузера к браузеру.
a:hover – пользователь навел указатель мыши на ссылку, но не активировал ее
a:active – пользователь активирует ссылку (нажимает кнопку мыши на ссылке)

Для того, чтобы псевдо-классы работали, как описано, они должны быть определены именно в этом порядке.

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

Для использования :hover с элементами, отличными от гиперссылки, HTML-документ должен содержать !DOCTYPE элемент со ссылкой на strict.dtd.

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

<p>Это <span>первый дочерний элемент</span>. А это <span>уже второй</span></p>

Псевдо-класс :focus применяется к элементам пользовательского ввода, таким как input, select и textarea.

input[type="text"]:focus { background: yellow; }input[type="text"]:focus { background: yellow; } ...<p>Этот элемент выделяется жёлтым цветом, когда получает фокус ввода:</p> <input type="text" />

5.2. Использование псевдоклассов

Псевдо-элементы

Псевдо-элементы :first-letter и :first-line позволяют применить специальное оформление к первому символу и первой строке объекта, соответственно, как это нередко делается в типографских текстах. Объект должен быть блочным элементом, таким как div, p, li. В случае строчных ( inline ) элементов им требуется задать свойство display: block (т.е. сделать их блочными).

p.FirstParagraph:first-letter { font-size: 200%; } p.FirstParagraph:first-line { font-variant: small-caps; }

Псевдо-элементы :before и :after позволяют добавлять сгенерированное содержимое перед и после содержимого элемента.

p.Note:before { content: "Примечание: "; }

добавляет слово "Примечание:" перед абзацем класса Note.

Комбинаторы

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

Потомки

Соединение двух (или более) простых селекторов пробелом (S1 S2) отбирает элементы S2, находящиеся внутри элементов S1.

div.note p {font-size: small;} соответствует любому элементу p (абзацу), являющемуся прямым или более поздним потомком элемента div класса note.

<div class="note"> <p> Этот абзац соответствует правилу div.note p</p> <table> <tr> <td> <p> Этот абзац также соответствует правилу div.note p</p> </td> </tr> </table> </div>

Чтобы исключить прямых потомков, можно использовать универсальный селектор (*). div.list * p {...} соответствует "внукам" и более отдаленным потомкам.

Обратите также внимание, что два следующих селектора различаются

p.note {...}p .note {...}

Первый соответствует абзацу класса note, второй – любому элементу класса note, являющемуся потомком элемента p (абзаца).

Прямые потомки

Комбинация S1>S2 (или S1 > S2) отбирает элементы S2, являющиеся прямыми потомками элементов S1.

body > p {font-size: large;} соответствует абзацам, находящимся непосредственно в элементе body.

<body> <p> Соответствует правилу body > p</p> <div> <p> Не соответствует правилу body > p</p> </div></body>

Близкие соседи

Комбинация S1+S2 (или S1 + S2) соответствует элементу S2, который следует непосредственно за элементом S1. S1 и S2 должны иметь общий родительский элемент.

<div> <h1> Главная страница</h1> <h2> Соответствует правилу h1 + h2</h2> <h2> Не соответствует правилу h1 + h2</h2> </div>div { padding: 8px; border: 4px dotted green; } .red_block { border: 4px solid red; } ... <div class="red_block"> <h1> Заголовок 1-го уровня</h1> <h2> Заголовок 2-го уровня</h2> <p> Абзац текста</p> <div> <h1> Заголовок 1-го уровня</h1> <ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Вложенный список: <ol> <li>Элемент вложенного списка</li> <li>Элемент вложенного списка</li> </ol> </li> </ul> </div> </div>

Листинг 5.3. Использование комбинаторов

Рис. 5.2. Использование комбинаторов

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

непрямым потомкам секции со сплошной рамкой - зелёный цвет;
прямым потомкам секции со сплошной рамкой - красный цвет;
заголовку 2-го уровня, идущему сразу за заголовком 1-го уровня - меньший отступ;
заголовку в секции с точечной рамкой - размер шрифта 24 пикс;
элементам вложенного списка - курсивное начертание.

Дата: 2019-02-02, просмотров: 206.

⇐ Предыдущая 2 3 4 5 678 9 10 11 Следующая ⇒