Работа с каскадными таблицами стилей
Пример 4. Встраивание стиля непосредственно в HTML-тэг
Создайте новый HTML-документ. В контейнер <body> вставьте следующий код ():
<body> <h1 style="color:Fuchsia;font-family:Arial Cyr; font-size:18pt">Онегин, добрый мой приятель, <br/> Родился на брегах Невы.</h1> <h2 style="color:Red; font-family: Calibri; font-size:14pt">Где может родились и вы, <br/> Или блистали, мой читатель.</h2> <h3>/А.С. Пушкин/</h3> </body>
Результат:
В вышеприведенных примерах стили применялись к отдельным тэгам. Однако можно применять единые правила оформления и для разных тэгов. В следующем примере мы применим одинаковый шрифт и цвет для тэгов разного размера.
Пример 5. Применение общих правил оформления к разным тэгам
Создайте новую HTML-страницу со следующим кодом ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Применение общих правил оформления к разным тэгам</title>
<style type="text/css">
h3,h4,h5,h6 {font-family:Comic Sans MS;color:Red}
</style>
</head>
<body>
<h3>Над кем глумятся, тот уж не смеется,
<br/>Кто платит подать, тот и разорен,
<br/>Кто жертвует - с рубашкой расстается,</h3>
<h4>Ссудил на грош, потребует мильон.
<br/>Кто слово дал, держись: оно - закон,
<br/>Кто ходит в церковь, тот и к Богу вхож,</h4>
<h5>Подует ветер - меркнет небосклон,
<br/>Но Рождество наступит, если ждешь.</h5>
<h6>/Франсуа Вийон/</h6>
</body>
</html>Результат:
Вместе с тем, можно применять правила форматирования к отдельно взятым тэгам. Для этого используется атрибут id. В следующем примере мы покажем, как можно покрасить в разный цвет текст в одном и том же тэге.
Пример 6. Применение правила форматирования по атрибуту id
Создайте новый HTML-документ и введите в него следующий код ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Применение правила форматирования по атрибуту id</title>
<style type="text/css">
#code_1 {color:Blue;font-family:Comic Sans MS}
h3{color:Red; font-family:Verdana}
</style>
</head>
<body>
<h3 id="code_1">Без труда не выловишь и рыбку из пруда</h3>
<h3>Что посеешь, то и пожнешь</h3>
</body>
</html>Результат:
Из одного и того же элемента можно назначить несколько разновидностей стилей, называемых классами. Класс применяется к тем элементам, у которых значение атрибута class является имя этого класса [1].
Пример 7. Использование классов в CSS
Создайте новый HTML-документ и введите в него следующий код ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Использование классов в CSS</title>
<style type="text/css">
p.a {font-family: Tahoma; text-align: center; font-size:12pt}
p.b {font-family:Comic Sans MS; text-align:justify; font-size:14pt}
</style>
</head>
<body>
<p class="a">ВИЙ?Н (Villon) Франсуа (наст. имя и фамилия Франсуа де Монкорбье, Montcorbier)
(1431, Париж - после 1463), выдающийся французский поэт позднего Средневековья.</p>
<p class="b">О Франсуа Вийоне известно очень немного. Его отец умер, когда он был ребенком,
и мальчика усыновил родственник Гийом де Вийон, капеллан церкви Святого Бенедикта.</p>
</body>
</html>Результат:
Краткие итоги
Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS. CSS можно связывать с документом несколькими способами: непосредственно размещая правила форматирования в (X)HTML-коде, с помощью директив импорта и ссылок на внешние файлы с расширением .css, или применяя правила внутри тэгов. Одни и те же правила оформления можно применять к разным тэгам, возможно и обратное - применение разных правил к одному тэгу.
Набор для практики
Вопросы:
- Какими способами можно связывать web-страницы с каскадными таблицами стилей?
- Что такое атрибут id?
- Что такое класс?
Упражнения:
- Создайте небольшой сайт туристического агентства. Разработайте фирменный стиль заголовка и подвала (нижней части) web-страницы и сохраните его во внешнем файле с расширением .css. Примените стиль на всех страницах сайта с помощью директивы импорта.
- Создайте небольшой сайт, посвященный охране диких животных. Разработайте для него CSS, форматирующую фон, заголовки и абзацы. Используйте в работе атрибуты id и классы.