Что такое каскадные таблицы стилей |
Каскадные таблицы стилей – это технология определения стилей, которые влияют на форматирование тегов в отчётной форме. Аналог таблицам стилей можно найти в стилях для документа Microsoft Word. Слово "каскадные" в названии означает, что приоритетность при возникающих конфликтах определяется при выстраивании всех правил каскадом, т. е. наибольший приоритет имеет описанное последним правило.
Каждое правило форматирования состоит из двух частей: селектора и определения.
Селектором может быть любой тег, для которого в определении задается способ его форматирования. Такое правило влияет на отображение всех элементов, выведенных данным тегом. Если есть необходимость в определении одного и того же стиля для нескольких тегов, то их можно записать через запятую в один селектор. Так же помощью параметра Class можно задать разные правила форматирования для одного элемента данного типа или всех элементов документа. Имя класса указывается в селекторе после имени тега через точку. Имя класса в параметре указывается без точки и может быть заключено в кавычки или нет. Если класс должен применяться к любым элементам отчётной формы, то в селекторе не указывается имя тега, а пишется точка и имя класса.
Каждое определение состоит из двух частей: свойства и его значения. Эти части отделяются друг от друга двоеточием. Значение свойства определяется из его названия. Все свойства можно разделить на несколько категорий, каждой из которых далее будет посвящен свой раздел.
В одном правиле возможно задавать несколько определений, разделенных символом ";". Селекторы, для которых задается одинаковое правило, тоже можно сгруппировать, записав через ",".
Если вложенный тег не имеет своего правила форматирования, то он унаследует его от своего элемента-родителя. Наследование полезно при задании значений свойств, используемых по умолчанию. Для этого достаточно задать свойства для элемента, порождающего все остальные элементы отчётной формы.
Назначить элементу отчётной формы стилевые описания достаточно просто. Нужно в качестве селектора указать сам элемент и после записать всю информацию о его форматировании, заключив ее в фигурные скобки. Например, для того, чтобы задать по умолчанию отображение текста шрифтом Times New Roman черного цвета, следует в спецификации записать:
body { color: black;
font-family: Times New Roman;
}
Рассмотрим еще один пример стилевых описаний с использованием классов и групп селекторов. Определим по умолчанию черный шрифт Arial и выравнивание по левому краю, а для заголовков первого и второго уровня – шрифт семейства Tahoma и выравнивание по центру. Заголовок первого уровня должен выводиться шрифтом размера 18pt. Зададим формат заголовка второго уровня и возможность выводить его курсивом. Так же определим один абстрактный класс textborder, с помощью которого будет выводиться текст в рамке.
body { color: black;
text-align: left;
font-family: Arial;
font-size: 10pt; }
h1, h2 { font-family: Tahoma;
text-align:
center;
color: red; }
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h2.italic { font: bold italic; }
.textborder { border: 1px solid black; }
Ниже один из вариантов применения определенных выше стилей в теле отчётной формы:
<body>
<h1>заголовок первого уровня</h1><br>
<h2>заголовок второго уровня</h2><br>
<h2 class="italic">заголовок второго уровня
курсивом</h2><br>
<p>просто текст (по умолчанию)</p>
<p class="textborder">текст в рамке</p>
</body>