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

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

Каскадные таблицы стилей (CSS — Cascading Style Sheets) позволяют существенно расширить возможности языка HTML за счет гибкого управления форматированием веб-страницы.

Для примера возьмем параметр size тега <font>:

<font size = "3">Текст

В языке 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 и подключим его к основному документу, например 2.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}

Файл 2.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>

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

Сохраним оба файла в одной папке и откроем файл 2.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

/*Таблица стилей test1.css*/

              p{color:blue}

              h1, h2 { font-family:serif; color: red}

Файл 3.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, т.е. зеленый.

Понравилась статья или раздел сайта - порекомендуйте их друзьям.

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

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться

Вход в Личный кабинет
Ваш логин:	Ваш пароль:

Забыли пароль?

ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы