Общие сведения о каскадных таблицах стилей Каскадные таблицы стилей – это средство для автоматизации стилевого оформления Web-страниц. У CSS есть три основных достоинства. 1) Универсальность применения. Мы можем создать таблицу стилей и применить её к документу или группе документов, просто устанавливая ссылки на неё. Таким образом, можно быстро изменить вид всех страниц, просто изменив таблицу стилей. 2) Большие возможности по управлению текстом, чем в обычном HTML. Возможно наложение одного текста на другой, создание выпадающих меню, использование теней и.т.д. 3) Позволяют хранить в разных местах текст и информацию о том, как он должен выглядеть. Это позволяет уменьшить размеры файлов. Пять документов по 10 Кбайт могут ссылаться на одну 15-килобайтную таблицу, вместо того, чтобы создавать пять документов по 25 Кбайт. Таблица стилей – это описание правил, задающих параметры представления отдельных элементов на экране. Описание стиля имеет следующий вид: селектор{атрибут1:значение; атрибут2:значение; атрибут3:значение…} Определение стиля может быть: 1) собственным для отдельного элемента документа, 2) локальным для всего документа, 3) глобальным (внешним) для нескольких документов. Рассмотрим создание каждого из этих типов стилей. 1) Собственное определение стиля располагается внутри тега элемента и имеет следующий вид: <ТЭГ style="атрибут1:значение; атрибут2:значение;…"> Пример. <P style="font-size:12pt; color:black"> 2) Локальное для всего документа описание стиля располагается в заголовке документа между дескрипторами <STYLE>…</STYLE> Общий вид этого тэга: <STYLE type="text/css"> селектор1 {атрибут1:значение; атрибут2:значение; атрибут3:значение…} селектор2 {атрибут1:значение; атрибут2:значение; атрибут3:значение…} селектор3 {атрибут1:значение; атрибут2:значение; атрибут3:значение…} .... </STYLE> Для каждого HTML-дескриптора можно создать несколько классов стилей. Чтобы воспользоваться описанным классом стилей, нужно в соответствующем дескрипторе указать атрибут class="имя класса". Пример. <HEAD> <STYLE type="text/css"> H1.my1 {font-family: Courier New; color:white; background-color:green} H1.my2 {font-family: Arial; color:green; background-color:yellow} </STYLE> </HEAD> ..... <H1 class="my1">Это - стиль my1. <H1 class="my2">Это - стиль my2. <H1>Это - стиль по умолчанию. 3) Глобальное определение стиля располагается в отдельном документе с расширением .css. В этом случае, в каждом документе, использующем данный стиль, должна присутствовать ссылка на стилевой файл. Эта ссылка описывается в разделе заголовка и имеет следующий вид: <LINK rel="stylesheet" type="text/css" href="URL-адрес"> Первые два параметра одни и те же для любой ссылки. Атрибут rel="stylesheet" указывает, что описывается ссылка на стилевую таблицу, атрибут type="text/css" - на то, что эта таблица оформлена как обычный текстовый файл. Пример. Файл st.css H1.my1 {font-family: Courier New; color:white; background-color:green} H1.my2 {font-family: Arial; color:green; background-color:yellow} Файл style.htm <HEAD> <LINK rel="stylesheet" type="text/css" href="st.css"> </HEAD> ..... <H1 class="my1">Это - стиль my1. <H1 class="my2">Это - стиль my2. <H1>Это - стиль по умолчанию. В листах стилей удобно использовать дескриптор <DIV>, который позволяет назначить единый стиль части страницы. Стиль, описанный в этом дескрипторе, будет распространяться на все тэги, заключенные между тэгами <DIV> и </DIV>. Типы селекторов и их значения Существует несколько различных типов селекторов: 1) Селектор типа элемента позволяет задать стиль, относящийся ко всякому элементу данного типа. В качестве типа элемента указывается имя тэга: H2 {color:blue} …. <H2>Привет</H2> Важно!! Каскадные таблицы чувствительны к регистру, то есть <H2> и <h2> это разные типы тэгов. 2) Селектор класса позволяет задать стиль оформления только для определённого множества элементов, которому присвоено имя. Причём, в этот класс могут входить элементы различных типов: .my1 {color:green;font-family:Arial} …. <H2 class=my1>Заголовок1</H2> <P class=my1>Текст</P> <H2>Заголовок2</H2> 3) E.name Задаёт стиль для элементов типа E, атрибут class у которых имеет значение name: <STYLE type=”text/css”> p.my1 {size:12pt} </STYLE> <P class=my1>Текст</P> <P>Абзац</P> 4) E:псевдокласс Задаёт стиль для элементов, имеющих определённый динамический статус. Псевдоклассы: link – адресная ссылка, по которой ещё не выполнялся переход, visited – уже посещённая гиперссылка, hover – ссылка, на которую наведён указатель мыши. a:link {color:red} a:visited {color:green} a:hover {color:blue; font-size:14pt} При вложении тэгов друг в друга используется наследование стилей, то есть внутренний тэг наследует свойства внешнего при условии, что для него не задан свой собственный стиль: H1 {font-family:Arial} … <H1>Заголовок1<H2>Номер</H2></H1> В стилевых таблицах атрибуты задаются в виде: {свойство1: значение; свойство2:значение…} Значения можно разделить на несколько категорий: - Vv – числа, - Sv – размерные единицы (in – дюймы, cm – сантиметры, mm – миллиметры, pt – пункты, pc – пики, px - пиксели) - Pv – процентные величины, - URL – адресные ссылки в виде: url(‘адрес’), - Cv – цвет, - Text – текстовая строка (задаётся в кавычках) Примеры: P {font-size:15pt} P {font:size:150%} .my {color:red} Селекторы 1) Границы, отступы, поля Атрибут значение margin-top верхнее поле от границы окна margin-bottom нижнее поле от границы окна margin-right правое поле от границы окна margin-left левое поле от границы окна margin все поля от границы окна padding-top верхний отступ от границы блока padding-bottom нижний отступ от границы блока padding-right правый отступ от границы блока padding-left левый отступ от границы блока padding все отступы от границы блока border-top-width толщина верхней границы border-bottom-width толщина нижней границы border-right-width толщина правой границы border-left-width толщина левой границы border-width толщина всех границ border-top-color border-bottom-color border-right-color border-left-color border-color border-top-style border-bottom-style border-right-style border-left-style border-style цвет верхней границы цвет нижней границы цвет правой границы цвет левой границы цвет всех границ тип верхней границы тип нижней границы тип правой границы тип левой границы тип всех границ тип значения Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv Sv,Vv, thin, medium, thick Sv,Vv, thin, medium, thick Sv,Vv, thin, medium, thick Sv,Vv, thin, medium, thick Sv,Vv, thin, medium, thick Cv Cv Cv Cv Cv тип линии тип линии тип линии тип линии тип линии Типы линий: - none – отсутствует, - dotted – пунктирная, - solid – сплошная, - double – двойная, - groove – углубленная, - ridge – выпуклая. Пример: P {border-style:double; border-width:3px; border-color:blue} 2) Цвета и фоновые рисунки атрибут значение color цвет текста background-color цвет фона background-image фоновая иллюстрация тип значения Cv Cv URL Пример: DIV.new {background-image:url{‘pic.gif’) } 3) Шрифты атрибут font-family font-style font-weight font-size значение название шрифта стиль шрифта жирность шрифта размер шрифта тип значения название normal, italic жирность размер Жирность шрифта: - число от 100 до 900, - normal (400), - bold (700). Пример: DIV.new {font-family:Arial;font-size:20pt } 4) Оформление текста атрибут text-align text-decoration white-space значение выравнивание текста оформление текста пробельные последовательности тип значения left, right, center, justify оформление тип Оформление: - underline – подчёркивание, - overline – надчёркивание, - line-through – зачёркивание, - blink – мерцание. Обработка пробелов: - normal – сжатие последовательностей пробелов в один пробел и автоматический переход на новую строку, - pre – отмена сжатия последовательностей пробелов и автоматический переход на новую строку, - nowrap – сжатие пробелов и отмена автоматического перехода на новую строку. Представление и позиционирование элементов Каскадные таблицы стилей позволяют создавать страницы, похожие на типографские, что с помощью стандартного HTML сделать довольно сложно, так как в нём нет возможности задавать произвольные координаты элемента. В CSS можно задавать координаты вывода каждого элемента, вследствие чего допускается даже наложение элементов друг на друга. Для этого используется четыре основных свойства: - left – расстояние от левой границы окна или внешнего блока, - top – расстояние от верхней границы окна или внешнего блока, - z-index – добавление нового измерения (2,5-мерность). Это свойство определяет, в каком порядке будут выводиться элементы в случае их наложения друг на друга. В качестве значения может использоваться любое число. Элемент с более высоким индексом будет появляться над элементом с более низким. - position – используется в сочетании с left и top. Принимает значения relative и absolute. При использовании absolute заданные координаты будут браться от левого верхнего угла окна или блока, а при использовании relative элемент будет браться в соответствии с тем, в каком месте он должен был бы находиться, если бы не было никаких атрибутов формтирования. Кроме этого, для каждого выводимого блока можно задать ширину и высоту: width и height. Если внутри блока для отдельных элементов текста потребуется изменить ряд свойств, то в этом случае используется тэг <SPAN>…</SPAN>. Пример. <HTML> <HEAD> <STYLE type="text/css"> A:link {color: red} A:hover {color: yellow; font-size: 15pt} </STYLE> </HEAD> <BODY bgcolor=aqua> <DIV style="position: absolute; top: 0; left: 20; width:200; height: 100; margin: 10; background:red" > РАЗ </DIV> <DIV style="position: absolute; top: 30; left: 30; width:200; height: 100; margin: 10; background:yellow"> ДВА </DIV> <DIV style="position: absolute; top: 95; left: 120; width:100; max-height: 10; margin: 10; background:blue"> ТРИ </DIV> <DIV style="position: absolute; font: 100pt; color: white; top: 200; left: 180; width:300; height: 200; margin: 10; background:green"> ТРИ <SPAN style="position: absolute; left: 5px; top: 2px; color:black">ТРИ</SPAN> </DIV> <DIV style="position: absolute; font-color: red; top: 400; left: 280; width:300; height: 200; margin: 10"> <a href="ico.jpg">Привет</A> </DIV> </BODY> </HTML>