Вы находитесь на странице: 1из 15

CSS Списки

С помощью css можно создать маркированные и нумерованные списки,


а также использовать в качестве маркера любое изображение.
В таблице перечислены свойства элементов, предназначенных для
создания и изменения списков.

Свойство Значение Описание Пример


list-style disc Вид маркера. Первые li {list-style:
circle три используются для circle;}
square создания
decimal маркированного li {list-style:
lower-roman списка, а остальные - upper-alpha;}
upper-roman для нумерованного
lower-alpha
upper-alpha
none
list-style- none Устанавливает li {list-style-
image URL символом маркера image:
любую картинку url(check.gif)}
list-style- outside Выбор положения li {list-style-
position inside маркера относительно position: inside;}
блока строк текста

Пример. Создание маркированного списка


<html>
<head>
<style type="text/css">
li { list-style: square; list-style-position:
outside; color: navy}
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк;
<li>При названии разделов используйте уже устоявшиеся
термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
<li>Перед использованием специального термина или слова,
решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В примере используются квадратные маркеры и их внешнее


размещение относительно текста. Цвет - темносиний.
 Заголовок должен быть короче трех строк;
 При названии разделов используйте уже устоявшиеся термины, такие

как гостевая книга, чат, ссылка, главная страница и другие;


 Перед использованием специального термина или слова, решите, будет

ли оно понятно читателю;

Пример. Использование изображений в качестве маркера


<html>
<head>
<style type="text/css">
li { list-style-image: url(images/check.gif); list-
style-position: inside; }
</style>
</head>
<body>
<ul>
<li>Заголовок должен быть короче трех строк;
<li>При названии разделов используйте уже устоявшиеся
термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
<li>Перед использованием специального термина или слова,
решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В качестве маркеров используется маленькая картинка.

• Заголовок должен быть короче трех строк;


• При названии разделов используйте уже устоявшиеся термины,
такие как гостевая книга, чат, ссылка, главная страница и другие;
• Перед использованием специального термина или слова, решите,
будет ли оно понятно читателю;

Некоторые примеры создания различных списков приведены в


таблице.
Код html Пример
<li style="list-style: disk"> Что следует учитывать при тестировании
сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
<li style="list-style: circle"> Что следует учитывать при тестировании
сайта:
o работоспособность всех ссылок
o поддержку разных браузеров
o читабельность текста
<li style="list-style: square"> Что следует учитывать при тестировании
сайта:
 работоспособность всех
ссылок
 поддержку разных браузеров
 читабельность текста
<li style="list-style: Нумерованный список с арабскими
decimal"> цифрами:
1. текст
2. текст
3. текст
<li style="list-style: lower- Нумерованный список с прописными
roman"> римскими цифрами:
i. текст
ii. текст
iii. текст
<li style="list-style: upper- Нумерованный список с заглавными
roman"> римскими цифрами:
I. текст
II. текст
III. текст
<li style="list-style: lower- Нумерованный список с прописными
alpha"> буквами латинского алфавита:
a. текст
b. текст
c. текст
<li style="list-style: upper- Нумерованный список с заглавными
alpha"> буквами латинского алфавита:
A. текст
B. текст
C. текст

Границы в CSS

Спецификация css2 описывает атрибут стиля border, который


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

Свойство Значение Описание Пример


border 1px ridge Задает толщину, table {border: solid
steelblue стиль и цвет 4px red}
рамки
border- thin Ширина p {border-top-width:
width medium границы 4px}
thick
значение
border- transparent Цвет границы p {border-color: red}
color цвет
border- none Стиль рамки table {border-style:
style dotted double}
dashed
solid
double
groove
ridge
inset
outset
border-top border-top- Определяет table {border-top:
border- width толщину, стиль solid 4px red; border-
right border-left- и цвет каждой left: solid 4px blue}
border- style границы
bottom border-
border-left bottom-color
border- collapse Задает тип table {border-collapse:
collapse separate рамок таблицы separate}

Спецификация css2 позволяет задать стили для каждой из сторон


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

<div style="background: #e7f5ff; border-style:


solid; border-top-color: red; border-right-color:
green; border-bottom-color: blue; border-left-color:
yellow;">
Тест использования атрибутов границы элемента <div>
</div>

Границы этого блока будут окрашены в разные цвета, соответственно


описанию стиля: верхняя в красный, правая в зеленый, нижняя в синий, левая
в желтый.

border-style
Наименование Описание
none Граница отсутствует
hidden Тоже, что и none, но при использовании в таблицах
интерпретируется особым образом
dotted Граница из точек.
dashed Граница из коротких отрезков линии
solid Непрерывная линия
double Граница из двух линий. Сумма ширины каждой линии и промежуток
между ними равняется значению border-width.
groove Граница выглядит так, как будто она вырезана в фоне.
ridge Эффект, противоположный groove.
inset Вне таблиц создает эффект "вдавленности"
outset Эффект, противоположный inset

border-collapse
Задает тип рамок таблицы. Css поддерживает для таблиц два типа
рамок: слившиеся рамки (collapse) и раздельные рамки (separate).
Раздельные рамки соответствуют стандарту html; слившиеся рамки
отличаются тем, что соседние рамки сливаются в единую рамку. Различие
между ними наглядно демонстрируется следующим примером:

Тип рамки таблицы определяет и то, какие свойства рамки применимы


к данной таблице, и то, как именно отображается тот или иной стиль рамки.
В таблице с раздельными рамками каждая ячейка имеет собственную рамку,
поэтому задание рамок для строк, столбцов, групп строк и групп столбцов
игнорируется браузером. К таблице с раздельными рамками применимы
свойства border-spacing и empty-cells; для таблиц со слившимися
рамками они игнорируются.
В таблице со слившимися рамками можно задавать рамки, как для
ячеек, так и для строк, столбцов, групп строк и групп столбцов. Если рамки
отдельных составляющих противоречат друг другу, то используется
следующий алгоритм разрешения конфликтов:
1. Рамки со значением border-style, равным hidden, имеют
приоритет над остальными конфликтующими рамками. Любая рамка этого
стиля подавляет все рамки в данном месте таблицы.
2. Рамки со стилем none имеют наименьший приоритет. Рамка не
будет отображаться только тогда, когда все элементы, расположенные в
данном месте, имеют этот стиль рамки.
3. В остальных случаях более широкие рамки имеют приоритет перед
более узкими. Если же несколько рамок имеют одно значение border-
width, то стили рамок в порядке убывания приоритетов таковы: double,
solid, dashed, dotted, ridge, outset, groove, inset.
4. Если рамки отличаются только цветами, то порядок убывания
приоритетов таков: рамка ячейки, рамка строки, рамка группы строк, рамка
столбца, рамка группы столбцов, рамка таблицы.
Отображение некоторых стилей рамок для таблиц также зависит от
типа рамки и несколько отлично от обычного, а именно:
hidden - cкрытая рамка. То же, что none, но для слившихся рамок
подавляет все остальные рамки.
inset - для раздельных рамок изображается в виде трехмерной
врезки; для слившихся рамок совпадает с groove.
outset - для раздельных рамок изображается в виде трехмерной
вырезки; для слившихся рамок совпадает с ridge.

Отступы в CSS

Каждый элемент обладает двумя свойствами, которые определяют


отступы от его края. Свойство margin задает отступ от элемента до других
элементов. Свойство padding задает отступ от края элемента до его
содержания. Лучше всего это видно на следующем рисунке:

Эти правила могут быть заданы отдельно для каждой стороны. Для
этого используются следующие модификаторы: -top (верхний), -bottom
(нижний), -left (левый) и -right (правый).
При расположении двух элементов друг над другом, отступ между
ними определяется исходя из большего отступа. Если у верхнего элемента
отступ равен 20 пикселям, а у нижнего - 18, то суммарный отступ составит 20
пикселей.
При сокращенной записи (margin: , padding: ) можно задавать
от одного до четырех значений. Интерпретироваться они будут в
соответствии со следующей таблицей:
Количество первый второй третий четвертый
1 для всех сторон -- -- --
2 -top и -bottom -left и -right -- --
3 -top -left и -right -bottom --
4 -top -right -bottom -left

CSS Курсоры

С помощью стилей можно переопределить вид курсора мыши и


выбрать один из пятнадцати доступных вариантов. Такая возможность,
однако, поддерживается только браузером Internet Explorer, а Netscape просто
игнорирует код html и мы увидим обычный курсор, словно ничего лишнего и
не писалось.
Прежде чем воспользоваться возможностью переделать вид курсора,
решите, а будет ли он использоваться к месту. Многих пользователей
подобные изменения могут ввести в заблуждение, когда, например, вместо
традиционной руки, появляющейся при наведении на ссылку, возникает
нечто другое. В большинстве случаев, лучше оставить все по умолчанию.

Вид Обозначение
cursor:default
cursor:crosshair
cursor:hand
cursor:move
cursor:text
cursor:wait
cursor:help
cursor:n-resize
cursor:ne-resize
cursor:e-resize
cursor:se-resize
cursor:s-resize
cursor:sw-resize
cursor:w-resize
cursor:nw-resize

Синтаксис создания курсора очень прост. Следует определить класс и в


нем использовать один из типов курсора, описанных в таблице. Ниже в
примере показано, как можно переопределить вид курсора при наведении его
на разные ссылки.
Пример. Изменение курсора мыши при наведении его на ссылку
<html>
<head>
<style type="text/css">
.movelink { cursor: move }
.helplink { cursor: help }
</style>
</head>
<body>
<b>
<a href="mypage.htm" class=movelink>ПЕРЕМЕСТИТЕ
ЭТОТ ТЕКСТ</a>
<br>
<a href="mypage.htm" class=helplink>СПРАВКА</a>
</b>
</body>
</html>

Если вы желаете переопределить курсор мыши для всей web-страницы


целиком, а не только для ссылок, воспользуйтесь селектором body.

Пример. Изменение вида курсора мыши для всей web-страницы


<style type="text/css">
body { cursor: ne-resize }
</style>

Также можно задать разный вид курсора для отдельных областей web-
страницы используя теги div или span. В этом случае вначале определяется
класс и его стиль, а затем он применяется к тегу, например, span. Такой
подход позволяет описать стиль один единственный раз, а затем применять
его в любом нужном месте.

Пример. Изменение вида курсора мыши для разных областей web-


страницы
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
.help { cursor: help }
</style>
</head>
<body>
<b>
<span class="cross">На этом тексте курсор мыши примет вид
перекрестья.</span>
<br>
<a href="help.htm" class=help>СПРАВКА</a></b>
</body>
</html>

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

Скроллбар или полоса прокрутки находится в правой части окна


браузера. При желании Вы можете изменить его цвет, подстроив под дизайн
своего сайта. О том, как это сделать читайте ниже.
Для оформления скроллбара нужно после тэга head вставить код
следующего типа.
<style type=text/css>
body { scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000; }
</style>

Рассмотрим каждое свойство по отдельности:


scrollbar-face-color - задаёт основной цвет полосы прокрутки.
scrollbar-highlight-color - цвет левого верхнего угла самого
скроллбара.
scrollbar-shadow-color - этим цветом отображается правый
нижний угол скроллбара.
scrollbar-3dlight-color - тоненькая кромка, находящаяся в
левом верхнем углу, ближе к краю нежели scrollbar-highlight-
color.
scrollbar-arrow-color - определяет цвет стрелочек.
scrollbar-track-color - цвет дорожки по которой перемещается
скроллбар.
scrollbar-darkshadow-color - тоненькая кромка, находящаяся в
правом нихнем углу, ближе к краю нежели scrollbar-shadow-color.

Виды блоков и свойство display


Блоковая модель описывает вид отдельного блока, но, кроме того,
блоки бывают различных видов. Свойство display задает тип
объемлющего прямоугольника для данного элемента. CSS поддерживает
следующие типы прямоугольников:
Значение Описание
none Элемент и все его потомки игнорируются при
отображении
block Блочный элемент. Соответствует блочным элементам html,
т. е. отображается как отдельный абзац. При его
отображении генерируется главный прямоугольник блока,
в котором располагаются объемлющие прямоугольники
потомков данного элемента
inline Текстовый элемент. Соответствует текстовым элементам
html, т. е. отображается как текстовые строки внутри
текущего абзаца, точнее внутри главного прямоугольника
соответствующего блока.
list-item Элемент списка. Отображается как блочный элемент с
добавлением к нему маркера элемента списка.
run-in Присоединяемый элемент. Если следующий за данным
элемент является блочным, то данный элемент
форматируется как его первый текстовый элемент. В
противном случае отображается как обычный блочный
элемент.
compact Компактный элемент. Если следующий за данным элемент
является блочным, то данный элемент форматируется как
однострочный текстовый элемент, и если он помещается
на левой или правой границе последующего блока
(граница задается свойством direction вмещающего
блока), то на ней он и отображается. В противном случае
отображается как обычный блочный элемент.
table Блочная таблица
inline-table Текстовая таблица
table-row-group Группа строк таблицы
table-header-group Группа надзаголовков таблицы
table-footer-group Группа подзаголовков таблицы
table-row Строка таблицы
table-column-group Группа столбцов таблицы
table-column Столбец таблицы
table-cell Ячейка таблицы
table-caption Заголовок таблицы

Примечание. IE поддерживает только inline, block, list-item, none


(4.0+), table-header-group и table-footer-group (5.0+)

Все элементы образуют блоки. В глобальном плане эти элементы


бывают двух видов:
• Элементы блокового уровня (если брать за основу свойство
display, то значения: block, list-item, compact, run-in,
table)
• Элементы строкового уровня (если брать за основу свойство
display, то значения: inline, inline-table, compact, run-in)
Почему значения compact и run-in присутствуют в обоих видах,
выяснится позже. Если брать аналогии html, то элементы блокового уровня -
параграфы, заголовки и прочие. (p, h1, table), а строкового - элементы
оформления (b, em, code). Ну а теперь подробнее рассмотрим, как
сделать элемент блокового уровня.

display: block
Обозначает, что элемент будет отображаться, как элемент блокового
уровня.

em {display:block}
Блоковый элемент имеет отступы до и после себя. Кроме этого, в одной
строке вместе с этим элементом не могут находиться другие элементы (если
только дополнительно для них не применять свойство float, ну, об этом
позже).

Вот живой пример:


display: block
А вот код:
<div style="display: block; border: 1px solid
black">
display: block
</div>
display: list-item

Обозначает, что элемент будет отображаться, как элемент списка. То


есть слева возле элемента будет находиться точка, что соответствует ul.

Вот живой пример:


display: block;
display: list-item;
А вот код:
<div style="display: block; border: 1px solid
black; margin: 5px; padding: 15px">
display: block;
<div style="display: list-item; border: 1px solid
black;">
display: list-item;
</div>
</div>

display: table
В стандарте css2 реализовано визуальное представление таблиц с
помощью стилей. Надо заметить сразу, что принципиальных отличий от
таблиц в html 4.0 нет. То есть каждому тэгу соответствует какой-нибудь
атрибут свойства display. Вот этот список:

table (в html: table)


Определяет элемент как таблицу блокового уровня со всеми
вытекающими последствиями
inline-table (в html: table)
Определяет элемент как таблицу строкового уровня со всеми
вытекающими последствиями
table-row (в html: tr)
Определяет элемент, как строку таблицы
table-row-group (в html: tbody)
Определяет элемент, как группу нескольких строк (надо сказать,
абсолютно не нужен)
table-column (в html: col)
Определяет элемент, как столбец таблицы
table-cell (в html: td, th)
Определяет элемент, как ячейку таблицы

display: run-in
Вот и подобрались к загадочному свойству display: run-in.
Почему же оно находится и в разделе элементов блокового уровня, и в
разделе элементов строкового уровня? А потому что метод отображения
этого свойства может быть как блоковым, так и строковым, в зависимости от
некоторых условий. В спецификации W3С написано следующее:
• Если блоковый элемент (который не является плавающим и не
является абсолютно позиционированным) следует за run-in блоком, то
run-in блок становится первым строковым блоком этого блокового
элемента
• В противном случае, run-in блок становится элементом блокового
уровня.

Слои

CSS дает возможность работы со слоями: фрагментами html, которые


можно размещать на web-странице путем наложения их друг на друга с
точностью до пикселя. Данный проект для позиционирования элементов
практически одинаково поддерживается браузерами Internet Explorer и
Netscape за исключением ряда мелких отличий. Однако объектные модели
браузеров для динамического управления слоями с помощью JavaScript
отличаются. В этом и кроется основная проблема для web-разработчиков,
которые используют слои в своих программах.

Основы

Код html для примера показан ниже.


<html>
<body>
Слой 1 наверху
<div style="position:relative; font-size:50px; z-
index:2; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5;
color:orange; font-size:80px; z-index:1">Слой 2</div>
Слой 2 наверху
<div style="position:relative; font-size:50px; z-
index:3; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5;
color:orange; font-size:80px; z-index:4">Слой 2</div>
</body>
</html>

Для создания слоев следует использовать тег div или span. Эти теги
взаимозаменяемы и различаются лишь внешним видом в браузере. Если
требуются отступы до и после текста, следует использовать элемент div.
При размещении текста внутри параграфа применяется тег span.
Тип позиционирования определяется параметром position,
положение элемента двумя координатами top и left, а порядок слоя
значением z-index.

Позиционирование слоя
Свойство position может принимать одно из трех значений: static
(статическое), absolute (абсолютное) и relative (относительное).
Параметр static по умолчанию не оказывает никакого влияния на
расположение слоев.
При абсолютном позиционировании слой размещается относительно
левого верхнего угла окна документа. В случае размещения слоя внутри
другого, абсолютные координаты считаются от левого верхнего угла
родительского слоя.
Кроме тегов div и span абсолютное позиционирование
поддерживают следующие элементы:
applet, input, button, object, select, fieldset,
iframe, table, img, textarea.
Параметр position: relative используется для смещения слоя
относительно родительского элемента. Установка этого значения не изменяет
размещение элемента, но если установлены значения свойств top или left,
то слой смещается от своего нормального положения в документе.

Положение слоя
В то время как свойство position указывает тип системы координат,
параметры top и left определяют точную позицию слоя. Значения этих
параметров могут определяться в процентном отношении или пикселях,
принимать положительные и отрицательные величины. Это дает
возможность размещать контент выше или ниже на странице независимо от
физической позиции кода html. То есть, в верхней части страницы можно
поместить слой, который описан внизу html-документа.
Положение слоя можно менять динамически с помощью JavaScript. Это
позволяет изменять расположение элементов уже после загрузки страницы.
Подобная техника применяется при создании баннеров, игр, выпадающих
меню и др.

Свойство z-index
Свойство z-index определяет порядок слоев, или их перекрытие по
отношению к другим слоям. По умолчанию все слои позиционированы со
значением z-index равным нулю. Другие слои могут размещаться ниже
путем установки отрицательного значения z-index (см. рис.). Для слоев, у
которых z-index не установлен, это значение назначается неявно в
соответствии с их положением в документе. Поэтому слой, который помещен
в документ позже, размещается выше остальных элементов,
позиционированных ранее.
В примере показано использование параметра z-index для изменения
положения слоев относительно друг друга.

Свойство visibility
Свойство visibility задает видимость элемента при отображении.
Оно может принимать следующие значения:
Значение Описание
visible Объемлющий прямоугольник элемента видим.
hidden Объемлющий прямоугольник элемента невидим.
collapse То же, что hidden. Применяется только в таблицах, где имеет особое
назначение

Примечания
• Невидимость элемента означает, что его объемлющий
прямоугольник становится прозрачным, но продолжает занимать свое место
в структуре отображения. Для того, чтобы полностью удалить элемент,
следует использовать значение none свойства display.
• Это свойство широко применяется в сценариях для создания
динамических эффектов.
<div style="visibility: hidden">Спрятанный
слой</div>

Динамическое управление отображением слоя позволяет создавать


выпадающие меню, анимацию на web-странице, свертывающие и
развертывающие окна, и многое другое.