Таблицы стилей Язык HTML. Каскадные таблицы стилей CSS CSS (от английского Cascading Style Sheets). Таблицы стилей позволяют разделить смысловое содержимое. - презентация

1 Таблицы стилей Язык HTML

2 Каскадные таблицы стилей CSS CSS (от английского Cascading Style Sheets). Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление

3 Подключение стилей Три метода подключения стилей: внешний файл описание в секции заголовка inline-описание

4 Типы описаний Теговые стили (p,h1…) Теговые классы (р.smol,…) Классовые стили (.my, …) Псевдо классы (a:hover…)

5 inline-описание Этот текст переопределён стилем

6 Описание в секции заголовка Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.

7 Пример описания в секции заголовка....

8 Пример использования классов Этот текст написан стилем header Этот текст написан красным цветом Результат: Этот текст написан стилем header Этот текст написан красным цветом

9 Переопределение стандартных тэгов

10 Вынесение описания во внешний файл Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):.header {text-align:center;font-size:27pt;}.red { color : red; } p { text-align : center; font-size : 12pt;}

11 Внедрение в документ

12 Переопределение стилей использование отдельного стилевого файла и вставка его при помощи тэга описание стиля в заголовке документа применение стиля как параметра в тэге. Каскадность заключается в том, что стили могут переопределяться. Приведённый выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.

13 Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определён следующий стиль: И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестаёт быть подчёркнутым

14 Локальное переопределение цвета ссылки Copyright (C) Cherry-Design - определяет некую область, к которой мы можем применить стиль.

15 Синтаксис CSS.small { font-size: 9pt; } – описание класса (универсальный класс, который может быть применён к любому тэгу. Применение: Накладываем стиль на этот текст Накладываем стиль на этот текст

16 Тэговые классы p.small { font-size: 9pt; } работает только в том тэге, для которого он предназначен, а для всех остальных будет проигнорирован: Этот текст будет выведен стилем small А этот останется неизменным

17 Определение класса нескольких тэгов p, td { font-size: 9pt; color:green;} - перечисляются через запятую

18 Псевдоклассы Действие псевдокласса распространяется не на весь текст, к которому применён данный стиль, а лишь на его часть, и возможно лишь в определённом состоянии a { text-decoration: none; } – переопределение, запрет подчеркивания ссылки. a:hover { text-decoration: underline; } - стиль ссылки в момент, когда курсор находится над ней.

19 p:first-letter{font-size:200%;font-weight:bold; } – определение буквицы в начале абзаца

20 Комментарии в CSS /* Этот текст является комментарием */

21 Основные параметры шрифта font-weight: [bold|normal|number] - жирность шрифта font-style: [normal|italic|oblique] - наклон шрифта font-size: number - размер шрифта font-family: name - гарнитура шрифта color: number - цвет шрифта background-color: number - цвет подложки background: url - текстурная подложка

22 Основные параметры абзаца text-align: [left|right|center|justify] - выравнивание text-indent: number - отступ красной строки line-height: number - интерлиньяж letter-spacing: number - трекинг padding-left: number - отступ от текста слева padding-right: number - отступ от текста справа padding-top: number - отступ от текста сверху padding-bottom: number - отступ от текста снизу

23 Отступы margin-left: number - отступ от границы слева margin-right: number - отступ от границы справа margin-top: number - отступ от границы сверху margin-bottom: number - отступ от границы снизу

24 Задание цвета в CSS при помощи названия цвета: yellow, red, green, grey,.. шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,.. десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

25 Единицы измерения в CSS в процентах (%) словесное описание (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large) в типографских единицах - в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы "m" (em), средней шириной буквы "x" (eх) абсолютный размер в - (cm), (mm), дюймах (in) абсолютный в пикселях (px)

26 Пример CSS.epigraph { font-size: 12pt; font-style: italic; text-align: right; color:rgb(127,127,0); } p.big { font-size: 16px; font-weight: bold; color: #ff0000; }.menu { font-weight: bold; font-size: 9pt; font-family: arial, helvetica, sans-serif; } a:hover { color: #b63a3a; text-decoration: none; }