Поделиться
127. CSS – каскадные таблицы стилей.ppt
CSS – каскадные таблицы стилей
Cascading Style Sheets
Назначение CSS
Позволяют разделить оформление html-документа и его содержание
Разделение оформления и содержания значительно облегчает разработку крупных web-узлов
Стили более низкого уровня могут переопределять стили более высокого уровня (каскадность)
2
Логическое форматирование
С помощью CSS выполняется логическое форматирование html-документа, позволяющее разделить содержание и оформление html-документа
Использование CSS рекомендовано к применению WWW-консорциумом
3
Логическое форматирование
Преимущества
Расширенные возможности поиска информации
Более точное структурирование и анализ информации поисковыми машинами
Существенное уменьшение html-документов и, следовательно, времени их загрузки
4
5
6
7
8
9
10
11
12
13
Назначение CSS
Фирма «Живые цветы»
Каталог
Цены
Доставка
14
Назначение CSS
Фирма «Живые цветы»
Каталог
Цены
Доставка
Заголовок: зеленый, жирный
Фон: светло-желтый
Стили
15
Назначение CSS
Фирма «Живые цветы»
Каталог
Цены
Доставка
Заголовок: синий, курсив
Фон: светло-серый
Стили
16
Назначение CSS
Фирма «Живые цветы»
Наша фирма…
Каталог
В каталоге нашей фирмы представлены…
Цены
Цены нашей фирмы невысоки…
Доставка
Цветы будут доставлены Вам…
Заголовок: синий, курсив
Фон: светло-серый
Стили
17
Файл
Файл, содержащий CSS *.css
Может быть создан любым текстовым редактором
18
Формат
tagname {prop1:value1; prop2:value 2; … propN:value N}
h1 {font-size:30px; color:red}
P {color:navy; font-style:italic}
19
Способы реализации
Связанные таблицы стилей стили определяются в отдельном файле, который затем может быть подключен к нескольким html-документам
Область действия – несколько html-документов
20
Способы реализации
21
Способы реализации
Внедренные таблицы стилей создаются с помощью тега
23
Способы реализации
Встроенные таблицы стилей стили определяются непосредственно в теге с помощью атрибута style
Область действия – тег
24
Способы реализации
25
Каскад стилей
Связанные – несколько html-документов
Внедренные – один html-документ
Встроенные – один тег
26
Стили для части html-документа
… Строка вне раздела
27
Классы
Класс позволяет создать "чистый" стиль, не привязанный к какому-либо конкретному тегу
28
Классы
.classname { prop1:value1; prop2:value 2; … propN:value N }
29
Классы
30
Классы
Текст
Текст
31
Классы
32
Классы
Вопрос 1
Ответ 1
Вопрос 2
Ответ 2
Вопрос 3
Ответ 3
33
34
Идентификаторы
#id { prop1:value1; prop2:value 2; … propN:value N }
35
Идентификаторы
36
Семейства шрифтов
Serif – шрифты с засечками
Sans Serif – шрифты без засечек
Cursive – "рукописные" шрифты
Fantasy – декоративные шрифты
Monospace – моноширинные шрифты
37
Семейства шрифтов
div {font-size:60px;} .serif {font-family:serif;} .sans_serif {font-family:sans-serif;} .cursive {font-family:cursive;} .fantasy {font-family:fantasy;} .monospace {font-family:monospace;}
38
Семейства шрифтов
39
Семейства шрифтов
40
Группы стилей
h1, h2, h3 {font-size:15px; color:red; }
41
Контекстные стили
u {color:navy;} b {color:tomato;} u b {color:green;}
Первая строка Вторая строка Третья строка Четвертая строка
42
Псевдоклассы
Псевдоклассы позволяют задавать стиль элемента по его характеристикам, которые не являются именем, атрибутом или содержимым
43
Псевдоклассы
A:link – непосещенные ссылки
A:visited – посещенные ссылки
A:hover – выбранная ссылка
A:active – активизированная ссылка
44
Псевдоклассы
a:link {color:black; font-size:50px; text-decoration: underline;} a:visited {color:gray; font-size:50px; text-decoration: none;} a:hover {color:red; font-size:60px; font-weight:bold; text-decoration: overline;} a:active {color:green; font-size:50px; text-decoration: line-through;}
45
Списки
46
Блочные элементы страниц
Блочные элементы – элементы, которые отображаются на странице в виде прямоугольников
,
