Основы CSS. Основные понятия

Основные понятия

Каскадные таблицы стилей (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>

Встраивание определения стилей в заголовок HTML-документа

Все определения стилей можно собрать в одном месте. В этом случае стили указываются между тегами <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>

В окне веб-браузера это будет выглядеть ТАК.

Сохраним оба файла в одной папке и откроем файл 111.html в веб-браузере. Результат будет таким же, как и в предыдущем примере.

Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега <link>. В параметре href указывается абсолютный или относительный URL-адрес файла, а в параметре rel должно быть значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей:

Таблицу стилей, вынесенную в отдельный файл, можно использовать в нескольких 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"? Для ответа на эти вопросыи существует приоритет стилей:

стиль, заданный стилей, будет отменен, если в HTML-коде описано форматирование блока;
стиль, заданный в теге <style>, будет отменен, если в параметре style тега указан другой стиль;
стиль, заданный в отдельном файле, будет отменен, если в теге <style> указано другое определение стиля.

Именно из-за такой структуры приоритетов таблицы стилей называют каскадными.

Иными словами, наименьший приоритет имеет стиль, описанный в отдельном файле, а самый высокий —стиль, указанный последним. В нашем примере к абзацу со словом "Текст1" будет применено форматирование, указанное параметром color тега <font>, т.е.абзац будет желтого цвета. А абзац со словом "Текст2" будет иметь цвет, указанный в параметре style, т.е. зеленый.

Обсудить на форуме