Веб-инструмент
Веб-мастерская
Каскадные таблицы стилей (CSS — Cascading Style Sheets) позволяют существенно расширить возможности языка HTML за счет гибкого управления форматированием веб-страницы.
Для примера возьмем параметр size тега <font>:
<font size = "3">Текст</font>
В языке HTML размер шрифта указывается в условных единицах от 1 до 7. Размер, используемый веб-браузером по умолчанию, принято приравнивать к 3. А какой размер шрифта в пунктах используется по умолчанию? В разных веб-браузерах по-разному. Это означает, что наша веб-страница также будет выглядеть по-разному.
С помощью CSS можно точно задать размер шрифта в пунктах. Делается это с помощью параметра style:
<font style = "font-size: 12pt">Текст</font>
Применение стилей позволяет задавать точный характеристики практически всех элементов веб-страницы, а это значит, что можно точно контролировать внешний вид веб-страницы в окне веб-браузера.
Прежде чем приступить к изучению CSS, разберемся с основными понятиями.
Значение параметра style (font-size: 12pt) называется определением стиля или стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый атрибут имеет значение (12pt), указываемое после двоеточия. Совокупность определений стилей, вынесенных в заголовок HTML-документа или в отдельный файл, называется таблицей стилей.
Задать стиль можно тремя способами: встроить определение стиля в тег, встроить определения стилей в заголовок HTML-документа или вынести таблицу стилей в отдельный файл.
Определение стиля встраивается в любой тег с помощью параметра style. Обратите внимание, параметр style имеет все теги:
<font style="font-size:12px">Текст</font>
Если определение стилей состоит из нескольких атрибутов, то они указываются через точку с запятой:
<font style="font-size:12px; color: red">Текст</font>
Если какое-либо значение атрибута требует наличие кавычек, то оно указывается в апострофах:
<font style="font-size:12px; color: red; font-family:'Arial'">Текст</font>
Все определения стилей можно собрать в одном месте. В этом случае стили указываются между тегами <style> и </style>. Сам тег <style> должен быть расположен в разделе HEAD HTML-документа. А в теге, к которому нужно применять стиль, указывается имя стиля с помощью параметра class.
Пример использования стилей
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования стилей</title>
<style>
.text1{font-size:12px; color:red; font-family:Arial}
font {font-size:12px; color:green; font-family:Arial}
font.text2 {font-size:12px; color:blue; font-family:Arial}
h1, h2 { font-family:serif; color: red}
</style>
</head>
<body>
<h1>Пример использования стилей</h1><!--Красный цвет -->
<font class="text1">Текст1</font><br><!--Красный цвет -->
<font>Текст2</font><br><!--Зеленый цвет -->
<font class="text2">Текст3</font><br><!--Синий цвет -->
<p class="text2">Текст4</p><br><!--Цвет по умолчанию -->
<p class="text1">Текст5</p><!--Красный цвет -->
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Атрибуты определения стиля, указанные между тегами <style> и </style>, заключаются в фигурный скобки. Если атрибутов несколько, то они перечисляются через точку с запятой:
{font-size :12px; color: red; font-family: Arial}
Стилевой класс можно привязать к любому тегу. Для этого имя тега указывается перед определением стиля. В этом случае все одноименный теги в документе будут иметь этот стиль, если для них не определен другой стиль с помощью параметра class:
font {font-size:12px; color: green; font-family: Arial}
. . .
<font>Текст2</font><br><!--Зеленый цвет -->
Стилевой класс также можно привязать сразу к нескольким тегам. В этом случае они указываются через запятую:
h1, h2 { font-family:serif; color: red}
Стилевой класс, привязанный к тегу, также может иметь имя. Имя указывается после имени тега, через точку. В этом случае имя класса в теге указывается с помощью параметра class:
font .text2 {font-size:12px; color:blue; font-family:Arial}
. . .
<font class="text2">Текст3</font><br><!--Синий цвет -->
Обратите внимание, что если имя класса указать в другом теге, то он будет определен:
<p class="text2">Текст4</p><br><!--Цвет по умолчанию -->
В данном случае фрагмент текста "Текст4" не будет отображен синим цветом, так как имя класса text2 применяется только к тегу <font>.
Можно задать стиль, не привязанный ни к какому тегу. В этом случае перед именем стиля указывается точка:
.text1 {font-size:12px; color: red; font-family: Arial}
. . .
<font class="text1">Текст1</font><br><!--Красный цвет -->
<p class="text1">Текст5</p><!--Красный цвет -->
"Текст1" и "Текст5" будут красного цвета, хотя они находятся в разных тегах.
Таблицу стилей можно вынести в отдельный файл. Файл с таблицей стилей обычноимеет расширение css и может редактироваться любым текстовым редактором, например, Блокнотом. Задать расширение файлу можно точно также, как и при создании файла с расширением html.
Вынесем таблицу стилей в отдельный файл test.css и подключим его к основному документу, например 111.html.
Файл test.css
/*Таблица стилей test.css*/
.text1{font-size:12px; color: red; font-family:Arial}
font {font-size:12px; color:green; font-family:Arial}
font.text2 {font-size:12px; color:blue; font-family:Arial}
h1, h2 { font-family:serif; color: red}
Содержание файла 111.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования стилей</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Пример использования стилей</h1><!--Красный цвет -->
<font class="text1">Текст1</font><br><!--Красный цвет -->
<font>Текст2</font><br><!--Зеленый цвет -->
<font class="text2">Текст3</font><br><!--Синий цвет -->
<p class="text2">Текст4</p><br><!--Цвет по умолчанию -->
<p class="text1">Текст5</p><!--Красный цвет -->
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Сохраним оба файла в одной папке и откроем файл 111.html в веб-браузере. Результат будет таким же, как и в предыдущем примере.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега <link>. В параметре href указывается абсолютный или относительный URL-адрес файла, а в параметре rel должно быть значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей:
<link href="test.css" rel="stylesheet" type="text/css">
Таблицу стилей, вынесенную в отдельный файл, можно использовать в нескольких HTML-документах.
Предположим, что для абзаца определен атрибут color в параметре style одного цвета, в теге <style> другого цвета,а в отдельном файле — третьего цвета. Кроме того, в параметре color тега <font> задан четвертый цвет.
Для примера создадим еще одну таблицу стилей файл test1.css:
/*Таблица стилей test1.css*/
p{color:blue}
h1, h2 { font-family:serif; color: red}
Содержимое файла 112.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования стилей</title>
<link href="test1.css" rel="stylesheet" type="text/css">
<style>
p{color: red}
</style>
</head>
<body>
<h1>Пример использования стилей</h1><!--Красный цвет -->
<p style="color:green"><font color="yellow">Текст1</font></p><!--Желтый цвет -->
<p style="color:green">Текст2</p><!--Зеленый цвет -->
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Какого цвета будет абзац со словом "Текст1"? И какого цвета будет абзац со словом "Текст2"? Для ответа на эти вопросыи существует приоритет стилей:
Именно из-за такой структуры приоритетов таблицы стилей называют каскадными.
Иными словами, наименьший приоритет имеет стиль, описанный в отдельном файле, а самый высокий —стиль, указанный последним. В нашем примере к абзацу со словом "Текст1" будет применено форматирование, указанное параметром color тега <font>, т.е.абзац будет желтого цвета. А абзац со словом "Текст2" будет иметь цвет, указанный в параметре style, т.е. зеленый.
Похожие материалы по теме: Работа с каскадными таблицами стилей
Обсудить на форуме