Стили Css

img {margin-bottom: 10px; margin-top: 10px; margin-left: 25px}

h3 {margin: 0; margin-bottom: 5px; margin-left: 25px}

.zcer18 {color: #0000; font-size:18pt; font-weight:bold; text-align: center;}

P {

border: 1px solid red; /* Толщина рамки в пикселах,

тип границы (в данном случае сплошная линия) и

цвет линии */

padding: 5px; /* Расстояние от текста до рамки */

}

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

<HTML>

<HEAD>

<TITLE>страница</TITLE>

</HEAD>

<BODY>

страница

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>страница</TITLE>

<!--

H1 { color: red }

-->

</STYLE>

</HEAD>

<BODY>

<H1>Моя домашняя страница</H1>

<P>Добро пожаловать!</P>

</BODY>

</HTML>

<table class="obzhayatabl" CELLSPACING="0" CELLPADDING="0" ALIGN=center>

<tr>

<td class="obzhayatd">

Общая

</td>

</tr>

</table>

Параметры CSS.

Таблица 2.1. Директивы языка CSS

@charset Задает кодировку символов.

@font-face Задает описания шрифтов.

@import Включает другую таблицу стилей в текущую.

@media Задает имена устройств отображения.

@page Задает свойства страницы для печати.

Примеры директив:

@import "subs.css";

@media print {

BODY { font-size: 10pt }

H1 {

font-weight: bold; /* жирность шрифта */

font-size: 12pt; /* размер шрифта */

font-family: Helvetica; /* название шрифта */

font-variant: normal; /* вариант шрифта */

font-style: normal /* стиль шрифта */

}

in дюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик)

cm сантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки)

mm миллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки)

pt точки (1 точка = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм)

pc пики (1 пика = 12 точек = 1/6 дюйма = 0.423 см = 4.23 мм)

ССЫЛКИ

H1 { border-left-width: 10px

свойств border-top-width, border-bottom-width, border-left-width и border-right-width. Оно задает размер всех рамок объемлющего прямоугольника одновременно.

A:link {

text-decoration: none /* Убирает подчеркивание для ссылок */

}

A:visited { text-decoration: none }

A:active { text-decoration: none }

A:hover {

text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */

color: red /* Цвет ссылки */

}

</style>

text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */

color: red /* Цвет ссылки */

A:hover {

font-size: 24px; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

color: red /* Цвет ссылки */

}

A:hover { color: red; text-decoration: underline }

.link { color: blue }

A.link1 { font-size: 12px; color: green }

A.link2 { font-size: 14px; color: blue }

<p><a href="link1.html">Ссылка 1</a></p>

<p><a href="link2.html" class="link1">Ссылка 2</a></p>

A {

text-decoration: none; /* Убираем подчеркивание у ссылок */

padding: 3px; /* Поля вокруг текста ссылки */

white-space: nowrap /* Нет переноса текста */

}

A:hover {

background: url('/images/arrow.gif') /* */

0px 1.1em /* Смещение рисунка по горизонтали и вертикали */

repeat-x /* Повторение фона по горизонтали */

}

</style>

ФОН И ЦВЕТ.

P { color: navy; background-color: yellow }

H1 { color: #fc0 }

P { color: #F9E71A; background-color: #98560F }

P { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%) }

BODY {

background-color: #98560F; /* Цвет фона */

}

BODY {

background-repeat: repeat-y /* Повторение фона по вертикали */

}

background-attachment: fixed; /* Фиксируем фон */

background-repeat: no-repeat; /* Отменяем повторение фона */

background-position: right bottom /* Положение фона */

}

ТЕКСТ

B жирный шрифт

i курсив

H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light }

Интерлиньяж (межстрочный интервал) line-height: normal

line-height: 1.5

line-height: 12px

line-height: 120%

text-decoration none

underlineПодчеркивание

overline Линия над текстом

line-through Перечеркивание

blink Мигание текста

Убрать все оформление text-decoration: none

text-align: justify

выравнивание по ширине

Отступ первой строки text-indent:15px;

text-indent:10%

СПИСКИ.

UL {

list-style: square; /* Маркеры в виде квадрата */

list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */

color: navy /* Цвет текста списка */

}

</style>

<body>

<ul>

<li>Заголовок должен быть короче трех строк.</li>

<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>

<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>

<ul>

</body>

LI {

list-style-image: url('images/check.gif') /* Путь к файлу с маркером */

}

</style>

ВИД КУРСОРА.

.movelink { cursor: move }

.helplink { cursor: help }

</style>

</head>

<body>

<a href="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a>

<br>

<a href="mypage.htm" class="helplink">СПРАВКА</a>

</body>

body { cursor: ne-resize }

</style>

</head>

<body>

<a href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a>

<br>

<a href="mypage.htm">СПРАВКА</a>

</body>

.help { cursor: help }

</style>

</head>

<body>

<span class="cross">На этом тексте курсор мыши примет вид перекрестья.</span>

<br>

<a href="help1.htm" class="help">СПРАВКА 1</a><br>

<a href="help2.htm" class="help">СПРАВКА 2</a><br>

<a href="help3.htm" class="help">СПРАВКА 3</a>

</body>

еденицы измерения.

.em, .ex, .px, .percent { font-family: Verdana, Arial, sans-serif }

.em { font-size: 2em }

.ex { font-size: 2ex }

.px { font-size: 30px }

.percent { font-size: 200% }

</style>

</head>

<body>

<span class="em">Размер в em</span>

<span class="ex">Размер в ex</span>

<span class="px">Размер в пикселах</span>

<span class="percent">Размер в процентах</span>

<style>

.in, .mm, .pt { font-family: Verdana, Arial, sans-serif }

.in { font-size: 0.5in }

.mm { font-size: 8mm }

.pt { font-size: 24pt }

</style>

</head>

<body>

<span class="in">Размер в дюймах</span>

<span class="mm">Размер в миллиметрах</span>

<span class="pt">Размер в пунктах</span>

</body>

ПОДЧЕРКИВАНИЕ

.underline {

border-bottom: 1px dashed blue /* Добавляем пунктирную линию под текстом */

}

</style>

</head>

<body>

<span class="underline">Динамический HTML</span> - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

</body>

ACRONYM {

border-bottom: 1px dashed blue; /* Подчеркивание текста */

color: maroon /* Цвет текста */

}

</style>

</head>

<body>

<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.</p>

</body>

ЛИНИИ

P.line {

border-left: solid 2px black; /* Линия слева от текста */

margin-left: 20px; /* Отступ слева от края до текста */

padding-left: 7px /* Расстояние от линии до текста */

}

</style>

.line {

border-bottom: 1px dotted blue

}

</style>

</head>

<body>

<p><span class="line">Lorem ipsum dolor sit amet</span>

ОТСТУПЫ

BODY {

margin: 0px; /* Убираем отступы */

padding: 0px; /* Убираем поля */

margin-top: 10px /* Добавляем отступ сверху */

}

</style>

ТАБЛИЦА ФОН

background: maroon; /* Цвет фона таблицы */

color: white /* Цвет текста */

}

TD {

background: navy /* Цвет фона ячеек */

}

</style>

</head>

<body>

<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>

<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>

</table>

TABLE {

background: white; /* Цвет фона таблицы */

color: white /* Цвет текста */

}

TD, TH {

background: maroon; /* Цвет фона ячеек */

padding: 5px /* Поля вокруг текста */

}

</style>

</head>

<body>

<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>

<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>

</table>

Пример 3. Добавление двойной рамки

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

<html>

<head>

TABLE {

background: #dc0; /* Цвет фона таблицы */

border: 5px double #000 /* Рамка вокруг таблицы */

}

TD, TH {

padding: 5px; /* Поля вокруг текста */

border: 1px solid #fff /* Рамка вокруг ячеек */

}

</style>

</head>

<body>

<table>

<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>

<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>

</table>

</body>

</html>

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

TABLE {

border-collapse: collapse; /* Убираем двойные границы между ячейками */

background: #dc0; /* Цвет фона таблицы */

border: 4px solid #000 /* Рамка вокруг таблицы */

}

TD, TH {

padding: 5px; /* Поля вокруг текста */

border: 2px solid green /* Рамка вокруг ячеек */

}

</style>

Пример 5. Выравнивание содержимого ячеек по горизонтали

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

<html>

<head>

TABLE {

border-collapse: collapse; /* Убираем двойные линии между ячейками */

width: 300px /* Ширина таблицы */

}

TH {

background: #fc0; /* Цвет фона ячейки */

text-align: left /* Выравнивание по левому краю */

}

TD {

background: #fff; /* Цвет фона ячеек */

text-align: center /* Выравнивание по центру */

}

TH, TD {

border: 1px solid black; /* Параметры рамки */

padding: 4px /* Поля вокруг текста */

}

</style>

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

<html>

<head>

TABLE {

border-collapse: collapse; /* Убираем двойные линии между ячейками */

width: 300px /* Ширина таблицы */

}

TH, TD {

border: 1px solid black; /* Параметры рамки */

text-align: center; /* Выравнивание по центру */

padding: 4px /* Поля вокруг текста */

}

TH {

background: #fc0; /* Цвет фона ячейки */

height: 40px; /* Высота ячеек */

vertical-align: bottom; /* Выравнивание по нижнему краю */

padding: 0px /* Убираем поля вокруг текста */

}

</style>

Пример 1. Создание таблицы без рамки

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border-bottom: 2px solid maroon; /* Линия внизу таблицы */

background: lemonchiffon /* Цвет фона таблицы */

}

TH {

background: maroon; /* Цвет фона заголовка */

color: white; /* Цвет текста */

text-align: left /* Выравнивание по левому краю */

}

TD, TH {

padding: 3px /* Поля вокруг текста */

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td>Рубины</td>

</tr>

<tr>

<td>Изумруды</td>

</tr>

<tr>

<td>Сапфиры</td>

</tr>

</table>

Пример 1. Применение горизонтальных линий

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border-top: 2px solid #000; /* Линия сверху таблицы */

border-bottom: 2px solid #000 /* Линия внизу таблицы */

}

TD, TH {

padding: 3px /* Поля вокруг содержимого ячеек */

}

TH {

text-align: left; /* Выравнивание текста по левому краю */

border-bottom: 1px solid #000 /* Линия под верхним заголовком */

}

</style>

Пример 2. Использование линий в таблице

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

<html>

<head>

TABLE {

width: 300px /* Ширина таблицы */

}

TD, TH {

padding: 3px /* Поля вокруг содержимого ячеек */

}

TH {

text-align: left; /* Выравнивание по левому краю */

border-bottom: 1px solid #000 /* Линия снизу */

}

.vl {

border-right: 1px solid #000 /* Линия справа */

}

</style>

Пример 1. Создание рамки вокруг таблицы

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border: 1px solid black /* Рамка вокруг таблицы */

}

TD, TH {

padding: 3px /* Поля вокруг содержимого ячеек */

}

TH {

text-align: left; /* Выравнивание по левому краю */

background: black; /* Цвет фона */

color: white /* Цвет текста */

}

</style>

Пример 2. Таблица с выравниванием содержимого ячеек

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border: 2px solid black; /* Рамка вокруг таблицы */

background: silver /* Цвет фона таблицы */

}

TD, TH {

text-align: center; /* Выравнивание по центру */

padding: 3px /* Поля вокруг содержимого ячеек */

}

TH {

background: steelblue; /* Цвет фона */

color: white; /* Цвет текста */

border-bottom: 2px solid black /* Линия снизу */

}

.lc {

font-weight: bold; /* Жирное начертание текста */

text-align: left /* Выравнивание по левому краю */

}

</style>

Рис. 4. Заготовка для создания фона

Для добавления фона только к одной строке таблицы имеется несколько способов. Можно воспользоваться тегом <THEAD>, который предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Для этого тега добавляем стилевой параметр background, он одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость (пример 3).

Пример 3. Использование фонового рисунка

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border: 2px solid seagreen /* Рамка вокруг таблицы */

}

THEAD {

background:

seagreen /* Цвет фона */

url('images/bg.gif') /* Путь к фоновому изображению */

repeat-x /* Повторять фон только по горизонтали */

}

TD, TH {

padding: 3px; /* Поля вокруг содержимого ячеек */

text-align: center /* Выравнивание по центру */

}

.lc {

font-weight: bold; /* Жирное начертание текста */

text-align: left /* Выравнивание по левому краю */

}

</style>

Пример 1. Создание сетки

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border-collapse: collapse /* Убираем двойные линии между ячейками */

}

TD, TH {

padding: 3px; /* Поля вокруг содержимого таблицы */

border: 1px solid black /* Параметры рамки */

}

TH {

background: powderblue /* Цвет фона */

}

</style>

Пример 2. Таблица без внешней рамки

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

<html>

<head>

BODY {

background: white /* Цвет фона веб-страницы */

}

TABLE {

width: 300px; /* Ширина таблицы */

border-collapse: collapse; /* Убираем двойные линии между ячейками */

border: 2px solid white /* Прячем рамку вокруг таблицы */

}

TD, TH {

padding: 3px; /* Поля вокруг содержимого таблицы */

border: 1px solid maroon; /* Параметры рамки */

text-align: left /* Выравнивание по левому краю */

}

</style>

Пример 1. Колонки разного цвета

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

<html>

<head>

TABLE {

width: 300; /* Ширина таблицы */

border: 2px solid black; /* Рамка вокруг таблицы */

background: lightslategray; /* Цвет фона */

color: white /* Цвет текста */

}

TD, TH {

text-align: center; /* Выравнивание по центру */

padding: 3px /* Поля вокруг текста */

}

TH {

color: white; /* Цвет текста */

border-bottom: 4px double black /* Двойная линия снизу */

}

.even { /* Стиль для четных колонок */

background: moccasin; /* Цвет фона */

color: black /* Цвет текста */

}

.lc { /* Стиль для первой колонки */

text-align: left; /* Выравнивание по левому краю */

color: lemonchiffon /* Цвет текста */

}

</style>

Рис. 2. Выделение колонок с помощью линий и цвета

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем параметр border-left, он создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, этот атрибут уберет лишние границы (пример 2).

Пример 2. Линии между колонками

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border: 1px solid black /* Рамка вокруг таблицы */

}

TD, TH {

text-align: center; /* Выравнивание по центру */

padding: 3px /* Поля вокруг текста */

}

TH {

color: white; /* Цвет текста */

background: goldenrod /* Цвет фона */

}

TD {

border-left: 1px dashed black /* Линия слева от ячейки */

}

.even { /* Стиль для четных колонок */

background: gainsboro /* Цвет фона */

}

.lc { /* Стиль для первой колонки */

text-align: left; /* Выравнивание по левому краю */

border: none /* Нет лишних линий */

}

</style>

Пример 1. Разделение строк таблицы линиями

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

border: 1px solid black; /* Рамка вокруг таблицы */

border-bottom: none /* Убираем линию снизу */

}

TD, TH {

padding: 3px /* Поля вокруг содержимого ячеек */

}

TH {

text-align: left; /* Выравнивание по левому краю */

background: black; /* Цвет фона */

color: white; /* Цвет текста */

border: 1px solid white /* Рамка вокруг ячеек */

}

TD {

border-bottom: 1px solid black /* Линия снизу */

}

</style>

Пример 2. Выделение строк таблицы цветом

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

<html>

<head>

TABLE {

width: 300px; /* Ширина таблицы */

background: cornsilk; /* Цвет фона нечетных строк */

border: 1px solid brown; /* Рамка вокруг таблицы */

border-collapse: collapse /* Убираем двойные линии между ячейками */

}

TD, TH {

padding: 3px /* Поля вокруг содержимого ячейки */

}

TD {

text-align: center; /* Выравнивание по центру */

border-bottom: 1px solid brown /* Линия внизу ячейки */

}

TH {

background: brown; /* Цвет фона */

color: white /* Цвет текста */

}

TR.even {

background: ivory /* Цвет фона четных строк */

}

.la {

text-align: left /* Выравнивание по левому краю */

}

</style>