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

CSS селекторы, определение стилей

Общий синтаксис определения стиля

Selector {/*комментарий*/
property : value ; /*комментарий*/
property2 : value2;
...
propertyn : valuen;
}

Под селектором понимаются признаки XHTML элементов, которым назначается стиль. В


простейшем случае это:

 * - любой элемент;
 имя элемента - html элемент;
 значение атибута class, в этом случае имени предшествует символ '.'. В популярных
браузерах элементу можно задать сразу несколько классов, разделив имена
пробелом, чтобы назначить несколько стилей сразу;
 значение атрибута id, в этом случае имени предшествует символ #;
 псевдокласс, в этом случае имени предшествует символ :;
 через запятую можно перечислить все селекторы, которым назначается стиль;
 или их комбинация, например code.cpp#comment5 будет определять элемент html
code у которого атрибут class равен cpp, а атрибут id равен comment5.

В более сложных вариантах селектор определяет отношение нескольких элементов:

 если один элемент является дочерним другого, например <code> text <b> bold
text</b> </code> , то стиль дочернего определяется так code > b {...}
 если два элемента имеют общий родительский элемент и следуют друг за другом,
например <span><code> text<code> <b> bold text</b> </span> , то стиль второго
определяется так

code+b {...}

 если один элемент потомок второго, т.е. вложен в другой на каком-либо уровне,
например <code> text <i> <b> bold text</b> </i></code> , то стиль определяется так

code b {...}

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


определенное значение указанного атрибута:

 E[foo] - элемент E с установленным атрибутом foo в какое-либо значение;


 E[foo="anyval"] - элемент E, чье значение атрибута foo равно anyval;
 E[foo~="val"] - элемент E с атрибутом foo, у которого в списке значений указано
значение val;
 E[lang|="en"] - элемент E с атрибутом lang, у которого список значений
разделенных дефисом начинается с 'en'.

Регистр букв в именах не имеет значения

h1 { text-align:center; color:red; } /* заголовок первого уровня */


H3 { text-align:center; COLOR:RED; } /* заголовок третьего уровня */

Внедрение стилей
За исключением явного указания стиля элементу, стили задаются в заголовочной секции
документа:

<!-- подключение внешних css файлов -->


<head>
<link rel="stylesheet" type="text/css" href="test1.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<link rel="stylesheet" type="text/css"
href="http://anysite.com/stile1.css">
</head>

<!-- вставка css правил на страницу -->


<style type="text/css">
h1{text-align:center; color:red;}
</style>
</head>

<!-- подключение внешних css файлов через импорт -->


<!-- импорт можно производить и в самих css файлах -->
<style type= "text/css">
@import "test.css";
@import url("test1.css");
@import url("http://anysite.com/stile1.css");
</style>

<!-- стиль можно назначить элементу явно через атрибут style -->
<body style="background-color: #555599; color: green;">

Значения свойств стилей


Непосредственные значения различных длин могут указываться со следующими
суффиксами, определяющих единицу измерения:

 em - текущая высота элемента;


 ex - текущая ширина буквы "x" элемента;
 px - пикселы, экранные точки;
 in - инчи, дюймы;
 cm - сантиметры (1 cm = 10 mm);
 mm - миллиметры;
 pt - пункты (1pt = 1/72in), единица измерения по умолчанию для текста;
 pc - цицеро (1pc = 12pt= 4.51166667 mm);
 % - для указания значения в процентах от текущего значения, которое наследуется
от родительского элемента.

Отрицательные значения допускаются.

font-size: 20pt;
font-size: 10%
font-size: -10%

Значения углов указываются со следующими суффиксами:


 deg - градус
 grad - градиент
 rad - радиан

Значение цвета указывается либо предопределенным именем цвета, либо


шестнадцатиричным числом в формате rrggbb. Если значение каждой компоненты цвета
определяется двумя одинаковыми цифрами, то можно воспользоваться сокращенным
форматом rgb. Дополнительно см. таблицу цветов.

color: red;
или
color: #ff0000
или
color: #f00

Значение ссылки указывается следующим образом:

url(mypic.png)
или
url('mypic.png')
или
url("mypic.png")

Настройка переднего и заднего фонов


Обычно эти стили назначаются элементу body, но это не ограничение.

цвет
color: #ff0000; /*в красный цвет*/

задний фон
background-color: #00ff00;/*в зеленый цвет*/

фоновое изображение
background-image: url(mypic.png);

способ покрытия фоновым изображением


Возможные значения:

 repeat - замостить фон указанным изображением во всех направлениях;


 repeat-x - замостить по горизонтали;
 repeat-y - замостить по вертикали;
 no-repeat - не повторять изображение.

background-repeat: repeat;

прокрутка заднего фона

Два значения:

 scroll - прокручивать;
 fixed - зафиксировать.

background-attachment: scroll;
позиция фонового изображения

Кроме числовых значений, возможны следующие:

 top - разместить сверху;


 middle - разместить в середине;
 left - разместить слева;
 right - разместить справа;
 center - разместить по центру.

background-position: 20%20%;
background-position: bottom;

общая настройка заднего фона


background: #00ff00 url(mypic.png) repeat scroll;

Форматирование текста
выравнивание текста

Возможные значения:

 justify - выровнить текст по ширине;


 left - выровнить по левой границе;
 right - выровнить по правой стороне;
 center - выровнить по центру.

text-align: justify; /*растянуть текст по ширине*/

декорация текста

Возможны следующие значения:

 underline - подчеркнуть;
 none - убрать декорацию;
 overline - надчеркнуть;
 line-through - зачеркнуть;
 blink - мигающий текст.

text-decoration: underline; /*подчеркунть */

отступ первой строки параграфа


text-indent: 2em;
text-indent: 50pt;
text-indent: 2%;

изменение регистра символов

Может принимать следующие значения:

 none - ничего не делать;


 uppercase - все буквы большие;
 lowercase - все буквы маленькие;
 capitalize - первая буква слова большая.
text-transform: lowercase;

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

Значение normal оставляет все без изменений.

letter-spacing: 25px;

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

Значение normal оставляет все без изменений. Таким образом можно регулировать
межстрочное расстояние.

line-height: 8%;

управление пустыми символами

CSS позволяет в блоковом элементе разместить подряд идущие пробелы и перенос строки
без тега <br/>, другие значения:

 pre - поведение соответствует элементу pre;


 normal - сжимать подряд идущие пробелы в один;
 nowrap - перенос строки только по тегу <br/>.

В старых версиях IE с этим были проблемы.

white-space: pre;

Настройка шрифта
имя шрифта
font-family: arial;
font-family:"Sanskrit 2003"

наклон (стиль) шрифта

Два значения:

 italic - с наклоном;
 normal - без изменений.

font-style: italic;

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

Кроме численных значений может принимать одно из следующих: xx-small,


small,medium,large, x-large,xx-large. Кроме этого два значения определяют относительное
значение от размера шрифта в родительском элементе: larger - увеличенный, smaller -
уменьшенное.

font-size: 20pt;/*размер в 20 пунктов*/


font-size: x-small; /*малый размер*/
font-size: larger;
жирность шрифта

Может принимать числовые значения от 100 до 900, или одно из следующих строковых
значений:

 bold - жирный;
 normal - нормальный;
 bolder - жирней;
 lighter - тонкий.

font-weight: bold;

общая настройка шрифта

Задает параметры шрифта.

font: arial italic 20pt bold;

Боксовая модель HTML


В HTML каждый элемент располагается в отдельной ячейке, боксе. Таким образом, мы
имеем два вида полей: отступы между другими элементами,т.е. их боксов или границами
документа (margin), и заполение элемента, т.е. отступы содержимого элемента от границ
окружающего его бокса (padding). Во-вторых, можно определять облик самой рамки
бокса. В-третьих, можно определить позицию и размеры бокса. Эти возможности будут
рассмотрены чуть ниже.

Тип бокса задается свойством display, ниже приведены некоторые значения:

 block - блоковый бокс, размещается на отдельной строке;


 inline - строковый бокс, для него отдельная строка не создается;
 list-item - бокс размещается на отдельной строке, и перед ним стоит маркер элемента
списка;
 none - не генерировать бокс для элемента, в результате содержимое бокса не
отображается на экране;
 marker - отобразить до или после элемента маркер элемента списка. с какой именно
стороны определяется псевдоклассами after и before, например
 .markerdemo:after {
 display: marker;
 /* используемые мною браузеры пока
 не поддерживают данное значение */
 color: yellow;
 list-style-type: square;
 }

Элементы div и span

Элементы div и span не накладывают по умолчанию дополнительное форматирование на


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

Поля, отступы
отступ от других элементов

 margin-top - отступ сверху;


 margin-right - отступ справа;
 margin-left - отступ слева;
 margin-bottom - отступ снизу.
 margin - задает значения всех четырех отступов. Если указывается одно значение, то оно
применяется ко всем. Если два, то первое - вертикальные отступы, а второе -
горизонтальные.

размер поля - отступа содержимого от границ элемента

 padding-top - верхнее поле;


 padding-right - правое поле;
 padding-left - левое поле;
 padding-bottom - нижнее поле;
 padding - задает значения всех четырех отступов. Если указывается одно значение, то оно
применяется ко всем. Если два, то первое - вертикальные отступы, а второе -
горизонтальные.

Примеры
margin-top: 25px;
margin-left: 25%;
margin: 25px 25px 25px 25px;
margin: 0;
margin: 25px 25px;
padding-left: 25%;
padding: 25px 25px 25px 25px;

Настройка рамки (бордюров)


ширина линии рамки

Имена содержащие border и width определяют ширину линии рамки:

 border-top-width - ширина верхней линии;


 border-right-width - ширина правой линии;
 border-left-width - ширина левой линии;
 border-bottom-width - ширина нижней линии;
 border-width - ширина всех линий.

Кроме числовых значений, можно использовать одно из следующий:

 thin - тонкая;
 medium - средняя;
 thick - толстая.

цвет линии рамки

Имена свойств содержащие border и color определяют цвет линии рамки:

 border-top-color - цвет верхней линии рамки;


 border-right-color - цвет правой линии рамки;
 border-left-color - цвет левой линии рамки;
 border-bottom-color - цвет нижней линии рамки;
 border-color - цвет всех линий рамки.

стиль рамки

Имена содержащие border и style определяют стиль линии рамки.

 border-top-style - стиль верхней линии рамки;


 border-right-style - стиль правой линии рамки;
 border-left-style - стиль левой линии рамки;
 border-bottom-style - стиль нижней линии рамки;
 border-style - стиль всех линий рамки.

Доступны следующие значения:

 none или hidden - скрыть рамку;


 dotted - пунктирная рамка из точек;
 dashed - пунктирная рамка из черточек;
 solid - сплошная линия;
 double - двойная линия;
 groove - углубленная рамка;
 ridge - ребристая линия;
 inset - выпуклая линия;
 outset - вогнутая рамка.

общая настройка линий рамки

 border-top - параметры верхней линии рамки;


 border-right - параметры правой линии рамки;
 border-left - параметры левой линии рамки;
 border-bottom - параметры нижней линии рамки;
 border - параметры всех линий рамки.

Примеры
border-top-width: 50px;
border-right-width: thin;
border-width: 50px 50px 50px 50px;
border-top-color: #f00;
border-color: #f00;
border-style: dotted;
border: medium #f00 double;
border-top: medium #f00 double;

Позиция и размеры элемента


позиция

 position - задает способ расположения элемента, может принимать одно из двух значений:
o fixed - координаты относительно окна браузера;
o relative - координаты относительно относительно родительского элемента;
o absolute - координаты относительно первого родительского элемента с
позиционированием отличным от static;
o static - позиционирование обычным образом, значение по умолчанию.
 left - x координата верхнего левого угла элемента;
 top - y координата верхнего левого угла элемента;
 right - x координата нижнего правого угла элемента;
 bottom - y координата нижнего правого угла элемента;
 z-index - z координата элемента. Это позволяет накладывать элементы друг на друга,
создавать слои. (пример наложения).

позиция через выравнивание

 text-align - горизонтальное выравнивание содержимого. Возможны следующие значения:


o justify - по ширине;
o left - влево;
o right - вправо;
o center - по центру по горизонтали;
 vertical-align - вертикальное выравнивание содержимого. Численное значение указывает
на сколько поднять/опустить элемент относительно текущей позиции. Также доступны
строковые значения:
o top- наверх;
o bottom - вниз;
o middle - в середину.

размеры

 width - ширина элемента;


 height - высота элемента;
 min-width, max-width - минимальная и максимальная ширина элемента;
 min-height, max-height - минимальная и максимальная высота элемента.

когда содержимое больше элемента

 overflow - определяет поведение, содержимое перекрывает бокс элемента. Возможны


следующие значения:
o auto;
o hidden - скрыть;
o scroll - прокручивать;
o visible - отображать;
o inherit - наследовать значение.
 clip - позволяет указать видимый прямоугольник дочернего элемента, когда его размеры
больше родительского элемента при абсолютном позиционировании. Обычно
используется с изображениями. Стиль не работает если определено "overflow:visible".
Прямоугольник указывается как rect (верх, право, низ, лево).
 img {
 position:absolute;
 clip:rect(0px,200px,200px,0px);
}

Примеры
position: absolute;
top: 100px;
width: 50%; /*в половину экрана или родительского элемента*/
z-index: 3; /*третий элемент по оси Z*/
text-align: left;
vertical-align: 2%;
vertical-align: top;
Плавающие элементы
Элементы обозначенные как плавающие не имеют четкой позиции и отображаются на той
же линии, что и следующий обычный элемент. Ширину таких элементов надо
указывать явно. С помощью них добиваются таких эффектов как наложение элементов,
обтекание текста вокруг другого элемента, разбиение текста на колонки.

где плавать

Свойства float определяет с какой стороны будет плавать элемент, относительно


следующих. Может принимать следующие значения:

 left - слева;
 right - справа;
 none - нет.

сброс поплавков

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

 both - элемент будет ниже всех всплывающих элементов, определенных ранее;


 left - верхняя линия рамки элемента должна быть под нижней линией рамки любого
плавающего слева элемента определенного ранее;
 right - аналогично предыдущему для элементов плавающих справа.

Обтекание и наложение текста на изображение


Пусть имеется xhtml код

<img id=picture src="logo01.gif" alt="test"/>


<p>Здесь много много какого-то текста...</p>

Без стилей текст будет под изображением. Чтобы получить обтекание текста
добавляется стиль:

#picture {float:left;}

Если необходимо наложить текст на изображение, то изображение помещается в блок


div

<div id=picture>
<img src="logo01.gif" alt="test" />
</div>
<p>Здесь много много какого-то текста...</p>

а в стиле блока дополнительно указать ширину элемента, например 0. Если же


указать реальную ширину элемента, то опять получим обтекание.
#picture {
float:left;
width:20px;
}
Здесь много много много текста, ну
просто очень много текста

Подобным образом накладываются любые элементы друг на друга. Относительно


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

<div style="width:238px;
height: 110px;
background-image: Здесь много много много текста
url(../../res/logo01.gif);">
Здесь много много много текста
</div>

Если вы ориентируетесь на IE, то для наложения первый способ не подойдет, там


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

<div>
<img src="../../res/logo01.gif"
style="position:absolute; z-index:-1;"
alt="test" />
Здесь много много много текста,
ну просто очень много текста
</div>
Здесь много много много текста,
ну просто очень много текста

Разбиение на столбцы
Разбить содержимое на столбцы можно как элементом table, так и css свойством float.

В последнем случае сумма значений width не равна 100%, чтобы в первом столбце можно
было задать внутренний отступ.

<div style= много текста много текста много текста много текста много текста много текста
"float:
left; width:
много текста много текста много текста много текста много текста много текста
30%; много текста много текста много текста много текста много текста много текста
padding- много текста много текста много текста много текста много текста много текста
right:
25px;"> много текста много текста много текста много текста много текста много текста
много текста
много текста другой текст другой текст другой текст другой текст другой текст другой текст
много текста другой текст другой текст другой текст другой текст другой текст другой текст
много текста
много текста другой текст другой текст другой текст другой текст другой текст другой текст
много текста другой текст другой текст другой текст другой текст другой текст другой текст
много текста другой текст другой текст другой текст другой текст другой текст другой текст
много текста
много текста другой текст
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
много текста
</div>
<div style=
"float:
left; width:
60%">
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
другой текст
</div>

Настройка ссылок
Для настроек специфических свойств ссылок используются псевдоклассы CSS link, visited,
hover, active. При формирования закладок (типа <a name="ddd">) в html часто тег a не
закрывают. А значит стиль применятся к последующим элементам. Поэтому закладки
лучше закрывать.

Примеры
/*не посещенная ссылка*/
a:link {color: red;}

/*посещенная ссылка*/
a:visited {color: blue;}

/*перемещение мышки над ссылкой*/


a:hover {color: yellow;}

/*активная ссылка*/
a:active {color: lime;}

Настройка списка
Данные свойства применяются к элементам определенных как элемент списка, т.е. для
элеметов li и для элементов со стилем display: item-list.

стиль маркера элемента списка

Свойство list-style-type определяет вид маркера списка. Может принимать одно из


следующих значений:

 disc - диск;
o circle - кружок;
 square - квадрат;
4. decimal - цифра;
v. lower-roman - маленькая римская цифра;
VI. upper-roman - большая римская цифра;
g. lower-alpha - маленькая латинская буква;
H. upper-alpha - большая латинская буква.

изображение маркера элемента списка

Задается свойством list-style-image. Если изображения нет, можно указать значение none.

перенос текста в списке

Свойство list-style-position определяет отступ при переносе текста Может принимать одно
из следующих значений:
 inside - не делать перенос;
(следующая строка под маркером)
 outside - делать перенос.
(следующая строка под первым символом)

общая настройка элемента списка

Задается свойством list-style.

Примеры
list-style-type: disc;
list-style-image: url(mypic.png);
list-style-position: inside;
list-style: disc inside;

Видимость элемента
Свойство visibility определяет видимость элемента на странице. Может принимать одно из
следующих значений:

 visible - виден;
 hidden - скрыт;
 inherit - определяется видимостью родительского элемента.

В отличие от display:none, это свойство не отключает генерацию бокса, а значит появится


"пустое место" между элементом определенным до невидимого элемента, и элементом,
определенным после.

<div>Element before</div>
<div style="visibility: visible;"> Element before
<br/>
<br/>
<br/>
<br/>
</div>
<div>Element after</div>
Element after
<div>Element before</div>
<div style="display: none;">
<br/>
<br/> Element before
<br/> Element after
<br/>
</div>
<div>Element after</div>

Выпадающее меню
Возможности CSS позволяют создать простое меню с выпадающими списками
практически без применения JavaScript. Во фрейме приведена страница с подобным меню.
Данный пример тестировался в Mozilla Firefox и Internet Exlorer версий 6 и 7.

Для лучшего понимания оставлен минимальный набор стилей, необходимый для


функционирования такого меню.
К сожалению IE6 все еще является одним из популярных браузеров и игнорировать его
рано. Но он не поддерживает некоторые псевдоклассы CSS2, и только для него нам
понадобится небольшой скрипт.

код страницы с меню

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">


<!-- текст заголовка и меню нашего HTML документа -->
<html>
<head>
<title></title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251">
<meta name="author" content="DarkRaha (Verma Rahul)">

<!-- стили для нашего меню -->


<link rel="stylesheet" type="text/css" href="menudemo.css">

<!-- только для поддержки IE6 -->


<script type="text/javascript" src="menuevent.js"></script>

</head>
<body onload="correctMenuIE6();"> <!-- onload только для поддержки IE6 -->

<!-- определение меню, для этого были использованы списки -->


<ul id="mainMenu">
<li>Api
<ul class="submenu">
<li><a href="#OpenGl">OpenGl</a>
<li><a href="#wxWdigets">wxWidejts</a>
<li><a href="#SamrtWin">SamrtWin</a>
</ul>
<li>Web
<ul class="submenu">
<li><a href="#HTML">HTML</a>
<li><a href="#JavaScript">JavaScript</a>
</ul>
</ul>
<br>
...
определение стиля меню

/* описание главного меню */


#mainMenu {
list-style:none; /* отключаем маркеры */
background: #DEB887; /* фон меню */
}

/*общее описание всех элементов меню */


#mainMenu li{
background: #DEB887;

/*чтобы элементы главного меню отображались в ряд */


display: inline;
float: left;
width: 100px;
margin: 0;

text-align: center;
}
/*описание выпадающих меню */
.submenu {
/*по умолчанию все выпадающие меню скрыты
и позиционируются абсолютно */
display: none;
position:absolute;
background: #DEB887;

/* следующие определения необходимы


только для IE (6 и 7) */
margin: 0; /* убираем отступы*/
left:0; /* иначе выпадающий список будет сдвинут
в сторону, относительно родительского элемента*/
top: 100%; /* чтобы выпадающий список отображался под
родительским, иначе родительский будет закрыт
первым элементом*/
}

/* при наведении на элемент меню


мы будем отображать соответствующее ему
выпадающее меню*/
#mainMenu li.hover .submenu, /*для IE6*/
#mainMenu li:hover .submenu {
display: block;
list-style:none;
padding: 0;
}

/* при наведении на любой элемент меню,


и в главном меню и выпадающих меню,
делаем подсветку и определяем позиционирование
в относительные координаты */
#mainMenu li.hover, /*для IE6*/
#mainMenu li:hover {
position: relative;
background: #FFE4B5
}

/* настройка ссылок входящих в меню*/


#mainMenu a,
#mainMenu a:link,
#mainMenu a:visited {
text-decoration:none;
color: #000080;
}
js код коррекции меню для IE6

function correctMenuIE6(){
// если не IE то ничего не делаем (хотя в IE7 тоже все работает)
if(navigator.appName!='Microsoft Internet Explorer') return;

// выбераем все элементы <li> вложенные в главное меню


var nodes = document.getElementById("mainMenu").
getElementsByTagName("li");

// используем то, что в свойстве className


// можно задать несколько классов сразу через пробелы
for (var i=0; i<nodes.length; i++) {
// устанавливаем обработчик
// при наведении добавляем к имени класса hover
// и тогда к нему применятся стили
nodes[i].onmouseover = function() {
this.className += " hover";
}

// устанавливаем обработчик
// когда курсор мыши покидает элемент
// из имени класса удаляем hover
nodes[i].onmouseout = function() {
this.className = this.className.replace(" hover", "");
}
}
}

Настройка таблицы
рамочная модель

Рамочная модель задается свойством border-collapse, которое может прнимать два


значения:

 раздельная (separate) - определяет рамку вокруг каждой ячейки. В этом случае можно
использовать стили border-spacing и empty-cells;
 свертываемая (collapsing) - позволяет определить полную или часть рамки для различных
элементов таблицы: ячейки, столбцы и их группы, строки и их группы, таблица в целом. В
этом случае можно определять стили рамок также как для боксовой модели (стили
border*).

видимость пустых ячеек

Задается свойством empty-cells, которое может принимать одно из двух значений:

 hide - скрыть;
 show - отображать.

расстояние между линиями рамки

Задается свойством border-spacing.

стиль линий рамки

Задается свойством border-style стиль рамки таблицы, может принимать одно из


следующих значений:

 none - нет рамки;


 hidden - как none, но в свертываемой модели запрещает другие рамки;
 dotted - точечный пунктир;
 dashed - пунктир из черточек;
 solid - сплошная линия;
 double - две сплошных линии;
 groove - вогнутая рамка;
 ridge - выгнутая рамка;
 inset - в разделяемой модели полный бокс будет выглядеть углубленным, в свертываемой
как ridge;
 outset - в разделяемой модели полный бокс будет выглядеть выпуклым, в свертываемой
как groove.
стили столбцов таблицы

Используя элементы col, можно задать только следующие стили для столбцов таблицы:

 border* - свойства линий рамки или ее сторон, только в свертываемой модели;


 background-color - цвет фона ячеек столбца, если цвет не был задан в строке или ячейке
явно;
 width - минимальная ширина столбца;
 visibility - значение collapse скрывает столбец.

псевдоклассы для таблиц

Поддержка некоторыми браузерами псевдоклассов :first-child из CSS2 и :last-child, :nth-


child(n) из CSS3 позволяет назначить сложные стили для столбцов. Например для
следующей таблицы с классом tbldemo определены такие стили

/*второй столбец делаем зеленым*/


.tbldemo td:first-child + td
{text-align:center; color:green;}

/*последний столбец делаем синим*/


.tbldemo td:last-child
{text-align:center; color:blue;}

/*четвертый столбец делаем зеленым*/


.tbldemo td:nth-child(4)
{text-align:center; color:green;}

Если соответствующие столбцы таблицы черного цвета, значит браузер не поддерживает


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

1-1 1-2 1-3 1-4 1-5

2-1 2-2 2-3 2-4 2-5

3-1 3-2 3-3 3-4 3-5

4-1 4-2 4-3 4-4 4-5

5-1 5-2 5-3 5-4 5-5

Устройства
С помощью правила @media css позволяет определить индивидуальные свойства в
зависимости от используемого устройства. Распознаются следующие устройства:

 all - любое устройство;


 aural - разговорное устройство или синтезатор звука;
 braille - тактильные устройства для слепых;
 embossed - для страничных тактильных принтеров;
 handheld - портативное устройство;
 print - принтер;
 projection - проектор;
 screen - экран компьютера;
 tty - устройство отображающее символы фиксированного размера, как терминалы;
 tv - телевизионное устройство.

@media screen, print {


p {font-family: arial; }
}

@media tty {
p {font-family: "Curier New"; }
}