Учебник HTML. Урок 5. Создание и применение стилей, типы и правила
2
149307-05-2013
Сегодня мы будем знакомиться со стилевыми таблицами. HTML код задает базовую структуру документа, а с помощью стилей можно задавать различные варианты оформления веб-страницы. Разберемся в чем разница между внутренними, внешними и глобальными стилями. Подробно рассмотрим как они применяются и узнаем об иерархии каскадных приоритетов. Также рассмотрим правила написания стилей и познакомимся с определением классов. В следующем шаге мы научимся форматировать текст с помощью стилей и узнаем основные стилевые свойства. А также уделим внимание способам оформления ссылок, меняющим их внешний вид.
Стилевые таблицы
Как вы уже знаете, HTML разрабатывался как язык разметки страниц, задающий базовую структуру документа (абзацы, заголовки, таблицы итд). При этом в HTML уже содержались такие оформительские элементы, как bgcolor, font size или align. В далеком 1996 году консорциум W3C впервые сформулировал идею использования каскадных стилевых таблиц (Cascading Style Sheets — CSS) для форматирования HTML документов. Данная рекомендация, более детализированная в 1998 году, позволяла разработчикам разделить коды структуры веб-страниц и коды оформления документа.
Стилевые таблицы — это набор правил, определяющих способ применения стилей к тегам HTML документа. В данных рекомендациях описывались перечисленные ниже три типа стилевых таблиц.
Внутренние стили
Содержатся в теле веб-страницы в качестве атрибутов HTML элементов. Каждому тегу назначаются свои собственные стили по мере их определения.
Глобальные стили
Свойства стиля описываются (внутри тега <style>) в верхней части HTML документа. Стиль, назначенный какому-то тегу, применяется ко всем прочим тегам этого же типа в пределах одной веб-страницы.
Внешние стили
Информация о свойствах стилей сохраняется в отдельном файле. Этот файл может быть подключен к любому HTML документу с помощью тега <link>, помещаемого внутри тега <head>.
Даже если не учитывать преимущества, предоставляемые стилевыми таблицами при форматировании документов, их использование, вне всяких сомнений, позволит вам, как веб-дизайнеру, сэкономить массу рабочего времени и усилий. Поскольку уже созданные стилевые таблицы можно применять к произвольному количеству HTML документов, последующее внесение корректирующих изменений будет выполняться в течение минут, а не часов или целых дней.
Если не применять стилевые таблицы, то для изменения внешнего вида какого-то отдельного тега веб-сайта пришлось бы открывать каждый документ, находить в нем этот тег, вносить в него изменения, сохранять документ, переходить к следующему документу и т.д. С другой стороны, можно изменить этот тег только в одном документе, где описаны стилевые таблицы, и эти изменения сразу же вступят в силу для всех страниц, к которым подключен документ.
Определение правил
Правила стилевых таблиц состоят из селекторов (тегов HTML, для которых создается стиль) и описаний (свойств стилевых таблиц и их значений). В приведенном далее примере селектором является тег <body>, а описание состоит из стилевого свойства (background) и его значения (black). В данном случае для всего документа в качестве фонового устанавливается черный цвет.
body {background:black}
Как видите, в стилевой таблице тег HTML не заключается в угловые скобки (как это происходит обычно при добавлении его в HTML документ), а описание окружают фигурные скобки. В описании может содержаться более одного свойства. Так, в следующем примере цвет текста для данной страницы устанавливается белым. Обратите внимание, что в описании одно свойство от другого отделяется точкой с запятой.
body {background:black; color:white}
Или, можно так:
body {
background:black;
color:white
}
Если необходимо применить одни и те же правила сразу к нескольким тегам HTML, можете сделать это одновременно, как показано ниже.
body, td, hi {
background:black;
color:white }
Определение классов
Как известно, правила существуют для того, чтобы их нарушать. Что, если вы не хотите, чтобы все добавляемые в документе заголовки первого уровня, задаваемого с помощью тега <h1>, отображались белым цветом на черном фоне? Может необходимо, чтобы каждый второй заголовок этого уровня отображался синим цветом на белом фоне? Что ж, справиться с данной задачей можно с помощью атрибута class. Этот атрибут можно задавать практически для любого HTML тега, и результат такого действия сравним с созданием собственных тегов.
Например, нужно сделать, чтобы одна таблица была с голубым фоном и выравниванием по левому краю, а другая таблица — с желтым фоном и выравниванием по центру. Тогда в теге <style> в шапке документа прописываются сразу два стиля. За именем HTML тега table следует точка (.) и далее имя класса (nav или rest).
<style type=text/css>
table.nav {background:aqua}
table.rest {background:yellow; text-align:center; color:black}
</style>
При добавлении таблицы в теле документа необходимо задать значение атрибута class, чтобы сообщить браузеру, какие стилевые свойства должны быть к этой таблице применены. Коды добавления на веб-страницу обеих таблиц приведены ниже. Обратите внимание, что названия классов указываются в кавычках, подобно значениям любых других атрибутов (например, как значения используемого здесь же атрибута width).
<table class="nav" width="100%">
<table class="rest" width=50%>
Применение стилей
Прежде чем двигаться далее, вкратце рассмотрим процедуру применения стилевых свойств к элементам HTML документов. Как вы уже знаете, существуют три метода добавления стилевых таблиц: внутренние, глобальные и внешние стили. Остановимся на каждом из них в отдельности.
Глобальные стили
Все стили данного типа определяются в верхней части HTML документа внутри тега <head>, поскольку они содержат описания, применяемые ко всей странице. Действие определяемых таким способом стилей ограничивается пределами текущего документа. Если необходимо использовать эти же стили в каком-то другом HTML документе, вам придется непосредственно добавить их определения в этот документ. Ter <style> почти всегда включает в себя атрибут text=и text/css. Запомните это и не забывайте его добавлять.
<head>
<style type="text/css">
table.nav {background:aqua}
table.rest {background:yellow; text-align:center; color:black}
a:link {color:red; text-decoration:none}
</style>
</head>
Внешние стили
При использовании внешних стилевых таблиц все описания стилей содержатся в отдельном файле. Этот файл подключается ко всем HTML документам, где заданные в нем стилевые свойства должны использоваться.
<head>
<link rel="stylesheet" href="mystyles.сss" type="text/сss">
</head>
В данном примере был создан отдельный файл для каскадных стилевых таблиц, содержащий описания всех стилевых свойств. Для него было задано имя mystyles.сss. Обратите внимание, что здесь также присутствует атрибут type=»text/сss». Далее приведено содержание файла mystyles.сss. Как видите, здесь описаны те же самые стили, что и в предыдущем примере с глобальными стилевыми таблицами, однако в данном случае они вынесены в отдельный текстовый файл.
table.nav {background:aqua}
table.rest {background:yellow; text-align:center; color:black}
a:link {color:red; text-decoration:none}
Внутренние стили
При использовании данного метода стилевые свойства применяются к тем тегам HTML, внутри которых они определяются. Например, если вы хотите с помощью этого метода применить один и тот же стиль оформления ко всем заголовкам первого уровня, необходимо набрать их описание внутри всех тегов <h1> данного документа. Рассмотрим это на следующем примере. В данном случае используются те же стилевые свойства, что и в предыдущих примерах, однако теперь каждый стиль описывается внутри тега своей таблицы.
<table style="background:aqua" width="100%">
<table style="background:yellow; text-align:center; color:black" width=50%>
При использовании метода внутритекстового определения стилей тег <style> превращается в атрибут style. Разные стилевые свойства по-прежнему отделяются друг от друга точкой с запятой, однако вся группа свойств, относящихся к какому-то конкретному тегу, описывается внутри него. Этот метод удобен в тех случаях, когда требуется применить какие-то специальные стили оформления к одному-двум элементам веб-страницы, однако вы вряд ли захотите его использовать для добавления множества стилей по всему документу.
Каскадный приоритет
Прежде чем двигаться дальше, необходимо прояснить еще один момент. Для браузера стили этих трех типов не эквивалентны друг другу. Браузер устанавливает более высокий приоритет для стиля, который является ближайшим к конкретному тегу. Таким образом, внутренний стиль (определяемый как атрибут внутри самого тега) всегда имеет наивысший приоритет. Следующими применяются глобальные стили (определяемые в верхней части HTML документа); и, наконец, внешние стили (вообще задаваемые в отдельном файле) применяются в последнюю очередь.
Форматирование текста с помощью стилей
Текст является наиболее важным компонентом любой веб-страницы. Если на веб-странице вообще не будет никакой текстовой информации, посетители вряд ли смогут извлечь из нее какую-либо пользу. Текст в HTML документы добавляется с помощью тегов <body>, <р>, <td>, <tr>, <th>, <h1>…<h6>, <li> и др. Для текста каждого из этих тегов можно задавать собственные параметры форматирования, используя стилевые свойства, перечисленные ниже.
Если вы сами или посетители веб-страницы не измените заданных по умолчанию настроек браузера, обычный текст HTML документа будет воспроизводиться шрифтом Times New Roman размером 12 пунктов.
background — Задает фоновый цвет текста
color — Задает цвет самого текста
font-family — Задает шрифт
font-size — Указывает размер шрифта
font-style — Определяет стиль начертания текста; может принимать значения normal (по умолчанию) или italic
font-weight — Принимает значения от extra-light до extra-bold
text-align — Определяет способ выравнивания текста; может принимать значения left, right, center или justify
text-indent — Задает отступ текста; величина отступа может быть задана как фиксированное значение или в процентном выражении
text-decoration — Принимает значения underline, overline, strikethrough и none
Стили оформления ссылок
Наверное, вы уже привыкли к тому, что на веб-страницах ссылки обычно оформляются как подчеркнутый текст синего цвета. Далее перечислены предусмотренные для стилевых таблиц селекторы, позволяющие изменить внешний вид ссылок.
а:link — Задает стиль оформления еще не использованных ссылок
a:visited — Задает стиль оформления уже использованных ссылок
а:active — Задает стиль оформления активных в данный момент ссылок
a:hover — Задает стиль оформления ссылки, на которую наведен указатель мыши
Для ссылок, добавляемых на веб-страницы можно использовать следующие стилевые свойства: background-соlor (цвет фона для ссылки), color, font-family, text-decoration. В последнее время один из наиболее популярных эффектов стилевых таблиц состоит в удалении для ссылок линии подчеркивания. Чтобы сделать это, просто добавьте декларацию text-decoration:none к стилям а, как показано на примере следующего кода.
a:link {color:red; text-decoration:none}
Если вы хотите видеть свои ссылки подчеркнутыми, никаких специальных действий выполнять не нужно. Подчеркивание и так по умолчанию задано для всех стилей а.
По материалам книги Дидре Хейз «Освой самостоятельно HTML«.
Комментариев 2 комментария
@Жанна:
Я лично ничего страшного не вижу в использовании картинок, иногда они даже надежнее. Не думаю, что это дурной тон. Возможно они просто менее маневренны для использования всяких динамических эффектов и новомодных примочек ))
Ответить
Если что-то невозможно задать стилем, то это надо делать картинкой? Делают ли картинками меню, например? Или это дурной тон?