CSS – Cascading Style Sheets (Каскадные таблицы стилей) «Создание Web-сайтов» - презентация

1 CSS – Cascading Style Sheets (Каскадные таблицы стилей) «Создание Web-сайтов»

2 Размещение стиля в документе HTML

3 Встроенная информация о стиле Оформление конкретного элемента указывается с помощью атрибута STYLE. Башни Московского Кремля

4 Информация о стиле в заголовке: элемент STYLE Башни Московского Кремля H1 {color: #FF6600; font-size:16pt; text-align:center;} H2 {color: #FF6600; font-size:14pt; text-align:center;}

5 Внешние таблицы стилей BODY {background-color: #FFFF33;} H1 {color: red; text-align: center;} P {color: #999900;} a:link, a:active, a:visited {color: #339933;} gold_key.css

6 Внешние таблицы стилей BODY {background-color: #FFFF33; } H1 {color: red; text-align: center;} P {color: #999900;} a:link, a:active, a:visited {color: #339933;} gold_key.css osn1.htm, osn2.htm, osn3.htm, osn4.htm, osn5.htm

7 Правила в элементе STYLE могут объявляться для: Всех однотипных элементов языка HTML (всех элементов P, всех элементов H1 и т.д.) Всех элементов одного класса (т.е. для атрибута class которых установлено определенное значение). Отдельных элементов (т.е. для атрибута id которых установлено определенное значение).

8 H1 {text-align: center;} Слон H1. red {color: red;} Слон.rght {text-align: right;} Слон # gr {color: grey;} Слон TD P {text-align: center;} Слон H2, P {color: green;} Слон Текст

9 Псевдокласс Anchor Pseudo Class Это элементы гиперссылки: link – гиперссылка; active – активная гиперссылка; visited – посещенная гиперссылка; hover – курсор наведен на гиперссылку. a:link {color: green;}

10 Псевдоэлементы (стандарт CSS2) Возможно особое форматирование первой строки и (или) первого символа в абзаце: first-line – первая строка; first-letter – первая буква (буквица). P:first-line {color: red;}