Файл st.css
advertisement
Общие сведения о каскадных таблицах стилей
Каскадные таблицы стилей – это средство для автоматизации стилевого
оформления 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>
