Работа с каскадными таблицами стилей Богданов Марат Робертович Современные веб-технологии. Подробный курс Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или 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