2015-10-16
262
Для отображения букв в CSS применяются следующие свойства:
· font-family – гарнитура шрифта – определяет семейство начертаний шрифтов. Например:
p {font-family: "Times New Roman", Times, serif}
Данное правило предписывает использовать для отображения абзацев одну из указанных гарнитур, в порядке их перечисления. Если ничего из перечисленного применить невозможно, то будет использоваться браузером шрифт из класса serif, выбираемый по умолчанию;
· font-size – кегель шрифта – определяет его размер. В CSS2 введены ключевые слова, определяющие "абсолютный" размер, относительно кегеля в настройках браузера, то есть масштабный коэффициент:
o xx-small – 0,58;
o x-small – 0,69;
o small – 0,83;
o medium – 1;
o large – 1,2;
o x-large – 1,44;
o xx-large – 1,728.
Второй подход в установлении размера шрифта состоит в определении размера шрифта относительно кегеля родительского элемента. Применяют следующие два ключевых слова:
o larger – увеличивает размер шрифта на одну "ступень";
o smaller – уменьшает размер шрифта на одну "ступень.
|
|
|
Третий подход в установлении размера шрифта состоит в определении размера шрифта в процентах относительно кегеля родительского элемента, а также в линейных единицах измерения, определенных в CSS. Например:
h2 {font-size: 80%}
h1 {font-size: 1.3em};
· font-style – начертание шрифта – определяет наклон шрифта. Свойство имеет три значения:
o normal – прямое начертание;
o italic – курсив;
o oblique – наклонное начертание;
· font-weight – насыщенность шрифта. Управление насыщенность шрифта выполнено с помощью коэффициентов: 100, 200, …, 900. Применятся также кючевые слова:
o normal – соответствует коэффициенту 400;
o bold полужирное начертание, соответствует коэффициенту 700;
o bolder предписывает задать элементу более жирное начертание, нежели у родительского элемента;
o lighter предписывает задать элементу более светлое начертание, нежели у родительского элемента;
· font – объединенное свойство для шрифтов, позволяющее более кратко записывать правила. Требуется: в списке правил значение font-size должно фигурировать на предпоследнем месте, а font-family – на последнем. Например:
h1 {font: bold, italic small-caps 150% Tahoma, Verdana, Arial, sans-serif}
В следующем примере демонстрируются описанные способы применения стилей.
Пример 2.1. Способы применения стилей.
1) HTML-документ:
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Связь листов стилей с HTML-документом</title>
<!-- Подключение внешнего листа стилей style2_1A.css -->
<link rel="stylesheet" href="style2_1A.css" type="text/css" />
<!-- Определение внутреннего листа стилей -->
|
|
|
<style type="text/css">
<!--
/* Подключение внешнего листа стилей style2_1B.css */
@import url(style2_1B.css);
/* Правила внутреннего листа стилей */
h1 {
background-color: rgb(0, 102, 0); /* Темно-зеленый цвет фона для всех заголовков первого уровня */
}
-->
</style>
</head>
<body>
<h1>Элементы логической разметки HTML</h1>
<p>Все элементы логической разметки можно подразделить на два типа: блочные (block) и внутристрочные (inline).</p>
<p>При визуальном отображении страницы следующие друг за другом блочные элементы располагаются вертикально, а
внутристрочные — горизонтально. Любой блочный элемент всегда разрывает строку, а внутристрочный —
нет.</p>
<!-- Для последнего абзаца используется полужирное начертание -->
<p style="font-weight: bold">Абзац является примером блочного элемента — он всегда начинается с новой строки.
Любой элемент, который следует за абзацем, будет также перенесен на новую строку.</p>
</body>
</html>
2) Файл стилей style2_1A.css:
/* Правило для всех заголовков первого уровня */
h1 {
color: rgb(255, 255, 255); /* Белый цвет текста */
font-family: Tahoma, Arial, sans-serif; /* Шрифт */
font-size: 150%; /* Размер шрифта в полтора раза больше, чем у основного текста страницы */
}
3) Файл стилей style2_1B.css:
/* Правило для тела веб-страницы */
body {
color: rgb(0, 102, 0); /* Темно-зеленый цвет текста */
background-color: rgb(204, 255, 204); /* Светло-зеленый слабонасыщенный цвет фона */
}
Рисунок 2.1 Отображение веб-страницы с применением стилей
