Работа с каскадными таблицами стилей Богданов Марат Робертович Современные веб-технологии. Подробный курс
advertisement
Работа с каскадными таблицами стилей
Богданов Марат Робертович
Современные веб-технологии. Подробный курс
Каскадные таблицы стилей делают возможным разделение
кода и представления. Это облегчает объединение усилий
кодировщиков и дизайнеров в рамках одного проекта.
Дизайнеры формируют концепцию внешнего оформления
сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS.
2
CSS можно связывать с документом несколькими способами:
непосредственно размещая правила форматирования в
(X)HTML-коде, с помощью директив импорта и ссылок на
внешние файлы с расширением .css, или применяя правила
внутри тэгов. Одни и те же правила оформления можно
применять к разным тэгам, возможно и обратное –
применение разных правил к одному тэгу.
3
Пример 1. Внедрение CSS в HTML-код
<title>Внедрение CSS в HTML-код</title>
<style type="text/css">
h2 {font-family: Comic Sans MS; font-size: 16pt; color:Purple}
h3 {font-family: Verdana; font-size: 12pt; color: Olive}
</style>
</head>
<body>
<h2>Кто просвящен и ремеслу обучен,</h2>
<h2>Тот славен, горд,</h2>
<h2>В компании нескучен.</h2>
<h2>Источник мудрости ему доступен…</h2>
<br />
<h3>/Мифтахетдин Акмулла/</h3>
</body>
4
Пример 2. Связывание каскадной таблицы стилей с помощью
директивы @import
StyleSheet1.css
body { background-color:Silver}
h2 { font-family:Comic Sans MS; font-size:24pt; color:Maroon}
h3{font-family: Verdana; font-size:18pt; color: Teal}
<style type="text/css">
@import url("StyleSheet1.css");
</style>
</head>
<body>
<h2>"Ад и рай - в небесах", - утверждают ханжи.</h2>
<h2>Я, в себя заглянув, убедился во лжи:</h2>
<h2>Ад и рай - не круги во дворе мирозданья,</h2>
<h2>Ад и рай - это две половины души.</h2>
<br />
<h3>/Омар Хайам/</h3>
</body>
5
Пример. 3. Связывание каскадной таблицы стилей с webстраницей с помощью ссылки
StyleSheet2.css
body { background-color: Transparent}
h3 { font-family: Calibri; font-size:16pt; color: Navy}
h4{font-family: Courier New CYR; font-size:14pt; color: Orange}
<title>Связывание каскадной таблицы стилей с web-страницей с помощью
ссылки</title>
<link rel="Stylesheet" type="text/css" href="StyleSheet2.css"/>
</head>
<body>
<h3>"Надо жить, - нам внушают, - в постах и в труде!"</h3>
<h3>"Как живете вы - так и воскреснете-де!"</h3>
<h3>Я с подругой и чашей вина неразлучен, </h3>
<h3>Чтобы так и проснуться на страшном суде.</h3>
<br />
<h4>/Омар Хайам/</h4>
</body>
6
Пример 4. Встраивание стиля непосредственно в HTML-тэг
<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>
7
Пример 5. Применение общих правил оформления к разным
тэгам
<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>
8
Пример 6. Применение правила форматирования по атрибуту id
<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>
9
Пример 7. Использование классов в CSS
<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>
10
