1 Cascading Style Sheets каскадные таблицы стилей 2. - презентация

1 1

2 Cascading Style Sheets каскадные таблицы стилей 2

3 Отрывок html-кода Уроки css Очень важно, нужно …………. ____________________________________ Ни слова об оформлении 3

4 1. Переопределение стиля для определенного тега 2. Определение стиля для тегов на конкретной странице 3. Импорт из файла стилей. 4

5 Внутренние стили Пример 5

6 css p { font-family: Arial, Helvetica, sans-serif; /* Семейство шрифта */ color: grey; /* Цвет текста */ } Текст……………………………………………………… 6

7 Стили Текст………………………… 7

8 body { background-color: #fff; width: 100%; } p,ul,ol /* Paragraph Style */ { text-align: left; } 8

9 Код легче поддерживать Быстрее загружается страница Единообразный дизайн Код легче поддерживать Доступность стилевых таблиц других авторов 9

10 Все элементы web-страниц автоматически наследуют свойства. 10

11 /* оформление заголовка: */ h1 { color: red; background-color: yellow; font: Tahoma; } /* оформляем абзацы текста: */ p { color: grey; line-height: 150%; } 11

12 p {}: селектор элемента соответствует всем элементам с указанным названием 12

13 .example{}: селектор класса соответствует всем элементам, которые имеют атрибут class с указанным значением Пример.news { font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal; font-weight: normal; } 13

14 h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } 14 h1, h2, p { text- align: center; color: red; }

15 1 Параграфу присвоен стиль класса news, 2 Параграфу присвоен стиль класса news2 Списку присвоен стиль класса news 15

16 В порядке увеличь приоритета 1. стили по умолчанию; 2. стили по умолчанию переопределяются стилями, указанными в заголовке LINK ; 3. Стили LINK переопределяются описаниями стилей STYLE; 4. Стили STYLE переопределяются атрибутом STYLE в любом из элементов разметки. 16

17 ЕДИНИЦЫ ИЗМЕРЕНИЯ px Пикселы cm Сантиметры mm Миллиметры Pt Проценты % 17

18 СВОЙСТВА АБЗАЦА text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;}.wrong {text-decoration: line-through;} 18

19 СВОЙСТВА АБЗАЦА text-align Определяет выравнивание параграфа. P {text-align: justify} H1 {text-align: center} 19

20 СВОЙСТВА АБЗАЦА text-indent Устанавливает отступ первой строки текста. P {text-indent: 50pt;} 20

21 СВОЙСТВА АБЗАЦА letter-spacing Расстояние между буквами по горизонтали. P {letter-spacing: 5px;} 21

22 СВОЙСТВА ШРИФТА font-family; font-size; font-weight; font-variant font-style Например, P {font-size: 30pt;} P {font-weight: bold:} P {font-variant: small-caps:} P {font-style: italic:} 22

23 A:active{} Таблица стилей для активных ссылок (при нажатии) A:link{} Таблица стилей для собственно ссылок A:visited{} Таблица стилей для посещённых ссылок A:hover {} Таблица стилей для ссылок при наведении указателя мыши 23

24 background-color ЦветBODY { background-color: #6699FF } background-image URL none BODY { background-image: url (images/bg.gif) } background-repeat repeat repeat-x repeat-y no-repeat BODY { background-image: url (bg.gif) background- repeat: repeat-y } 24

25 25

26 Задания 1. Создать main.css 2. Определить стили для нескольких видов параграфов(3-4) с разными шрифтами(по размеру и начертанию), отступами, расстояниями 3. Определить стили для ссылок, списков, заголовка, фона. 4. Использовать все стили на своих страницах(5-6 страниц). 5. Изменить стиль ссылок по умолчанию(например при наведении ссылка меняет цвет на зеленый) 6. Используя свойство background-image, сделать вертикальную полоску на странице(размножив маленькую картинку) 7. Перенести с любого сайта стиль для любого тега. Написать в комментариях в css-файле, откуда взято оформление. 8. Разместить все страницы на хостинге Задание 2. CSS. Использование готового кода. На сайте найти раздел создания и слайдера на чистом CSS. Вставить свои картинки и написать комментарии в css файле. 26