HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
А этот не станет.
<STRONG>Этот</STRONG> — тоже.
Здесь слова "Этот текст" будут набраны синим шрифтом. Вот еще один комбинированный стиль:
P.mini { color: #FF0000; font-size: smaller }
Имя тега скомбинировано с именем стилевого класса mini. Значит, данный стиль будет применен к любому тегу , для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)
<P CLASS="mini">Маленький красный текстик. И последний пример
Этот стиль будет применен к тегу <STRONG>, находящемуся внутри тега , к которому привязан стилевой класс sel.
<P CLASS="sel"><STRONG>Этот</STRONG> текст станет красным.
В данном примере слово "Этот" будет выделено красным цветом.
Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:
H1, redtext, P EM <STRONG> { color: #FF0000 }
Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега <H1>, стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.
Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.
Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.
— Они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.
— В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля от селектора, которого нет.
— Встроенный стиль может быть привязан только к одному тегу — тому, в котором он находится.
Определение встроенного стиля указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:
<P STYLE="font-size: smaller; font-style: italic">Маленький курсивчик.
Ранее мы упомянули, что в некоторых случаях значение атрибута стиля нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.
Встроенные стили применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web- страницы (очень редко) и во время экспериментов со стилями.
В главе 14 мы рассмотрим еще одну разновидность стилей CSS. А пока что закончим с ними и приступим к рассмотрению таблиц стилей.
Таблицы стилей
Мы рассмотрели пять разновидностей стилей CSS. Четыре из них — стилевые классы, стили переопределения тега,
Таблицы стилей, в зависимости от места их хранения, разделяются на два вида.
Внешние таблицы стилей хранятся отдельно от Web-страниц, в файлах с расширением css. Они содержат CSS-код определений стилей.
Листинг 7.4 иллюстрирует пример внешней таблицы стилей.
Листинг 7.4
redtext { color: #FF0000 }
#bigtext { font-size: large } EM { color: #00FF00; font-weight: bold } P EM { color: #0000FF }
Как видим, здесь определены четыре стиля. В принципе, все нам знакомо.
Если внешняя таблица стилей хранится отдельно от Web-страницы, значит, нужно как-то привязать ее к Web-странице. Для этого предназначен одинарный метатег <LINK>, который помещается в секцию заголовка соответствующей Web-страницы. (О метатегах и секциях Web-страниц говорилось в главе 1.) Вот формат его написания:
<LINK REL="stylesheet" href="#"text_emphasis">интернет-адрес файла таблицы стилей>" TYPE="text/css">
Интернет-адрес файла таблицы стилей записывают в качестве значения атрибута HREF этого тега.
Остальные атрибуты тега <LINK> для нас несущественны. Атрибут REL указывает, чем является файл, на который ссылается тег <LINK>, для текущей Web-страницы; его значение "stylesheet" говорит, что этот файл — внешняя таблица стилей. А атрибут TYPE указывает тип MIME файла, на который ссылается данный тег; внешняя таблица стилей имеет тип MIME text/css.
Листинг 7.5
<HEAD>
.
<LINK REL="stylesheet" href="#" TYPE="text/css">
.
</HEAD>
В примере из листинга 7.5 мы привязали внешнюю таблицу стилей, хранящуюся в файле main.css, к текущей Web-странице.
Преимущество внешних таблиц стилей в том, что их можно привязать сразу к нескольким Web-страницам. Недостаток всего один, да и тот несущественный, — внешняя таблица стилей хранится в отдельном файле, так что есть вероятность его "потерять".
Внутренняя таблица стилей (листинг 7.6) записывается прямо в HTML-код Web- страницы. Ее заключают в парный тег <STYLE> и помещают в секцию заголовка. В остальном она не отличается от ее внешней "коллеги".
Листинг 7.6
<HEAD>
.
<STYLE>
redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00; font-weight: bold }
P EM { color: #0000FF }
</STYLE>
.
</HEAD>