СПРАВОЧНИК ПО CSS

Задание стилей форматирования html-документов

Сокращенная перепечатка с "HTML в примерах", ©1999-2002 А.Климов, www.changer.newmail.ru

ЧТО ТАКОЕ CSS

Определение. Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (цвет, размер, положение, и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке много таких элементов, не отличающихся один от другого. В CSS для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент, как стиль, а в дальнейшем просто указывать этот стиль для нужных элементов.

Описание стиля можно хранить в отдельном файле и использовать на любом количестве Web-страниц, при этом оформление страниц можно изменять, изменяя описание стиля в этом файле. Существует четыре способа связывания html-документа и таблиц стилей:

Связывание - использование одной таблицы стилей для форматирования многих страниц. Для этого нужно в обычном текстовом файле описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в кодах Web-страниц сделать на него ссылку с помощью тега LINK внутри тега HEAD ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">,

Внедрение - задание таблицы стилей непосредственно в документе. Описание стилей располагается в коде Web-странички, внутри тега HEAD в теге

<STYLE type="text/css">... </STYLE>.

Встраивание в теги. Описание стиля располагается непосредственно внутри тега описываемого элемента с помощью параметра STYLE.

Импортирование.В теге <STYLE> в начале стилевого блока перед заданием остальных правил можно импортировать внешнюю таблицу стилей с сервера с помощью свойства @import таблицы стилей:

@import: url(mystyles.css);

Группирование. Правила каскадных таблиц состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. Например, следующие правила

H1 {font-family: Verdana}
H2 {font-family: Verdana}

можно сгруппировать и задать в виде одного правила со списком селекторов

H1,H2 {font-family: Verdana}

Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня

H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}

можно сгруппировать в виде одного правила, сгруппировав определения:

H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;}

Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:

H2 (font: bold 14pt Verdana}

Наследование.В HTML некоторые элементы могут содержать другие. Например, пусть цвет шрифта абзаца определён как синий(P {color: blue}). Как будет отображаться выделенный тэгом <em>элемент текста, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя, и выделенный элемент также будет отображаться синим цветом.

Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом BODY:

BODY {color: black; font-family: "Times New Roman"; background: url(picture.gif) white;}

Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.

Селекторы. Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчёркивания все ссылки в документе.

<STYLE TYPE="text/css">
<!--
A {text-decoration:none; }
-->
</--STYLE>

Классы. Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента. Например, можно определить два класса для отображения заголовка первого уровня:

<STYLE TYPE="text/css">
<!--
H1.red {color: red; }
H1.blue (color:red; background-color: blue}
-->
</STYLE>

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

<H="red">Красный шрифт</H1>
<H1 CLASS="blue">Красный шрифт на синем фоне</H1>

Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:

<STYLE TYPE="text/css">
<!--
.red {color: red; }
.blue (color:red; background-color: blue}
-->
</STYLE>

Теперь два класса red и blue можно применять к любым элементам документа:

<P ="red">Красный шрифт</P>
<P ="blue">Красный шрифт на синем фоне</P>

Идентификаторы. Параметр ID можно применять к любому элементу документа. Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:

<STYLE TYPE="text/css">
<!--
#myID {letter-spacing: 1em; }
H1#form3 (color:red; background-color: blue}
-->
</STYLE>
<BODY>
<P ID=myID> Разрежённые слова в абзаце</P>
<H1 ID=form2>Чёрный заголовок</P>

В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается по умолчанию.

Простейший пример. Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Web-страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:

НАЗВАНИЕ ЭЛЕМЕНТА {свойство: значение;},

где НАЗВАНИЕ ЭЛЕМЕНТА – имя html-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

СВОЙСТВА ЭЛЕМЕНТОВ, УПРАВЛЯЕМЫХ С ПОМОЩЬЮ CSS

В настоящее время язык CSS насчитывает довольно большое количество свойств элементов, которыми он может управлять. Наиболее употребительное свойство – размеры элементов, для которых могут использоваться следующие единицы измерений:

px – пиксели, cm – сантиметры, mm – миллиметры, pt - пункты (типограф.), % - проценты.

Описание свойств элементов состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием. Использование абсолютных размеров шрифтов рекомендуется только при определенном художественном замысле.

Для устаревших браузеров, не распознающих CSS, необходимо заключить описания стилей в тег комментариев внутри тегов <HEAD>…</HEAD>:

<HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>
 

Свойства текста

text-decoration

Устанавливает эффекты оформления шрифта.
H4 {text-decoration: underline;} – подчеркивание. A {text-decoration: none;} - стандартный текст
I {text-decoration: line-through;} – зачеркивание . B {text-decoration:overline;} - надчеркивание

text-transform

Задает преобразование регистра текста при отображении.
H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную
A {text-transform: uppercase;} - Все буквы преобразуются в заглавные
I {text-transform: lowercase;} - Все буквы преобразуются в строчные
B {text-decoration:none;} - Отменяет установленные преобразования

text-align

Определяет выравнивание элемента. Возможные значения : left, right, center, justify
P {text-align:justify}, H5 {text-align: center}

text-indent

Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой: P {text-indent: 50pt;}

line-height

Управляет интервалами между строками текста: P {line-height: 50 %}

Границы

Описывает атрибут стиля border, который позволяет задать вид линий границ вокруг объектов, например, таблиц. Атрибут border может быть применен к любым объектам.

Border-width

Ширина линии границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая): table {border-width: 2px;}

Border-color

Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно: table {border-color: green;}

border-style

Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset
table {border-style: dashed;}

Можно задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-bottom-width: 1px } будет означать, что ширина нижней границы равна 1 пикселу.

Курсоры

Internet Explorer позволяет задавать стили для курсоров. Некоторые доступны только для IE 6.

all-scroll

Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении: I {cursor: all-scroll;}

auto

По умолчанию. Браузер определяет самостоятельно: I {cursor: auto;}

col-resize

Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали: H4 {cursor: col-resize;}

crosshair

Курсор -крест : H4 {cursor: crosshair;}

default

Стандартный курсор, используемый системой: H4 {cursor: default;}

hand

Рука с вытянутым указательным пальцем (для гиперссылок): H4 {cursor: hand;}

help

Стрелка с вопросительным знаком: H3 {cursor: help;}

move

Курсор со 4 стрелками, показывающий возможность перемещения: H2 {cursor: move;}

no-drop

Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора: TD {cursor: no-drop;}

not-allowed

Перечеркнутый круг. Данная операция не поддерживается: TD {cursor: not-allowed;}

pointer

Идентична стилю hand: TD {cursor: pointer;}

progress

Песочные часы, показывающие на продолжение операции: TD {cursor: progress;}

row-resize

Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали: TD {cursor: row-resize;}

text

Текстовый курсор-каретка: TD {cursor: text;}

url(uri)

Ваш собственный курсор. Поддерживаются файлы .cur и .ani: TD {cursor:url(elogo.cur);}

vertical-text

Горизонтальная текстовая каретка для вертикального текста: TD {cursor: vertical-text;}

wait

Курсор, показывающий, что система занята и требуется подождать: TD {cursor: wait;}

*-resize

Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок: TD {cursor: n-resize;}

Свойства шрифта

font-family

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент: P {font-family: Times New Roman, sans-serif;}. Можно указать до трех семейств шрифта (браузер находит имеющийся у него).

font-style

Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный. P {font-style: italic;}

font-variant

Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные): P {font-variant: small-caps;}

font-weight

Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900: B {font-weight: bolder;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры). H1 {font-size: 200%;}, H2 {font-size: 150px;}, H3 {font-size: 400pt;}

Полоса прокрутки

Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д.

scrollbar-3dlight-color

Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки: body {scrollbar-3dlight-color: green;}

scrollbar-arrow-color

Устанавливает или определяет цвет стрелок на кнопке со стрелками
body {scrollbar-arrow-color: red;}

scrollbar-base-color

Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color: body {scrollbar-base-color: green;}

scrollbar-darkshadow-color

Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками: body {scrollbar-darkshadow-color: red;}

scrollbar-face-color

Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки: body {scrollbar-face-color: green;}

scrollbar-highlight-color

Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол: body {scrollbar-highlight-color: green;}

scrollbar-shadow-color

Схоже с scrollbar-darkshadow-color: body {scrollbar-shadow-color: green;}

scrollbar-track-color

Устанавливает или получает цвет дорожки для ползунка: body {scrollbar-track-color: aqua;}

Цвет элемента и цвет фона

color

Определяет цвет элемента: I {color: green;}

background-color

Устанавливает цвет фона для элемента (не для странички). IE отводит под фон элемента всю ширину страницы, Netscape Navigator – ширину, занимаемую элементом: H4 {background-color: yellow;}

Основные стили CSS

Свойство

Ед.изм.

Описание

color

#hex

Цвет текста

font-size

px, pt, %

Размер шрифта

line-height

px, pt, %

Высота строки

font-family

"..."

Имя/имена шрифтов через запятую

font-weight

 

Жирность шрифта (normal / bold / числовые значения)

font-style

 

Курсив шрифт (normal / italic/ obique)

font-decoration

 

Оформление шрифта (none или underline, strike, overline, blink)

text-indent

px, pt, %

Плотность текста

letter-spacing

px, pt, %

Расстояние между буквами

word-spacing

px, pt, %

Расстояние между словами

vertical-align

 

Выравнивание по вертикали: top, bottom, middle, baseline, text top, text bottom, sub

text-align

 

Выравнивание по горизонтали: left, center, right, justify

text-transform

 

Трансформация текста : none / uppercase, lowercase, capitalize

font-variant

 

Вариант шрифта: normal / smallcaps

margin

px, pt, %

Отступ со всех сторон

margin-left

px, pt, %

Отступ слева

margin-top

px, pt, %

Отступ сверху

margin-right

px, pt, %

Отступ справа

margin-bottom

px, pt, %

Отступ снизу

padding

px, pt, %

Расстояние изнутри до текста

padding-left

px, pt, %

Расстояние изнутри слева

padding-top

px, pt, %

Расстояние изнутри сверху

padding-right

px, pt, %

Расстояние изнутри справа

padding-bottom

px, pt, %

Расстояние изнутри снизу

width

px, %

Ширина объекта

height

px, %

Высота объекта

position

 

Позиционирование объекта : Absolute, Relative, Static, Fixed

top

px, %

Расстояние до объекта сверху

left

px, %

Расстояние до объекта слева

visibility

 

Видимость: visible / hidden

z-index

n

Порядок перекрывания слоя (старшие по номеру перекрывают младшие)

border

px, pt, %

Рамка объекта со всех сторон

border-left

Формат записи:
border: 1px #fc320e solid;
То есть толщина цвет стиль;
где стиль = dotted / dashed / solid / double / groove / ridge / inset / outset / none

border-top

border-right

border-bottom

background

 

Фон объекта:
background: url('bg.jpg') #ef509a no-repeat fixed 15px 30 px;
То есть адрес_рисунка цвет_фона режим_повтора(no-repeat / repeat / repeat-x / repeat-y) закрепление_рисунка(scroll / fixed) расстояние_рисунка_сверху расстояние_рисунка_снизу;

list-style

 

Стиль списка: list-style: disc url('img.gif') inside
То есть стиль_маркера  рисунок_для_маркера позиция_маркера(inside / outside);


Это фрейм страницы "Компьютеры => Справочная информация по HTML".
Для просмотра всей страницы, нажмите здесь!
Об ошибках, советах и мертвых ссылках: davpro@yandex.ru
Copyright ©2008 Davydov