Параметр font предназначен для сокращенной записи, позволяющей задать все свойства шрифта в одном объявлении (за исключением некоторых системных шрифтов).
Наследование: да.
Может принимать следующие значения:
Значение
Описание
font-style
Задает свойства шрифта. Значение line-height задает расстояние между строками. Это значение может быть числом, % или размером шрифта
font-variant
font-weight
font-size* /line-height
font-family
Caption
Определяет шрифт для элементов управления с заголовком (таких, как кнопки, раскрывающиеся меню и т.д.)
icon
Определяет шрифты, которые используются метками пиктограмм приложений
menu
Определяет шрифты, которые используются для раскрывающихся меню.
message-box
Определяет шрифты, которые используются в диалоговых окнах.
small-caption
status-bar
Определяет шрифты, которые используются в строке состояния окна
(*это свойство имеет также шестое значение: "line-height", которое задает расстояние между строками)
Примеры:
pre
{
font: oblique arial
}
h1
{
font: italic 200 arial
}
p
{
font: italic small-caps 10px/12px serif
}
p
{
font: status-bar
}
Параметр 'font-family'
Данное свойство определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то браузер будет использовать первое распознанное значение.
Существует два типа значений font-family:
family-name: имя семейства шрифтов ("times", "courier", "arial", и т.д.);
generic-family: имя порождающего семейства, ("serif", "sans-serif", "cursive", "fantasy", "monospace").
В качестве разделителя используется запятая. Для последнего варианта желательно определять имя порождающего семейства. Если же имя семейства содержит пробел, то его необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются одиночные кавычки.
Наследование: да.
Может принимать следующие значения:
Значение
Описание
family-name
Определяет для элемента имен семейств шрифтов и/или имен
Задает размер шрифта меньше, чем у порождающего элемента
larger
Задает размер шрифта больше, чем у порождающего элемента
length
Задает фиксированный размер шрифта
%
Задает размер шрифта в % от порождающего элемента
Примеры:
p
{
font-size: small
}
pre
{
font-size: 5pt
}
i
{
font-size: 3em
}
p
{
font-size: 120%
}
Параметр 'font-size-adjust'
Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size" называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58, т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта, тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет читаться лучше, чем Times New Roman.
Свойство font-size-adjust определяет значение аспекта для элемента, которое будет сохранять высоту буквы x нижнего регистра выбранного шрифта.
Наследование: да.
Возможные значения:
Значение
Описание
none
Не сохранять высоту буквы x шрифта, если шрифт недоступен
number
Определяет значение аспекта для шрифта
Используемая формула:
размер выбранного шрифта * (font-size-adjust/значение аспекта доступного шрифта) = размер шрифта для доступного шрифта
Пример:
Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт имеет значение аспекта 0.46, то размер шрифта для подстановки будет 14 * (0.58/0.46) = 17.65px.
Пример:
p
{
font-size-adjust: none
}
p
{
font-size-adjust: 0.50
}
Параметр 'font-stretch'
Данный параметр сжимает или расширяет текущее семейство шрифтов.
Необходимо отметить, что семейство шрифтов сжимается или расширяется только горизонтально.
Наследование: да.
Возможные значения:
Значение
Описание
normal
Задает масштаб сжатия или расширения как обычный
wider
Задает масштаб расширения как следующее расширенное значение
narrower
Задает масштаб сжатия как следующее сжатое значение
ultra-condensed
Задает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed" является самым сжатым значением, а " ultra-expanded" — самым широким
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Пример:
colspan="2"
p
{
font-stretch: extra-expanded
}
Параметр 'font-style'
Данный параметр задает стиль шрифта.
Наследование: да.
Возможные значения:
Значение
Описание
normal
Браузер выводит обычный шрифт
italic
Браузер выводит шрифт курсивом
oblique
Браузер выводит наклонный шрифт
Пример:
p
{
font-style: oblique
}
h1
{
font-style: italic
}
Параметр 'font-variant'
Этот параметр используется для вывода текста капителью: все символы нижнего регистра преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют меньший размер по сравнению с остальным текстом.
Наследование: да.
Может принимать следующие значения:
Значение
Описание
normal
Браузер выводит обычный шрифт
small-caps
Браузер выводит шрифт капитель
Пример:
pre
{
font-variant: small-caps
}
p
{
font-variant: normal
}
Параметр 'font-weight'
Данный параметр определяет степень жирности символов в тексте при выводе.
Наследование: да.
Возможные значения:
Значение
Описание
normal
Определяет обычные символы
bold
Определяет жирные символы
bolder
Определяет более жирные символы
lighter
Определяет более тонкие символы
Определяет степень жирности символов. 400 соответствует normal, 700 соответствует bold
Пример:
h1
{
font-weight: 200
}
h2
{
font-weight: bold
}
Лекция 6. Границы в CSS
Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.
Пример в котором показано, как задать стиль для четырех сторон границы.
Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
61. <html>62. <head>63. 64. <style type="text/css">65. h1.styleh166. {67. border-style: dashed;68. border-color: green69. }70. h2.styleh271. {72. border-style: dotted;73. border-color: #ff00ff blue74. }75. h3.styleh376. {77. border-style: solid;78. border-color: red yellow rgb(12,200,30)79. }80. h4.styleh481. {82. border-style: dashed;83. border-color: green blue red yellow84. }85. </style>86. 87. </head>88. 89. <body>90. 91. <h1 class="styleh1">одноцветная рамка</h1>92. 93. <h2 class="styleh2">рамка из двух цветов</h2>94. 95. <h3 class="styleh3">рамка из трех цветов</h3>96. 97. <h4 class="styleh4">рамка из четырех цветов</h4>98. 99. <pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает, 100. если используется в одиночку.101. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>102. 103. </body></html>
Пример, в котором показано, как задать толщину нижней стороны границы.
105. <html>106. <head>107. <style type="text/css">108. h1 109. {110. border-style: dashed;111. border-bottom-width: 7px112. }113. </style>114. </head>115. 116. <body>117. <h1>заголовок h1</h1>118. <pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает, 119. если используется в одиночку.120. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>121. </body>122. </html>
Пример, в котором показано, как задать толщину левой стороны границы.
124. <html>125. <head>126. <style type="text/css">127. h2 128. {129. border-style: dotted;130. border-left-width: 7px131. }132. </style>133. </head>134. 135. <body>136. <h2>Внимание</h2>137. <pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает, 138. если используется в одиночку.139. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>140. </body>141. </html>
Пример, в котором показано, как задать толщину правой стороны границы.
7. <html>8. <head>9. <style type="text/css">10. h1 11. {12. border-style: dashed;13. border-right-width: 7px14. }15. </style>16. </head>17. 18. <body>19. <h1>заголовок h1</h1>20. <pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.21. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>22. </body>23. </html>
Пример, в котором показано, как задать толщину верхней стороны границы.
25. <html>26. <head>27. <style type="text/css">28. h429. {30. border-style: dotted;31. border-top-width: 7px32. }33. </style>34. </head>35. 36. <body>37. <h4>заголовок h4</h4>38. <pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает, 39. если используется в одиночку.40. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>41. </body>42. </html>
Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
59. <html>60. <head>61. <style type="text/css">62. pre 63. {64. border-left: thin ridge #f0ffff65. }66. </style>67. </head>68. 69. <body>70. <pre>текст текст текст текст текст текст текст</pre>71. </body>72. </html>
Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
90. <html>91. <head>92. <style type="text/css">93. pre94. {95. border-top: thin dashed yellow96. }97. </style>98. </head>99. 100. <body>101. <pre>текст текст текст текст текст текст текст</pre>102. </body>103. </html>
Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
105. <html>106. <head>107. <style type="text/css">108. h1.styleh1 109. {110. border-style: dotted;111. border-width: 7px 12px112. }113. h2.styleh2 114. {115. border-style: dashed;116. border-width: 3px 6px 8px117. }118. h3.styleh3 119. {120. border-style: outset;121. border-width: 7px 122. }123. h4.styleh4 124. {125. border-style: inset;126. border-width: 3px 6px 8px thick127. }128. </style>129. </head>130. 131. <body>132. <h1 class="styleh1">Заголовок h1</h1>133. <h2 class="styleh2">Заголовок h2</h2>134. <h3 class="styleh3">Заголовок h3</h3>135. <h4 class="styleh4">Заголовок h4</h4>136. <pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку. 137. Сначала задайте границы с помощью свойства <b>"border-style"</b>.</pre>138. </body>139. </html>
Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
