Выпуск №6. CSS — каскадные таблицы стилей.

Дата публикации: 2009-07-15

css

Здравствуйте, уважаемые подписчики.

С Вами я, Андрей!

В этом выпуске мы поговорим о CSS (каскадных таблицах стилей).

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

И так начнем!

С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.

Таблица стилей — это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит из селектора и определения.

Селектор — это тэг HTML.

Определение — это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:). В конце каждого определения ставится точка с запятой (;).

Пример:

p {color: #FF0000;}

1	p {color: #FF0000;}

Здесь:

P — это селектор.

color: #FF0000; — это определение. Определение всегда заключается в фигурные скобки, после каждого определения ставится точка с запятой.

сolor— это название свойства (в данном случае цвет).

#FF0000 — это значение свойства.

Свойств таблиц стилей очень много, с ними мы познакомимся в последующих выпусках.

А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами:

color— задает цвет текста.

background-color — задает фоновый цвет для элемента.

Итак, рассмотрим каким образом можно встраивать таблицы стилей в документ.

1 Способ:

Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен.

Пример:

<p style="background-color:#003333;">

1	<p style="background-color:#003333;">

Мы изменили фоновый цвет абзаца

2 Способ:

Указать свойство в заголовке документа между тегами <style>….</style>

Пример:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">

p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

</style>
</head>
<body>

<head>

<title>Untitled Document</title>

p {color:# 003333; background-color:#000099;}

h2 {color:#FFFF00; background-color:#000000;}

</style>

</head>

<body>

Эти свойства применяются ко всему документу.

Значит, у нас все абзацы будут иметь сероватый фоновый цвет, и красный цвет шрифта, а все заголовки второго уровня будут на черном фоне с желтым цветом шрифта.

Все остальные теги отобразятся без применения стилей.

Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li{ color:blue;}).

3 Способ:

Способ позволяет использовать одну таблицу для форматирования нескольких документов.

Смысл заключается в том, что все свойства записываются в отдельном файле с расширением CSS, а затем подключаются в HTML документ.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<head>

<title>Untitled Document</title>

</head>

href=»mystyle.css» — путь к файлу CSS.

А содержимое файла строится по тем же правилам (селектор и определение).

Код файла mystyle.css:

p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

1 2	p {color:# 003333; background-color:#000099;} h2 {color:#FFFF00; background-color:#000000;}

4 Способ:

Способ позволяет использовать каскадную таблицу стилей (css), лежащую на каком-нибудь сервере.

Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами <style>….</style> прописать следующее:

@import:url(//www.mysite.ru/style/mystyle.css);

Пример:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">

@import:url(//www.mysite.ru/style/mystyle.css);
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

</style>
</head>

<head>

<title>Untitled Document</title>

@import:url(//www.mysite.ru/style/mystyle.css);

p {color:# 003333; background-color:#000099;}

h2 {color:#FFFF00; background-color:#000000;}

</style>

</head>

Вы заметили, что в 4-ом способе реализовано два способа включения таблицы стилей к документу.

Такое допустимо, но при этом надо учитывать приоритет каждого из способов.

Итак, расположение способов в порядке убывания их приоритетов:

1 Способ;

2 Способ;

4 Способ;

3 Способ;

То есть, если в 3-ем или в 4-ом способе указано p {color: red;}, а во 2-ом или в 1-ом p {color: blue;}, то применится к параграфам свойство p {color: blue;}, потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го.

Пару слов о наследовании и перейдем к классам.

Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого.

Пример:

Текст абзаца <strong> текст абзаца, выделенный жирным</strong> продолжение текста абзаца.

То есть у нас тэг <strong> лежит полностью внутри тега <p>.

И если мы теперь зададим стиль для параграфа, он примениться и к тегу <strong>.

<p style=»color:red;»>

Текст абзаца красными буквами<strong>текст абзаца красными буквами, выделенный жирным</strong> продолжение текста абзаца красными.

Классы.

Классы используются для того, чтобы одному и тому же тегу можно было бы задавать различные правила.

Описываются классы в контейнере <style>….</style>, а применяются к тэгам посредствам параметра CLASS.

Давайте посмотрим на пример:

<style type="text/css">

p.red {color:#FF0000; background-color:#000099;}
p.yellow{color:yellow; background-color:#000000;}

</style>

p.red {color:#FF0000; background-color:#000099;}

p.yellow{color:yellow; background-color:#000000;}

</style>

Описали класс red и yellow для тега <p>

<body>
<p class="red">Параграф класса red с красным цветом шрифта и синим фоном.</p>
<p class="yellow"> Параграф класса yellow с желтым цветом шрифта и черным фоном.</p>
……
</body>

<body>

<p class="red">Параграф класса red с красным цветом шрифта и синим фоном.</p>

<p class="yellow"> Параграф класса yellow с желтым цветом шрифта и черным фоном.</p>

……

</body>

Существуют, также и универсальные классы.

Это классы, которые можно использовать не только для определенного, а для любого тега.

Синтаксис таких классов достаточно прост: сначала идет точка, затем имя класса, и в фигурных скобках определения.

Пример:

<style type="text/css">

.red {color:#FF0000;}

</style>
…
<body>
<h1 class="red"> Текст заголовка 1-го уровня, класса red</h1>
<h2 class="red"> Текст заголовка 2-го уровня, класса red </h2>
<p class="red"> Текст параграфа класса red </p>
…
</body>

.red {color:#FF0000;}

</style>

…

<body>

<h1 class="red"> Текст заголовка 1-го уровня, класса red</h1>

<h2 class="red"> Текст заголовка 2-го уровня, класса red </h2>

<p class="red"> Текст параграфа класса red </p>

…

</body>

Таким образом, мы применили класс red к трем различным тегам.

На этом предлагаю этот выпуск, посвящённый CSS — каскадным таблицам стилей, завершить.

Рекомендую применить стили, например, к нашему второму выпуску со сказками. Сделать там разноцветные абзацы, и заголовки с помощью стилей.

Если возникнут вопросы, задавайте, я объясню подробнее. Если что-то не будет получаться, задавайте вопрос и присылайте листинг кода с тем, что у вас не получилось.

Пишите на E-mail: contact@webformyself.com

Проект webformyself.com — основы самостоятельного сайтостроения

Успехов в учебе!

С Вами был Андрей Бернацкий

Метки: css, каскадные таблицы стилей, классы