Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size

Свойство	Описание значения
font-family	Указыватся до трех шрифтов, через запятую: serif\|san-serif \|cursive \|fantasy \| monospace.
font-style	начертания: normal (по умолчанию), italic (курсив), oblique (наклонный).
font-variant	варианты начертания: normal (по умолчанию), small-caps (все буквы заглавные уменьшенного размера).
font-weight	жирность шрифта: normal , bold, bolder(жирный), lighter(бледный).
font-size	размер шрифта в абсолютных: (константы xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| {Абсолютный размер} или в относительных единицах или процентах: larger \| smaller \| {Отн. размер}%;

Например, вот описание свойств шрифта для <p>:

<head>

p {

font-style: italic;

font-variant:normal;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

</style>

</head>

<body>

<p>Это текст, выведенный с указанными фонтами</p>

<body>

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

p { font: italic normal bold 30px arial, sans-serif; }

Порядок свойств font здесь таков:

font-style|font-variant|font-weight|font-size|font-family

Свойство font-family определяет название шрифта или семейства шрифтов для отображения документа. Обычно указывается несколько шрифтов, через запятые, чтобы выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура (семейство) шрифтов: serif(Times New Roman, Georgia); sans - serif(Arial, Verdana); monospace(моноширинные Courier, Courier New).

Пример:

<html>

<head>

<title>Установка шрифта с помощью стилей</title>

body {

font-family: “Times New Roman”, times, serif;/* шрифты*/

font-size: 100%; /* Размер шрифта для основного текста */

font-style: oblique;}

th {

font-family: arial, sans-serif; /* Семейства шрифтов*/

font-size: 90%; /* Размер шрифта для заголовка таблицы */

font-weight: bold /* Полужирная насыщенность*/

}

h1, h2, h3 {

font-family: verdana, tahoma, arial, sans-serif /*шрифты*/

}

#cursive { font-style: italic} /* Курсивный текст */

</style>

</head>

<body>

<div id=”cursive”>Курсивный текст</div>

<h1>Заголовок1</h1>

<h2>Заголовок2</h2>

<h3>Заголовок3</h3>

<table>

<th>Таблица</th>

</table>

</html>

Результат:

Курсивный текст

Заголовок1

Заголовок2

Заголовок3

Таблица

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

Пример:

body {

@font-face: Myfont;

src: url(“http://www.atlant.ru/Myfont.eot”);

}

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

Свойство	Описание значения
text-decoration	none (по умолчанию), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание).
text-transform	регистр букв: none, capitalize (Первая Буква Слова Преобразуется В Заглавную), uppercase (все в заглавные), lowercase (все в строчные).
text-align	Горизонтальное выравнивание текста: left (по умолчанию), right (по правому краю), center центрирование, justify (по ширине колонки).
vertical-align	Вертикальное положение базисной линии элемента: baseline, middle, sub – элемент подстрочный, super – элемент надстрочный, text-top – выравнивает верх элемента по верху шрифта родительского элемента , text-bottom – выравнивает низ по низу шрифта родительского элемента, top – выравнивает вершину по самому высокому элементу линии, bottom – выравнивает низ элемента по самому низкому элементу.
text-indent	{Отступ}\|{Отступ}%; Устанавливает величину отступа в первой строке параграфа абсолютной величиной или в процентах.
line-height	Задает вертикальное расстояние между строками текста. normal\|{Y}\|{Y}%; Высота может быть задана абсолютной величиной или процентом от высоты родителя.
word-spacing	Определяет дополнительное расстояние между словами в тексте. normal\|{Величина}; Значение атрибута может быть задано либо абсолютной величиной, либо предопределенным значением normal.
letter-spacing	Определяет расстояние между символами в тексте: normal\|{Величина};
word-wrap	normal\|break-word; Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам. normal – запрещает переносить строки по словам, break-word – разрешает.
white-space	Устанавливает, как отображать пробелы между словами: normal, nowrap – пробелы не учитываются; pre – текст показывается с учетом пробелов и переносов, как в коде HTML; pre-line – пробелы и переносы не учитываются; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – наследует значение родителя.

Рассмотрим пример. Свойство text-indent - определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0. Свойство text-align - выравнивает текст в блоке содержимого элемента.

<html>

<head>

p { text-indent: 3em ;}

div { text-align: center;}

</style>

</head>

<body>

<p>Создание отступа с помощью параметра text-indent.</p>

<div>Выравнивание текста с помощью свойства text-align.</div>

</body>

</html>

В следующем примере рассматривается свойство vertical-align для создания нижних и верхних индексов

<html>

<head>

<title> Использование стилей для управления индексами </title>

.sup {

vertical-align: super; /* Сдвигаем текст вверх */

font-size: 70% ; /* Уменьшаем размер шрифта */

}

.sub {

vertical-align: sub; /* Сдвигаем текст вниз */

font-size: 70%;

}

</style>

</head>

<body>

<div>

f(х) = a<span class="sub">0</span> + a<span class="sub">1</span> x + ... + a

<span class="sub">n-1</span> x<span class="sup">n-l</span> + a

</div>

<p>Полуторный интервал</p><br>

Установка полуторного межстрочного интервала.

</body>

</html>

Результат:

f(х) = a0 + a1 x + ... + a n-1 xn-l + a n xn

Полуторный интервал

Установка полуторного межстрочного интервала.

Свойство text-decoration - определяет оформление текстового элемента в виде подчеркивания (underline), надчеркивания (overline) или перечеркивания текста (line_through). По умолчанию никакого оформления текста не производится (none). Пример:

<html>

<head>

a {

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

}

</style>

</head>

<body>

<a href=link.html>Ссылка без подчеркивания</а>

</body>

</html>

Пример letter-spacing - определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.

<html>

<head>

<title> Изменение межбуквенного интервала в тексте</title>

</head>

<body>

<р>Интервал, установленный по умолчанию</р>

<р styles ="letter-spacing: 0.3em">Очень большой интервал</р>

<р style = "letter-spacing: 0.2em"> Большой интервал </p>

<р style = "letter-spacing: 0рх">Плотный интервал</р>

<р style = "letter-spacing: -1рх">Очень плотный интервал</р>

</body>

</html>

Пример word-spacing - указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.

<html>

<head>

p { word-spacing: 1 em }

</style>

</head>

<body>

<р>Изменение пробелов с помощью свойства word-spacing</р>

</body>

</html>

Свойство text-transform - управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется. Пример

<html>

<head>

<title> Использование свойства text-transform </title>

.upper { text-transform: uppercase }

.capital { text-transform: capitalize }

</style>

</head>

<body>

<div class=”upper”> Все буквы преобразуются в прописные </div>

<div class=”capital”> Первая буква каждого слова преобразуется в прописную </div>

</body>

</html>

Цвет и фон.

Свойство	Описание
color	Определяет цвет элемента.
background	Свойства фона: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
background-color	фоновый цвет страницы или ее элемента: {Цвет}\|transparent; Предопределенное значение transparent задает "прозрачный" фон.
background-image	фоновый рисунок страницы или ее элемента. url({Интернет-адрес файла рисунка})\|none; значение none отключает фоновый рисунок.
background-attachment	Fixed -позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым страницы. Применяется для тега <BODY>.
background-repeat	Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе: repeat\|no-repeat\|repeat-x\|repeat-y; repeat – размножает фоновое изображение во всех направлениях (по умолчанию); repeat-x, repeat-y – размножает изображение по горизонтали/вертикали;
background-position	Задает местонахождение фонового рисунка и заменяет атрибуты [{background-position-x}] [{background-position-y}];
background-position-x	Задает горизонтальную координату фонового рисунка. {X}\|{X}%\|left\|center\|right;
background-position-y	Задает вертикальную координату фонового рисунка. {Y}\|{Y}%\|top\|center\|bottom;

Пример color - указывает цвет текста элемента.

<html>

<head>

<title> Изменение цвета символов</title>

</head>

<body>

<p><span style="color: blue">Первое</sраn> слово в строке - синие.</р>

<р style="color: rgb(49, 151, 116)"><span style="color:#fе0">Желтое</sраn> слово в строке зеленого цвета.</р>

</body>

</html>

Пример background-color - определяет цвет фона элемента.

<html>

<head>

<title> Изменение цвета фона</title>

. inverse {

font-family: Verdana; /* Шрифт Verdana */

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

background-color: green; /* Зеленый фон */

color: white; /* Символы белого цвета */

}

</style>

</head>

<body>

<div class=”inverse”>Белые буквы на зеленом фоне</div>

</body>

</html>

background - одновременно устанавливает свойства background-color, background-image, background-repeat, background-attachment и background-position.

Пример:

<html>

<head>

body {

background:

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

url(image.gif) /* Путь к файлу с рисунком фона */

left top /* Положение в левом верхнем углу */

no-repeat /* Не повторять рисунок */

fixed /* Зафиксировать фон */

}

</style> .

</head>

<body>

Использование стилей для добавления фонового рисунка на страницу

</body>

</html>

Представление документа в виде блоков

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

Для выделения блоков часто используется тег <div > </div>. Внутреннюю часть блока может определять тег <span> </span>

Отступы, поля, позиционирование

Свойство	Описание
margin	Задает поля между элементами страницы. Может быть задано от одного до четырех значений. {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}]; Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.
margin-top	Задает поле сверху как абсолютной величиной, так и процентом от высоты родителя: auto\|{Y}\|{Y}%;.
margin-right	Задает поле справа: auto\|{X}\|{X}%;
margin-bottom	Задает поле снизу: auto\|{Y}\|{Y}%;
margin-left	Задает поле слева: auto\|{X}\|{X}%;
padding	Задает отступ между элементом страницы и различными границами. : {X}\|{X}%;
padding-top	Задает отступ до верхней граници: {Y}\|{Y}%; Значение по умолчанию 0, для тега <td> 1.
padding-right	Задает отступ до правой границы: pading-right: {X}\|{X}%;
padding-bottom	Задает отступ до нижней границы: pading-bottom: {Y}\|{Y}%;
padding-left	Задает Отступ до левой границы: pading-left: {X}\|{X}%;
width	Задает ширину свободно позиционированного элемента: auto\|{X}\|{X}%;
height	Задает высоту свободно позиционированного элемента: auto\|{X}\|{X}%;
position	static – блок позиционируется в соответствии с основным потоком форматирования; relative – положение блока вычисляется. absolute - положение блока указывается с помощью свойств left, top, right и bottom, относительно контейнера данного элемента. fixed - положение блока рассчитывается по алгоритму, используемому для схемы absolute, но после позиционирования блок привязывается либо к области просмотра, либо к странице
top	Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя: auto\|{Y}\|{Y}%;
bottom	Задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя. bottom: auto\|{Y}\|{Y}%;
left	Задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя. left: auto\|{X}\|{X}%;
right	Задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя. right: auto\|{X}\|{X}%;
float	Определяет обтекание элемента другими слева или справа вместо помещения под ним. float: none\|left\|right;
clear	Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон. clear: none \| left \| right \| both \| inherit
clip	rect(Y1, X1, Y2, X2) \| auto \| inherit определяет прямоугольник для позиционированного элемента, в котором будет показано его содержимое. Все, что не помещается в эту область, будет обрезано. clip работает только для абсолютно позиционированных элементов:
display	определяет, как элемент должен быть показан в документе: block \| inline \| inline-table \| list-item \| none \| run-in \| table \| table-caption \| table-cell \| table-column-group \| table-footer-group \| table-header-group \| table-row \| table-row-group. none – скрыть блок, освободив место; block – начать блок с новой строки, закончить переходом на новую строку; inline – считать блок целиком одним из символов текстовой строки; inline-block – с виду inline, а внутри — block; list-item – маркированный элемент списка; run-in – начинается как block, заканчивается как inline; inline-table – таблица с внешними свойствами как inline; table – позиционируется в тексте как таблица;
max-height	Устанавливает максимальную высоту элемента: значение \| проценты \| none \| inherit
max-width	Устанавливает максимальную ширину элемента: значение \| проценты \| none \| inherit
min-height	Задает минимальную высоту элемента: значение \| проценты \| inherit
min-width	Устанавливает минимальную ширину элемента: значение \| проценты \| inherit
overflow	Управляет отображением содержания блочного элемента, если оно выходит за область заданных размеров: auto \| hidden \| scroll \| visible \| inherit. visible – отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden – отображается только область внутри элемента, остальное будет скрыто. scroll – добавляются полосы прокрутки. auto – полосы прокрутки добавляются только при необходимости. inherit – наследует значение родителя.
visibility	Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, место, которое элемент занимает, остается за ним: visible \| hidden \| collapse \| inherit visible – отображает элемент как видимый. hidden – элемент становится полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse – если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. inherit –наследует значение родителя.
z-index	Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Значение: число \| auto \| inherit. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше.

Рассмотрим некоторые свойства. margin - определяет размеры всех полей блока.

По умолчанию значением является 0. Пример:

<html>

<head>

h1 {margin: 10px}

p {

margin-top: 0px /* Отступ сверху */

margin-bottom: 0px; /* Отступ снизу */

}

</style>

</head>

<body>

<p> Убираем интервалы у параграфа.</p>

</body>

</html>

padding - задает отступы контента до границы блока. Если значение свойства одно, то значение применяется ко всем отступам блока. В случае двух значений первое задает верхний и нижний отступы, а второе – левый и правый отступы. При указании четырех значений они применяются к верхнему, правому, нижнему и левому отступам. По умолчанию значением данного свойства является 0.

Пример:

<html>

<head>

#img {

padding: 10рх; /* Поля вокруг изображения */

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

width: 100рх; /* Ширина */

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

}

</style>

</head>

<body>

<div>

Использование стилей для создания подписи под рисунком

</body>

</html>

Пример:

<html>

<head>

p {

text-indent: 20px; /* Выступ первой строки */

padding-left: 20px /* Отступ всего текста cлева */

padding-right: 20px /* Отступ всего текста cлева */

}

</style>

</head>

<body>

<р>Использование свойства padding-left и padding-right для создание отступов текста слева и справа.</р>

</body>

</html>

Границы элементов

Свойство	Описание
border	Задает свойства границ элемента страницы: [{border-color}] [{border-style}] [{border-width}]; Значение по умолчанию medium none.
border-color	Задает цвет: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}];Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
border-top-color	Задает цвет верхней границы элемента страницы: {Цвет};
border-bottom-color	Задает цвет нижней границы элемента страницы: {Цвет};
border-left-color	Ззадает цвет левой границы элемента страницы: {Цвет};
border-right-color	Задает цвет правой границы элемента страницы. border-right-color: {Цвет};
border-style	Задает тип сразу всех границ элемента страницы. border-style: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset; none – запрещает рисование границы (по умолчанию); dotted – рисует точечную линию; dashed – рисует штриховую линию; solid – рисует сплошную линию; double – рисует двойную сплошную линию; groove – рисует трехмерную вдавленную границу; ridge – рисует трехмерную выпуклую границу; inset – рисует трехмерную "ступеньку вверх"; outset – рисует трехмерную "ступеньку вниз".
border-top-style	Задает тип верхней границы элемента страницы: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset;
border-bottom-style	Задает тип нижней границы элемента страницы: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset;
border-left-style	Задает тип левой границы элемента страницы: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset;
border-right-style	Задает тип правой границы элемента страницы: none\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset;
border-width	Задает толщину границ элемента страницы: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}]; Если задано одно значение, оно применяется ко всем четырем границам. Если заданы два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, первое применяется к верхней границе, второе - к левой и правой, третье - к нижней. Толщина может быть задана числом или предопределенным значением : thin, medium, thick. Значение по умолчанию medium.
border-top-width	Задает толщину верхней границы элемента страницы. border-top-width: medium\|thin\|thick\|{Толщина};
border-bottom-width	Задает толщину нижней границы элемента страницы. border-bottom-width: medium\|thin\|thick\|{Толщина};
border-left-width	Задает толщину левой границы элемента страницы. border-left-width: medium\|thin\|thick\|{Толщина};
border-right-width	Задает толщину правой границы элемента страницы. border-right-width: medium\|thin\|thick\|{Толщина};
border-top	Задает все свойства верхней границы элемента страницы за один прием: [{border-top-color}] [{border-top-style}] [{border-top-width}]; Значение по умолчанию medium none.
border-bottom	Задает все свойства нижней границы элемента страницы: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
border-left	Задает все свойства левой границы элемента: [{border-left-color}] [{border-left-style}] [{border-left-width}];
border-right	Задает все свойства правой границы: [{border-right-color}] [{border-right-style}] [{border-right-width}];

Пример:

h1 {border-top-width: thin}

h1 {border-width: 5px}

border-top-color - указывает цвет верхней границы блока.

Пример:

p {border-top-color: black}

border-top-style - указывает стиль верхней границы блока.

Пример:

p {border-top-style: solid}

border-style - определяет стили всех границ блока. Если значение свойства одно, то значение применяется ко всем границам блока. В случае двух значений первое задает стили верхней и нижней границы, а второе – стили левой и правой границ. При указании четырех значений они применяются к верхнему, правому, нижнему и левому границам.

Пример:

<html>

<head>

<title> Использование стилей для отмены рамки изображений</title>

img { border: none }

</style>

</head>

<body>

</body>

</html>

Визуальное форматирование

Свойства правил визуального форматирования позволяют нужным образом расположить фрагменты Web-страницы в окне браузера.

position - определяет способ позиционирования блока на странице. Значениями свойства position могут быть:

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

relative – определяет смещение блока относительно его естественного положения в потоке отображения элементов.

absolute – удаляет блок из естественного потока отображения и размещает блок на странице произвольным образом.

top - указывает смещение верхнего края блока относительно верхнего края родительского элемента.

bottom - задает смещение нижнего края блока относительно нижнего края родительского элемента.

left - определяет смещение левого края блока относительно левого края родительского элемента.

right - указывает смещение правого края блока относительно правого края родительского элемента.

Пример:

<img src=”img.gif” style=”position: absolute; top: 30px;

bottom: 30px; left: 30px; right: 30px;”>

float - изменяет положение блока. Значениями свойства могут быть: left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока; right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока; none – блок не смещается.

Пример:

<html>

<head>

<title> Использование стилей для создания буквицы</title>

. letter {

font-size: 150%; /* Размер шрифта буквицы */

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

color: green; /* Цвет буквицы */

padding: Зрх /* Отступ между буквицей и текстом */

}

</style>

</head>

<body>

<span class=”letter”>Б</span>уквица

</body>

</html>

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

left – все плавающие элементы на левой стороне блока будут опущены вниз.

right – все плавающие элементы на правой стороне блока будут опущены вниз.

none – плавающие элементы устанавливаются на всех сторонах блока.

Пример:

h1 {float: left }

width - указывает ширину блока содержимого элемента. По умолчанию ширина блока вычисляется браузером автоматически.

Пример:

p {width: 100px}

height -определяет высоту блока содержимого элемента. По умолчанию высота блока вычисляется браузером автоматически.

Пример:

p {height: 100px}

Визуальные эффекты

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

scroll – добавляет полосы прокрутки к блоку отображения; hidden – обрезает элемент в соответствии с размерами блока; auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения; visible – принуждает элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке для рисунка или увеличивает размеры блока отображения в случае текста. По умолчанию элемент не обрезается, а сжимается или увеличивается, чтобы полностью отобразиться в заданном блоке.

Пример:

<html>

body { overflow: hidden }

</style>

<body>

<p>Запрет полосы прокрутки на веб-странице</p>

</body>

</html>

clip - обрезает видимое изображение элемента. По умолчанию усечение не производится. Значениями свойства clip могут быть:

границы видимого прямоугольного изображения элемента в виде rect(<top>, <right>, <bottom>, <left>), где параметры <top>, <right>, <bottom>, <left> определяют верхнюю, правую, нижнюю, левую границы видимого изображения.

auto – усечение изображения элемента не производится.

Свойство visibility - определяет, будет ли отображаться элемент в окне браузера. Значениями свойства могут быть: visible – элемент будет отображаться; hidden – элемент не будет выводиться на экран.

Свойства списков

Свойство	Описание
list-style	Задает параметры маркера или номера позиции списка: [{list-style-image}] [{list-style-position}] [{list-style-type}]; Значение по умолчанию disk outside none.
list-style-type	Задает тип маркера или номер позиции списка: disc\|circle\|square\|decimal\|lower\|roman\|upper-roman\|lower-alpha\|upper-alpha\|none; disc – (по умолчанию) сплошной кружок; circle – окружность; square – сплошной квадрат; decimal – нумерует арабскими цифрами; lower-roman – малыми римскими; upper-roman – большими римскими; lower-alpha –малыми латинскими буквами; upper-alpha – большими латинскими; none – убирает маркер или нумерацию.
list-style-image	Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type. : none\|url({Интернет-адрес файла изображения}); Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.
list-style-position	Задает местонахождение маркера позиции списка: в тексте позиции или вне: outside\|inside; Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение inside заставляет Web-браузер отобразить маркер позиции в ее тексте в качестве первого символа.

list-style-type - определяет вид маркера элемента списка, если не задано изображение в качестве маркера, либо оно не доступно.

Пример:

ol {list-style-type: lower-roman}

list-style-image - определяет графическое изображение в качестве маркера элемента списка.

Пример:

<html>

<head>

a.outer {

list-style-image: url(image.gif);/*Путь к файлу с рисунком */

}

</style>

</head>

<body>

<ol>

<li class=”outer”>C маркером</li>

<li>Без маркера</li>

</ol>

</body>

</html>

list-style-position - определяет положение маркера в списке. По умолчанию маркеры находятся вне пространства, отведенного под список

Пример:

<html>

<head>

ul { list-style-position: outside }

</style>

</head>

<body>

<ul>

<1i>Изменение положения маркеров </li>

<1i>Маркеры размещаются за пределами текстового блока</li>

</ul>

</body>

</html>

list-style - указывает значения сразу трех свойств: list-style-type, list-style-image и list-style-position.

Свойства таблиц

Свойство	Описание
border-collapse	Задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет: separate\|collapse; separate - разделяет границу таблицы и границы ее ячеек (по умолчанию); collapse - объединяет их.
border-spacing	Задает расстояние между границами ячеек в таблице: значение1 [значение2]. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе – вертикальное.
caption-side	Определяет положение заголовка таблицы, который задается с помощью тега <caption> относительно самой таблицы: top \| bottom top – располагает заголовок по верхнему краю таблицы. bottom – заголовок располагается под таблицей. right – заголовок размещается справа от таблицы. left – заголовок размещается слева от таблицы.
empty-cells	Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется. empty-cells: show \| hide. show – отображает границу вокруг ячейки и фон в ней. hide – граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
table-layout	Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом: auto \| fixed \| inherit auto – браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и после этого отображает.fixed – ширина колонок определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit – наследует значение родителя.

Псевдоклассы

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

a { text-decoration: none; }

a:hover { text-decoration: underline; }

Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней. Действие стиля распространяется на определенное состояние (пользователь собирается щелкнуть по ссылке).

Общий синтаксис для ссылок будет такой:

А: псевдокласс { параметр: значение }

Псевдокласс	Описание
:active	Применяется к активным гиперссылкам, на которых находится фокус ввода пользователя:active{Определение стиля}; Пример: a:active {color: lime;}
:first-child	Применяет стилевое оформление к первому дочернему элементу элемент:first-child { ... }
:focus	определяет стиль элемента, получающего фокус. Например, им может быть текстовое поле формы, элемент:focus { ... }
:hover	Применяется к гиперссылкам, над которыми пользователь помещает курсор мыши: hover {Определение стиля}; Пример:a:hover {color: lime; text-decoration: none;}
:lang	Определяет язык, который используется в документе или его фрагменте. элемент:lang(<язык>) { ... } В качестве языка могут выступать следующие: ru – русский; en – английский ; de – немецкий;
:link	Применяется к не посещенным еще гиперссылкам: link {Определение стиля};Пример:a:link {color: black;}
:visited	Применяется к уже посещенным гиперссылкам:visited{Определение стиля}; Пример:a:link {color: indigo;}

Пример:

<html>

<head>

<title> Псевдоклассы для ссылок</title>

a:link {color : lime}

a:visited {color: indigo }

a:hover {color: red }

a:active {color : #fe0 }

</style>

</head>

<body>

<a href=linkl.html>Ссылка 1</a>

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

<a href=link3.html> Ссылка 3</a>

</body>

</html>

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

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

Псевдостили текста

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

first-letter - применяется к первой букве первой строки абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

Рассмотрим пример:

<html>

<head>

p:first-letter {

color: red;

font-size: 12px

}

</style>

</head>

<body>

<р>Использование псевдокласса first-lette.</р>

</body>

</html>

first-line - применяется к первой строке абзаца.

{Задание стиля абзаца}:first-line{Определение стиля};

Пример:

p:first-line {text-decoration: underline;}

Псевдоэлементы

Свойство	Описание
:after	Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. элемент:after { content: "текст" }
:before	Псевдоэлемент :before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content:before { content: "текст" }
:first-letter	Применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц:first-letter {Определение стиля}; Пример: st:first-letter {font-size: 16pt;}
:first-line	Применяется к первой строке абзаца:first-line{Определение стиля}; Пример: st:first-line {text-decoration: underline;}

Различные свойства

Свойство	Описание
content	позволяет вставлять генерируемое содержание в текст веб-страницы. Применяется совместно с псевдоэлементами after и before. content: строка \| attr(параметр) \| open-quote \| close-quote \| no-open-quote \| no-close-quote \| url \| counter \| normal \| none \| inherit; cтрока – текст, который добавляется на веб-страницу, строка должна браться в двойные или одинарные кавычки. attr(параметр) – возвращает строку, которая является значением параметра тега указанного в скобках. Например, img:after {content:attr(href)} добавит после изображения его адрес, т.е. значение параметра href. open-quote – вставляет открывающую кавычку, close-quote – вставляет закрывающую кавычку. url –абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter – выводит значение счетчика, заданного свойством counter-reset. normal - задается как none для псевдоэлементов before и after. inherit - наследует значение родителя.
orphans	Свойство orphans задает минимальное число строк текста, которое остается на предыдущей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах. orphans: число \| inherit
page-break-after	Добавляет разрыв страницы при печати документа после заданного элемента. page-break-after: always \| auto \| avoid \| left \| right \| inherit always – всегда добавляет разрыв страницы после элемента. auto – вставляет разрыв страницы при необходимости. avoid – запрещает разрыв страницы после элемента. left – пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной. right – пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной. inherit – наследует значение родителя.
page-break-before	Добавляет разрыв страницы при печати документа перед заданным элементом. page-break-before: always \| auto \| avoid \| left \| right \| inherit always – всегда добавляет разрыв страницы перед элементом. auto – вставляет разрыв страницы при необходимости. avoid – запрещает разрыв страницы перед элементом. left – пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной. right – пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной. inherit – наследует значение родителя.
page-break-inside	Разрешает или запрещает разрыв страницы внутри элемента при печати: auto \| avoid \| inherit auto – вставляет разрыв страницы, avoid – запрещает разрыв страницы внутри элемента, inherit – наследует значение родителя.
windows	задает минимальное число строк текста, которое располагается на следующей странице при печати документа. widows: число \| inherit

scrollbar-arrow-color	Задает цвет стрелок на кнопках полосы прокрутки. scrollbar-arrow-color:{Цвет};
scrollbar-base-color	Задает цвет бегунка и кнопок-стрелок полосы прокрутки. scrollbar-base-color:{Цвет};
scrollbar-highlight-color	Задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-highlight-color:{Цвет};
scrollbar-shadow-color	Задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней).
scrollbar-track-color	Задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок. scrollbar-track-color: {Цвет};

Курсор

Определяет форму курсора мыши, которую он принимает при наведении на элемент.

auto-указывает браузеру самому определять нужную форму курсора;

crosshair - крестообразный курсор; default - курсор по умолчанию, стрелка;

hand - "указывающий перст"; move - стрелка, указывающая "на все четыре стороны";

text - текстовой курсор; wait - "песочные часы", курсор ожидания; help - стрелка с вопросительным знаком. Пример:

<html>

<head>

<title> Курсор для разных областей веб-страницы</title>

.cross { cursor: crosshair }

. hand { cursor: hand }

</style>

</head>

<body>

<div class="cross"> курсор примет вид перекрестья.</div>

<a href="ref.htm" class=" hand ">Ссылка</a>

</body>

</html>

CSS. Примеры

1. Двухколоночный макет сайта на HTML и css

<html>

<head>

<style>

#top{margin-top:0px;

height:100px;

margin-left:0px;

/*width:900px;*/

border:1px; /*толщина границы*/

border-style:solid;}/*обведение границы*/

#left-side {

float:left; /* разрешено обтекание элементами слева*/

width:200px; /*ширина */

height:400px;

border:1px;

border-style:solid;

}

#center {

margin-left:200px; /* поле слева*/

height:400px;

border:1px;

border-style:solid;

}

#footer {

clear:both; /* запрещено обтекание*/

border:1px;

border-style:solid;

}

#content{}

p{font-size:25px;

text-align:center;

color:red}

a:visited { color: #000000; text-decoration: none}

a:link { color: #000000; text-decoration: none}

a:hover { color: #dd4444; text-decoration: none}

</style>

</head>

<body>

</div>

<div id="center"><p>Center</p></div>

</div>

<div id="footer"> <p>Footer</p>

</div>

</body>

</html>

2. Трехколоночный макет сайта

<html>

<head>

<style>

#left-side {

float:left;

width:200px;

}

#wrapper {

margin-left:200px;

background-color: yellow;

}

#right-side {

float:right;

width:200px;

}

#top{ margin-left:0px;

margin-top:0px;

hight:150px;}

#center {}

#footer { clear:both;}

</style>

</head>

<body>

<div id="top"> top

</div>

<div id="right-side"> right-side </div>

<div id="center"> center </div>

</div>

<div id="footer"> footer

</div>

</body>

</html>

2. Блочная верстка сайтов

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

Рассмотрим основные элементы HTML и CSS, используемые для блочной верстки.

Любой документ должен в самом начале содержать элемент DOCTYPE. Определим строгие правила Strict 1.0. При этом устаревшие элементы не используются, все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем /> перед закрывающей угловой скобкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>WebConf 09</title>

</head>

< !- -Первый мета-тэг показывает на кодировку сайта в виде кириллицы windows-1251. Второй мета-тэг — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска поисковых серверов. В третьем мета-тэге ключевые слова для поисковиков. Последняя строка — это ссылка на лист стилей CSS, который создадим ниже. -->

<body>

<div>

</div>

<!--

<ul>

<li>Главная</li>

<li><a href="#">О Секциях</a></li>

<li><a href="#">Тезисы</a></li>

<li><a href="#">Оплата</a></li>

<li><a href="#">Контакт</a></li>

</ul> </div>

<h2><span>Подробная информация</span></h2>

<p>Белорусский государственный университет (БГУ) и Институт математики Национальной Академии наук Беларуси организуют международную научную конференцию: <a href="">«X Белорусская математическая конференция»</a>, 3–7 ноября 2008 года в г. Минске (Беларусь). Дни приезда и отъезда – 2 и 8 ноября 2008г На пленарных заседаниях конференции будут заслушаны лекции приглашенных докладчиков продолжительностью 60 мин. </p>

<p>Продолжительность пленарных докладов на секциях – 40 мин., секционных докладов – 20 мин., кратких сообщений – 10 мин.</p>

<H2>Список участников:</H2>

<ol>

</ol>

<ol>

</ol> </div>

</div>

<h3>Самые распоследние новости:</h3>

<ul>

<li>Новости. Малаццы!</li>

<li>Новости. Злой сильно.</li>

<li> Пляски намечаются до самого утра. будет весело.</li>

</ul>

</div>

<p>Главная | <a href="#">О нас</a> | </a> | <a href="#">Подружиццо</a></p>

<a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> |

<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | | e-mail: <a href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>

</div> </div> </body> </html>

Сохраним документ в файле index.html. Индексная страница всегда является главной.

Открываем новый документ style.css в блокноте или редакторе

* {margin : 0; padding : 0; border : 0; }

body {

padding : 2% 0 0;

background : #fff; color : #333;

font-family : "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }

#container { width : 760px; margin : 0 auto; border : 1px solid #999; }

#header {

background : url(header.jpg); width : 760px;

height : 158px; }

#nav {

background : url(navbg.jpg) repeat-x; color : #f00;

font-size : 120%; font-weight : bold;

line-height : 1.8em; text-align : center; }

#nav ul { list-style-type : none; }

#nav li { display : inline; margin : 0 8px; }

#nav li a { color : #0c0; }

#nav li a:hover { color : #f00; }

a { text-decoration : none; }

#text {

width : 545px; font-size : 0.8em; color : #333; margin : 10px auto;

float : left;

}

#text p {

text-align : justify; text-indent : 1.5em; margin : 0; padding : 0 15px; }

#text a {

color : #396; }

#text a:hover {

color : #f36;

border-bottom : 1px dotted #f36; }

.img1 { width : 200px;

height : 287px; margin : 0 0 0 15px; float : right; }

.img2 {

width : 200px; height : 200px;

margin : 10px 10px 0 15px;

float : left;

}

.venzel { width : 300px; height: 23px;

margin : 10px 10px 0 15px;

float : left;

}

#members {

width : 300px;

height : 190px; float : right;

}

#members h2 {

color : #f60; font-size : 120%;

font-weight : bold; text-align : center;

}

#members ol {

color : #999; font-size : 120%;

margin : 10px;

float : left;

}

#members li { margin : 0 5px; }

#members li a {color : #0c0;}

#members li a:hover {color : #f00;}

.line {width : 304px; height : 13px; float : right;}

#news {background : #ffc; width : 185px; color : #665; margin : 10px 5px; float : right;}

#news h3 {color : #f60; font-size : 120%; font-weight : bold; text-align : center; }

#news ul { list-style : url(marker.jpg) inside; }

#news li { font-size : 75%; padding : 5px 10px;}

#footer {

background : #665;

color : #fff; font-size : 70%;

padding : 5px; clear : both;

}

#footer a {

color : #ff0;

}

#footer a:hover {

color : #f00;

}

#footer p { padding : 2px; text-align : center; }

.clearfloat{ clear:both; }

В первом правиле звёздочка означает всю страницу разом. Браузеры применяют данные с ней правила ко всей странице. В правиле мы указали :Отступы - 0, Поля - 0, Рамка - 0. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.

Следующим правилом мы задали для тела страницы: поля — сверху 2%, с боков по нулям, снизу тоже ноль. У любого прямоугольника есть 4 стороны, значения отступов для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Так как по бокам должно быть одинаковое расстояние от края экрана, то и значений всего три — 2% 0 0. Средняя цифра в этой записи нуль означает, что она одинакова для правой, и для левой стороны.

В следующем правиле появилось слово container с решёткой (#). Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице.

Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом равна 760 пикселям.

А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css — style.css

Открываем его и следом за правилом для шапки запишем правило для блока навигации:

#nav { background: url(nav-bg.jpg) repeat-x; color: #f00;

font-size:120%;font-wight: bold; line-height: 1.8em; text-align: center; }

#nav ul { list-style-type: none; }

#navli{display:inline;margin: 0 8px; }

#nav li a { color: #0c0; }

#nav li a:hover { color: #f00; }

Панель навигации будет у нас одна — сразу под шапкой, горизонтальная (в подвале сделаем простое дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.

Данный список в HTML обозначается тэгом ul. Элементы списка (строчки) обозначаются тэгом li.

Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav-bg.jpg размером 8х35 пикселей. Это обычный такой "столбик" с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает "повторить по оси х", то есть по горизонтали (об этом уже говорилось в чуть выше).

пропишем ещё пару правил для ссылок.

#nav li a { color: #0c0; }

#nav li a:hover { color: #f00; }

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

Ну а теперь следом добавим вот такое правило:

a {text-decoration: none;}

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

Итак, продолжим верстать нашу Главную страницу. Следом за шапкой добавим блок навигации. Находим в коде следующее место: