8.Оформление таблиц с помощью css.

Вид HTML таблицы может быть значительно улучшен с помощью CSS.

Чтобы указать границы таблиц в CSS, используйте свойство border.

Пример ниже указывает черную границу для элементов table, th, и td:

Пример

table,th,td

{ border:1px solid black; }

Таблица в примере выше имеет двойные границы, потому, что как элемент table, так и элементы th/td - имеют отдельные границы.

Свойство border-collapse устанавливает, будут ли границы таблицы свернуты в одинарную границу, или будут отображаться отдельно:

Пример

table

{ border-collapse:collapse; }

table, td, th

{ border:1pxsolidblack;}

Ширина и высота таблицы определяются с помощью свойств width и height.

Пример ниже устанавливает ширину таблицы в 100%, и высоту элементов th в 50px:

Пример

table

{ width:100%; }

th

{ height:50px; }

Текст в таблице выравнивается с помощью свойств text-align и vertical-align.

Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (right), или по центру (center):

Пример

td

{text-align:right;}

Свойство vertical-align устанавливает вертикальное выравнивание, например, по верху (top), по низу (bottom), или по середине (middle):

Пример

td

{ height:50px;

vertical-align:bottom; }

Свойство Padding Таблицы

Чтобы контролировать пространство между границей и содержанием в таблице, используйте свойствоuse padding в элементах td и th:

Пример

td

{ padding:15px;}

Цвет Таблицы

Пример ниже указывает цвет границ, текста и фона элементов th:

Пример

table, td, th

{ border:1px solid green; }

th

{ background-color:green;

color:white; }

9.Оформление списков с помощью css.

CSS свойства списка позволяют вам:

-Устанавливать различные маркеры пунктов списка для упорядоченных списков

- Устанавливать различные маркеры пунктов списка для неупорядоченных списков

-Устанавливать изображение в качестве маркера пункта списка

В HTML существует два типа списков:

-неупорядоченные списки - пункты списка помечаются маркерами

-упорядоченные списки - пункты списка помечаются числами или буквами

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

Тип маркера для пункта списка указывается с помощью свойства list-style-type:

Пример

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.

Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:

Пример

ul

{ list-style-image:url('sqpurple.gif'); }

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

Пример

ul{

list-style-type:none;

padding:0px;

margin:0px;

}

li{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

Объяснение примера:

Для ul:

-Установка list-style-type в none - чтобы удалить маркер пункта списка

-Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)

Для li:

-Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)

-Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)

-Установка левого отступа для текста в списке

Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством - list-style:

ul

{ list-style:squareurl("sqpurple.gif"); }

При использовании стенографического свойства порядок значений таков:

list-style-type

list-style-position

list-style-image

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

Все CSS Свойства Списка:

list-style: устанавливает все свойства списка в одном объявлении

list-style-image: устанавливает изображение в качестве маркера пункта списка

list-style-position: указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания

list-style-type: указывает тип маркера пункта списка