Редактирование выполняется в любом текстовом редакторе.

3.1.1. Атрибуты тега < link>

Атрибут rel отвечает за установку взаимосвязи и в данном случае имеет

значение stylesheet.

 

Атрибуту type всегда присваивается значение text/css. Оно описывает тип данных, которые будут загружены с помощью тега link.

 

Атрибут href имеет значением URL, указывающем на таблицу стилей.

Он может быть как абсолютным, так и относительным в зависимости от потребностей.

 

Атрибут media определяет типы устройства, для которых используется таблица.

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

 

Значения атрибута media

all для всех устройств.

aural для синтезаторов речи, средств чтения с экрана и других

аудио-представлений документа.

handheld для переносных устройств, таких как карманные компьютеры

или смартфоны.

Print задается при распечатке документа на обычном принтере, а

также при выводе в окне просмотра документа перед печатью

 

projection указывают для проекционных устройств, таких как цифровой

проектор, используемый для демонстрации слайдов,

сопровождающей чтение доклада.

Screen указывают при представлении документа в экранном устройстве,

таком как монитор компьютера. Все веб-браузеры являются

экранными агентами пользователя.

 

 

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

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

таблицу стилей, как для экранного, так и для проекционного устройства:

< link rel=" stylesheet" type=" text/css" href=" visual-sheet.css"

media=" screen, projection" />

С документом может быть ассоциирована не только таблица стилей. В таких случаях в исходном представлении документа будут применяться только те теги link, атрибут rel которых имеет значение stylesheet. Таким образом, если бы вы захотели связать две таблицы стилей, basic.css и splash.css, это выглядело бы следующим образом:

 

< link rel=" stylesheet" type=" text/css" href=" basic.css" />

< link rel=" stylesheet" type=" text/css" href=" splash.css" />

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

 

Есть еще один атрибут title. Задает заголовок к таблице стилей.

Если он задан, то таблица считается предпочтительной. Если заголовок не задан, то таблица становится постоянной таблицей стилей.

 

 

Внедрение таблицы стилей

В этом случае стили задаются в стилевом блоке, ограниченном тэгами

< STYLE TYPE=" text/css" > и < /STYLE>, который должен размешаться в разделе < HEAD> документа. Вот пример:

 

< HEAD>

< STYLE TYPE=" text/css" >

<! --

В {text-transform: uppercase; }

P {background-color: lightgrey; text-align: center; }

-->

< /STYLE>

< /HEAD>

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

<! —... — >.

 

В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент Р) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом В (тэг < в> ) документа, будет отображаться прописными буквами, даже если он задан строчными.

Импортирование

В тэге < STYLE> можно импортировать внешнюю таблицу стилей с помощью

свойства @import таблицы стилей:

 

@import: url(mystyles.сss);

 

Фактически здесь мы имеем дело с аналогом тега < link>

Так же как и link, @import указывает веб-браузеру на необходимость загрузки таблицы стилей. Единственное и основное отличие заключается в синтаксисе и размещении команды.

@import находится в контейнере style. Должен располагаться перед всеми остальными правилами CSS, иначе она вообще не будет работать.

 

 

Рассмотрим такой пример:

< style type=" text/css" >

@import url(styles.css); /* @import идет первой */

h1 {color: gray; }

< /style> ink>.

 

В документе может быть несколько директив выражения @import, как

и тегов link. Однако, в отличие от link, все указанные в директивах

@import таблицы стилей будут загружены и использованы; с помощью

@import невозможно назначить альтернативные таблицы стилей.

 

Пример @import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

 

Как и в случае элемента link, можно ограничить применение импортируемой таблицы стилей одним или несколькими устройствами, перечислив их после URL таблицы стилей:

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

@import url(zany.css) projection, print;

Встраивание в теги документа

Для оперативного форматирования определенного элемента документа практически каждый тэг HTML имеет атрибут STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Исключение – те теги, которые располагаются вне элемента body (head или title, например).

 

Синтаксис атрибута style достаточно прост. Кстати, он очень похож

на объявления, размещающиеся в контейнере style, за исключением того,

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

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

 

< h1 style=" color: red'> Здесь заголовок будет отображаться шрифтом красного цвета< /h1>

 

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

 

 

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

- В случае ошибки интерпретации HTML-кода браузером, плохой связи

с сервером и пр. внешний файл CSS может не загрузиться. Из-за этого стиль для соответствующих элементов HTML не будет переопределен.

 

- Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать

файл CSS или вообще исчерпает лимит времени по загрузке данных.

В первом случае стили для части элементов не будут переопределены

(браузер успеет " обнаружить" только те правила, которые размещены

в верхней части CSS-файла). Во втором случае все элементы страницы

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

 

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

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

 

 

Группирование

1. Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы

в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило.

 

Например, следующие правила

H1 (font-family: Arial)

Н2 {font-family: Arial}

НЗ {font-family: Arial}

 

можно сгруппировать и задать в виде одного правила со списком селекторов

H1, H2, НЗ {font-family: Arial}

 

2.Аналогично группируются объявления (определения), только в списке они разделяются точками с запятой (; ).

 

Следующие правила форматирования заголовка первого уровня

H1 {font-weight: bold}

H1{font-size: 14pt}

H1 (font-family: Arial}

можно задать в виде одного правила, сгруппировав определения:

H1 {font-weight: bold; font-size: 14pt; font-family: Arial; }

Точка с запятой в конце каждого объявления очень важна при группировке. Браузеры игнорируют пробелы в таблицах стилей, и при их анализе все зависит

от правильности синтаксиса.

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

H1 {

font-weight: bold;

font-size: 14pt;

font-family: Arial;

}

 

Вот вариант еще более компактной записи:

h1 {font: 18px Helvetica; color: purple; background: aqua; }

и его эквивалент

h1{

font: 18px Helvetica;

color: purple;

background: aqua;

}

 

Однако если опустить вторую точку с запятой, браузер интерпретирует эту таблицу стилей так:

h1 {

font: 18px Helvetica;

color: purple background: aqua;

}

Поскольку background: не является действительным значением для атрибута color, а также потому, что атрибуту color может быть присвоено только одно ключевое слово, браузер полностью проигнорирует объявление color (включая часть background: aqua). При этом, возможно, цвет текста в элементах h1 и будет фиолетовым без фона цвета морской волны, но скорее всего, вы не получите и фиолетовых элементов h1. Всем им будет назначен применяемый по умолчанию цвет (обычно черный) вообще без фона. (Объявление font: 18px Helvetica останется в силе, поскольку оно совершенно правильно завершается точкой с запятой.)

 

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

Некоторые старые браузеры неправильно отрабатывают, если последнее объявление правила не завершается точкой с запятой. Всех этих неприятностей

можно избежать заранее: всегда завершайте объявления точкой

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

3.Некоторые свойства имеют собственный синтаксис группирования,

связанный с заданием значений нескольких свойств в одном.

Например, предыдущий пример при использовании свойства font запишется так:

H1 (font: bold 14pt Arial}

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

 

4.Возможно группировать как селекторы, так и определения (объявления)

Вот пример

h1, h2, h3, h4, h5, h6 {color: gray; background: white;

padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif; }

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

 

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

Имеется селектор, названный универсальным селектором (universal selector) и представляемый символом звездочка (*). Этот селектор соответствует любому элементу почти так же, как подстановочный символ в маске имени файла.

Например, чтобы сделать все элементы документа красными, можно написать:

 

* {color: red; } Это описание эквивалентно групповому селектору, в котором перечислен каждый содержащийся в документе элемент. Универсальный селектор позволяет присваивать атрибуту color каждого элемента документа значение red.

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

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

Отношения родитель-потомок

Мощь CSS в основном базируется на родительско-дочерних отношениях

(parent–child relationship) элементов. HTML-документы строятся на основании иерархии элементов, которую можно показать в форме древовидного представления документа. В этой иерархии каждый элемент тем или иным образом вписывается в общую структуру документа. Каждый элемент является или родительским (parent), или дочерним (child) элементом другого элемента, а зачастую выполняет обе

эти роли.

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: