**CSS** (Cascading Style Sheets) - каскадные таблицы стилей. ## Стилевые файлы Пример возможных стилевых файлов: - `main.css` - для компьютеров - `mob.css` - для смартфонов - `printer.css` - для печати Пример стилевого файла - `test.css`: ```css body { color: white; background: #FF6600; } ``` - `body` - название тега - `color` - свойство (цвет символов) - `white` - значение (белый) - `background` - свойство (цвет фона) - `##FF6600` - значение (`R` = `FF` = 255, `G` = `66` = 102, `B` = `00` = 0) #### Подключение стилевого файла ``, где `stylesheet` - таблица стилей, `text/css` - тип данных MIME (Multipurpose Internet Mail Extension) Подключение стилевого файла в HTML-коде: ```html Страница с файлом стилей    Привет, Вася! ``` Стилевой файл `test.css`: ```css body { color: white; background: #0000E0; } ``` Результат (синий фон, белый текст): ![Подключение стилевого файла](../Pictures/07_01.%20Подключение%20стилевого%20файла.png) ## Стили для элементов ### Шрифты ```css p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } ``` - `p` - для всех абзацев - `font-family` - семейство шрифтов: - `serif` - с засечками - `sans-serif` - без засечек - `monospace` - моноширинный - `font-size` - размер в пикселях - `font-style`: - `normal` - обычный - `italic` - курсив - `font-weight`: - `normal` - обычный - `bold` - жирный #### Размеры, выравнивание ```css p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ``` - `background` - цвет фона - `width` - ширина - `height` - высота - `test-align` - выравнивание: - `left` - по левому краю - `center` - по центру - `right` - по правому краю - `justify` - по ширине - `text-indent` - абзацный отступ Результат: ![Размеры, выравнивание текста](../Pictures/07_02.%20Размеры,%20выравнивание%20текста.png) #### Рамка, поля, отступы ```css p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } ``` - `border` - рамка: - `1px` - толщина - Вид линии: - `solid` - сплошная - `dashed` - штриховая - `dotted` - точечная - `green` - цвет - `margin` - отступы снаружи: - `0` - сверху - `40px` - справа - `20px` - снизу - `40px` - слева - padding - отступы внутри: - `5px` - со всех сторон ![Параметры для рамки, полей и отступов](../Pictures/07_03.%20Параметры%20для%20рамки,%20полей%20и%20отступов.png) Результат: ![Рамка, поля, отступы текста](../Pictures/07_04.%20Рамка,%20поля,%20отступы%20текста.png) ### Таблицы #### Выравнивание Без CSS: - всей таблицы - ``: - `left` - по левому краю - `center` - по центру - `right` - по правому краю ```html
...
``` - информации в ячейках - ``, где значения `align` - аналогично выравниванию всей таблицы, а значения `valign`: - `top` - по верхней границе - `middle` - по центру - `bottom` - по нижней границе ```html
по центру, по верхней границе по правой границе, по середине
``` Результат: ![Выравнивание таблицы без CSS](../Pictures/07_05.%20Выравнивание%20таблицы%20без%20CSS.png) Через CSS: HTML-код: ```html
По центру, по верхней границе По правой границе, по середине
``` CSS-файл: ```css table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } ``` где: - `text-align`: - `left` - по левому краю - `center` - по центру - `right` - по правому краю - `vertical-align:` - `top` - по верхней границе - `middle` - по центру - `bottom` - по нижней границе Результат: ![Выравнивание таблицы через CSS](../Pictures/07_06.%20Выравнивание%20таблицы%20через%20CSS.png) #### Фон и цвет текста HTML-код: ```html
Привет!
Таблица из двух строк и двух столбцов
``` CSS-файл: ```css table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } ``` В первых 3 случаях в качестве фона используется цвет, а в четвертом - рисунок. Результат: ![Фон и цвет текста таблицы](../Pictures/07_07.%20Фон%20и%20цвет%20текста%20таблицы.png) #### Отступы Без CSS: - `cellspacing` - интервал между ячейками - `cellpadding` - отступ внутри ячеек ```html
1 2
``` ![Отступы таблицы без CSS](../Pictures/07_08%20Отступы%20таблицы%20без%20CSS.png) Через CSS: - `id` - идентификатор (уникальное имя) HTML-код: ```html
1 2
``` CSS-файл: ```css table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } ``` ![Отступы таблицы через CSS](../Pictures/07_09.%20Отступы%20таблицы%20через%20CSS.png) ### Гиперссылки - Все гиперссылки: ```css a { color: green; text-decoration: none; } ``` - `color` - цвет - `text-decoration: none` - убрать подчеркивание ![Стиль гиперссылки](../Pictures/07_10.%20Стиль%20гиперссылки.png) - Посещенные гиперссылки: ```css a:visited { color: #0000AA; } ``` - `visited` - псевдокласс - `color` - цвет ![Стиль посещенной гиперссылки](../Pictures/07_11.%20Стиль%20посещенной%20гиперссылки.png) - Гиперссылки при наведении мыши: ```css a:hover { color: red; text-decoration: underline; } ``` - `hover` - псевдокласс - `color` - цвет - `text-decoration: underline` - подчеркивание ![Стиль гиперссылки при наведении мыши](../Pictures/07_12.%20Стиль%20гиперссылки%20при%20наведении%20мыши.png) ## Классы HTML-код: ```html

Ошибка!Что-то с памятью.

``` CSS-файл: ```css p.error { background:red; } p { background:blue; color:white; } ``` `p.error` - для абзацев класса `error`. Результат: ![Абзац класса error](../Pictures/07_13.%20Абзац%20класса%20error.png) Более конкретное указание отменяет более общее. `` - элемент в тексте. HTML-код: ```html

Ошибка!Что-то с памятью.

``` CSS-файл: ```css .error { background:red; color:white; } ``` `.error` - для всех элементов класса `error`. Результат: ![Элемент класса error](../Pictures/07_14.%20Элемент%20класса%20error.png) ## Фоновый рисунок HTML-файл: ```html

Привет, Вася!

``` CSS-файл (с повторением): ```css p.hallo { background: white url(images/grad.jpg); } ``` ![Фоновый рисунок с повторением](../Pictures/07_15.%20Фоновый%20рисунок%20с%20повторением.png) CSS-файл (только с вертикальным повторением): ```css p.hallo { background: url(grad.jpg) repeat-y; } ``` ![Фоновый рисунок с вертикальным повторением](../Pictures/07_16.%20Фоновый%20рисунок%20с%20вертикальным%20повторением.png) HTML-файл: ```html

qq@mail.ru

``` CSS-файл (без повторения): ```css p.email { background: url(letter.gif) no-repeat; padding-left: 20px; } ``` ![Фоновый рисунок без повторения](../Pictures/07_17.%20Фоновый%20рисунок%20без%20повторения.png) ## Составные селекторы #### Общие свойства для нескольких тегов ```css code, pre { font-weight: bold; font-family: Courier New, monospace; } ``` #### Вложенные элементы `a` внутри `em`: ```css em a { font-style: normal; } ``` ## Сложные селекторы - Ссылки внутри абзаца класса `email`: ```css p.email a { color: green; text-decoration:none; } ``` - `color` - цвет - `text-decoration:none` - убрать подчеркивание - Посещенные ссылки: ```css p.email a:visited { color: #F0F; } ``` - `color` - цвет: - `#F0F` - то же, что `#FF00FF` - Мышь над ссылкой: ```css p.email a:hover { color: #00F; text-decoration:underline; } ``` - `color` - цвет - `text-decoration:underline` - подчеркнуть