Различные свойства
Таблица 4.12
-
Свойство
Характеристика свойства
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: число | 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
Курсор
Определяет форму курсора мыши, которую он принимает при наведении на элемент.
Таблица 4.13
Свойство |
Характеристика свойства |
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: {Цвет} |
cursor: auto|crosshair|default|hand|move|text|wait|help;
auto – команда браузеру определить нужную форму курсора;
crosshair – крестообразный курсор; default – курсор по умолчанию, стрелка; hand – «указывающий перст»; move – стрелка, указывающая «на все четыре стороны»; text – текстовой курсор; wait – «песочные часы», курсор ожидания; help – стрелка с вопросительным знаком.
Пример:
<html>
<head>
<title> Курсор для разных областей веб-страницы</title>
<style type="text/css">
.cross { cursor: crosshair }
. hand { cursor: hand }
</style>
</head>
<body>
<div class="cross"> Курсор примет вид перекрестья.</div>
<a href="ref.htm" class=" hand ">Ссылка</a>
</body>
</html>
Представление документа в виде блоков. В модели каскадных таблиц стилей элементы HTML представлены в виде блоков (рис. 4.??). Во внутреннем блоке находится контент. Контент окружает отступ (padding) между содержимым элемента и его границей (border). Прозрачный блок поля (margin) отделяет один блок от другого. Для выделения блоков часто используется тег <div > </div>. Внутреннюю часть блока может определять тег <span> </span>
Рис.4.?? Модель каскадной таблицы стилей