Богданов Марат Робертович Современные веб-технологии. Подробный курс Работа с каскадными таблицами стилей

Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS. 2

CSS можно связывать с документом несколькими способами: непосредственно размещая правила форматирования в (X)HTML-коде, с помощью директив импорта и ссылок на внешние файлы с расширением.css, или применяя правила внутри тэгов. Одни и те же правила оформления можно применять к разным тэгам, возможно и обратное – применение разных правил к одному тэгу. 3

Пример 1. Внедрение CSS в HTML-код Внедрение CSS в HTML-код h2 {font-family: Comic Sans MS; font-size: 16pt; color:Purple} h3 {font-family: Verdana; font-size: 12pt; color: Olive} Кто просвящен и ремеслу обучен, Тот славен, горд, В компании нескучен. Источник мудрости ему доступен… /Мифтахетдин Акмулла/ 4

Пример 2. Связывание каскадной таблицы стилей с помощью 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: url("StyleSheet1.css"); "Ад и рай - в небесах", - утверждают ханжи. Я, в себя заглянув, убедился во лжи: Ад и рай - не круги во дворе мирозданья, Ад и рай - это две половины души. /Омар Хайам/ 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} Связывание каскадной таблицы стилей с web-страницей с помощью ссылки "Надо жить, - нам внушают, - в постах и в труде!" "Как живете вы - так и воскреснете-де!" Я с подругой и чашей вина неразлучен, Чтобы так и проснуться на страшном суде. /Омар Хайам/ 6

Пример 4. Встраивание стиля непосредственно в HTML-тэг Онегин, добрый мой приятель, Родился на брегах Невы. Где может родились и вы, Или блистали, мой читатель. /А.С. Пушкин/ 7

Пример 5. Применение общих правил оформления к разным тэгам Применение общих правил оформления к разным тэгам h3,h4,h5,h6 {font-family:Comic Sans MS;color:Red} Над кем глумятся, тот уж не смеется, Кто платит подать, тот и разорен, Кто жертвует с рубашкой расстается, Ссудил на грош, потребует мильон. Кто слово дал, держись: оно закон, Кто ходит в церковь, тот и к Богу вхож, Подует ветер меркнет небосклон, Но Рождество наступит, если ждешь. /Франсуа Вийон/ 8

Пример 6. Применение правила форматирования по атрибуту id Применение правила форматирования по атрибуту id #code_1 {color:Blue;font-family:Comic Sans MS} h3{color:Red; font-family:Verdana} Без труда не выловишь и рыбку из пруда Что посеешь, то и пожнешь 9

Пример 7. Использование классов в CSS Использование классов в 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} ВИЙÓН (Villon) Франсуа (наст. имя и фамилия Франсуа де Монкорбье, Montcorbier) (1431, Париж после 1463), выдающийся французский поэт позднего Средневековья. О Франсуа Вийоне известно очень немного. Его отец умер, когда он был ребенком, и мальчика усыновил родственник Гийом де Вийон, капеллан церкви Святого Бенедикта. 10