Каскадные таблицы стилей (Cascade Style Sheets — CSS)Основные
Каскадные таблицы стилей (Cascade Style Sheets - CSS)
Основные понятия Таблица стилей - это шаблон, который управляет форматированием тэгов HTML в Web-документе Рекомендации Консорциума W3 позволяют использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определённым правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким "каскадом" Существует три вида таблиц стилей: внешняя внедренная включенная 2/23
Включенные таблицы стилей Включенные таблицы стилей позволяют управлять форматированием при помощи стандартных тэгов HTML, включая определения конкретного стиля для содержимого конкретного тэга, подобно его атрибутам Пример: P {color:blue} стиль применяется к тэгу
3/23
Пример включенной таблицы стилей
Текст документа
4/23
Внедренные таблицы стилей Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов Эта пара со всем её содержимым помещается между тэгами и
При написании кода внедренной таблицы выбираются тэги, которые будут являться контейнерами текста Действие таблицы стилей будет распространяться только на те фрагменты текста, которые будут заключены именно в эти тэги. 5/23
Пример внедренной таблицы Пример:
содержимое 6/23
Внешние таблицы стилей Этот метод требует создания отдельного файла таблицы с основными стилями, имеющего расширений css Чтобы связать нужные документы с данной таблицей нужно поместить в связываемом документе где-нибудь между тэгами
и следующую строку: " файл.css" type="text/css"> или 7/23
Пример внешней таблицы стилей 2/1 Файл с расширением example.css BODY {background: #ffffff;color: #000000;margin-top: 120pt; margin-left: 150pt;margin-right: 100pt} H3 {font: 14pt verdana; color: #0000ff} P {font: 12pt times;background-color: #00ff00; text-indent: 0.5in} A {color: #ff0000} 8/23
Пример внешней таблицы стилей 2/2
Документ с внедренной таблицей стилей
В этом документе фон белый, шрифт черный; поля 150 пикселей, 120 и 100;
Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей. Ссылкакрасного цвета
9/23
Селекторы 2/1 Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Определение, в свою очередь, также состоит из двух частей свойства и его значения, разделённых знаком двоеточия (:). Селекторы могут описывать следующие элементы: тэги Пример: P {color: red} стиль применяется к тэгу
тэги потомков Пример: H1 B {color: red} стиль применяется к тэгу , находящемуся внутри заголовка первого уровня, т.е. являющимся его потомком 10/23
Селекторы 2/2 дочерние тэги Пример: OL LI {color: red} стиль применяется к тэгу
- атрибуты тэгов Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в
, у которого идентификатор ID равен 12 классы Пример: .red {color: red} стиль применяется к любым тэгам, у которых атрибут class равен red 11/23
Свойства цвета и фона background-color Определяет цвет фона абзаца селектор {background-color: #ffffff} background-image Определяет фоновый рисунок страницы селектор {background-image: "URL";} color Определяет цвет текста страницы селектор {color: #000000} 12/23
Определение цвета ключевое слово - цвет задается, используя пользовательские настройки литерал - цвет задается, используя стандартные названия шестнадцатеричное - цвет задается, используя значения RGB процентное - цвет задается, используя значения десятичное - цвет задается, используя значения Пример: H1 { color: background } H2 { color: red } H3 { color: #ff0033mm } H4 { color: rgb(100%, 0%, 0%)} H4 { color: rgb(255, 0, 125)} 13/23
Задание шрифта 2/1 font-family Определяет тип шрифта селектор {font-family: Times} font-size Определяет размер шрифта селектор {font-size: 12pt} Cуществуют размерности : pt - пункты in - дюймы сm - сантиметры px - пиксели % - относительная абсолютная (xx-small, x-small, small, medium, large, x-large, xx-large 14/23
Задание шрифта 2/2 font-style Определяет стиль начертания шрифта (italic, normal, oblique) селектор {font-style: italic} font-weight Определяет насыщенность начертания шрифта селектор {font-weight: насыщенность} Может принимать значения: normal extra-light light medium bold число. Задается в пределах от 100 до 900. 15/23
Свойства текста 3/1 word-spacing Определяет оформление интервала между слов. Тип: normal, <число>em селектор {word-spacing: тип} letter-spacing Определяет оформление интервала между символами. селектор {letter-spacing: значение} либо normal line-height Определяет межстрочный интервал при помощи одной из пяти вышеперечисленных размерностей 16/23
Свойства текста 3/2 t-decoration Определяет оформление начертания шрифта. селектор {text-decoration: тип} Тип может принимать значение: none – упрощённый underline – подчеркнутый overline – надчеркнутый Italic - наклонный line-through - линия насквозь text-indent Определяет отступ текста. селектор {text-indent: число} 17/23
Свойства текста 3/3 text-align Определяет режим выравнивания текста селектор {text-align: расположение} Расположение может принимать значение: right - по правому краю left - по левому краю center - по центру. text-transform Определяет регистр шрифта текста. селектор {text-transform: none} Так же может принимать значения: uppercase. lowercase. 18/23
Свойства позиционирования 2/1 top Определяет y-координату элемента в окне браузера. Задается px, % или auto селектор {top: значение} left Определяет x-координату элемента в окне браузера. селектор {left: значение} width Определяет ширину элемента в окне браузера. селектор {width: значение} height Определяет высоту элемента в окне браузера. селектор {height: значение} 19/23
Свойства позиционирования 2/2 position Определяет позицию элемента в окне браузера. селектор {position: absolute} absolute - когда значения left и top задаются относительно левого верхнего угла контейнера или страницы relative - когда значения left и top задаются относительно текста, за которым следует элемент static - когда значения left и top задаются относительно страницы статично clear Определяет обтекание текстом объекта. Значения: left, right, both селектор {clear: none} 20/23
Группирование стилей Стили можно сгруппировать, что позволяет уменьшить количество необходимых атрибутов и аргументов, путем создания логических групп Группирование таблиц стилей может происходить по одинаковым тэгам, или по атрибутам одного семейства Пример. До группирования: H1 {font-family: arial;font-size: 14pt} H2 {font-family: arial;font-size: 14pt} H3 {font-family: arial;font-size: 14pt} После группирования: H1,H2,H3 {font-family: arial;font-size: 14pt} 21/23
Классы Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой Создание класса: H1.left {text-align: left} Н1.right {text-align: right} Ссылка на класс в документе:
Можно создать универсальный класс и применять его потом к различным элементам: Создание класса: .left {text-align: left} Ссылка на класс в документе: <тэг class=left> 22/23
Псевдоклассы Псевдоклассы позволяют задавать стиль элемента по его характеристикам, которые не являются именем, атрибутом или содержимым Элемент может приобрести псевдокласс или лишиться его во время работы пользователя с документом Пример A:link - не просмотренные ссылки A:visited - просмотренные ссылки A:hover - выбранная, но не активизированная ссылка A:active - активизированная ссылка 23/23
Задание Создать HTML-страницу, использующую Внутреннее определение стиля Включенное определение стиля Внешнее определение стиля Класс или псевдокласс Стили, в сумме, должны определять не менее 5 типов форматирования элементов
Скачать презентацию Каскадные таблицы стилей (Cascade Style Sheets — CSS)Основные
css.ppt
- Количество слайдов: 24