Параметр 'color'
Этот параметр задает цвет текста.
Наследование: да.
Может принимать следующие значения:
| Значение
| Описание
| |
| color
| Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или шестнадцатеричное значение (#ff0000).
| |
| |
Пример:
h1{ color: green} Параметр 'direction'
Параметр задает направление текста.
Наследование: да.
Может принимать следующие значения:
| Значение
| Описание
|
| ltr
| Направление текста слева направо
|
| rtl
| Направление текста справа налево
|
Пример:
p{ direction: rtl} Параметр 'letter-spacing'
Данный параметр увеличивает или уменьшает интервал между символами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| Значение
| Описание
|
| normal
| Определяет обычный пробел между символами
|
| Length
| Определяет фиксированный пробел между символами
|
Примеры:
pre{ letter-spacing: -2px} pre{ letter-spacing: 20px} Параметр 'text-align'
Этот параметр задает выравнивaние текста в элементе.
Наследование: да.
Может принимать следующие значения:
| Значение
| Описание
|
| left
| Выравнивает текст слева
|
| right
| Выравнивает текст справа
|
| center
| Центрирует текст
|
| justify
| |
Пример:
h1{ text-align: right} Параметр 'text-decoration'
Данный параметр задает дополнительное оформление текста.
Наследование: нет.
Примечание: цвет оформления должен быть задан свойством "color".
Может принимать следующие значения:
| Значение
| Описание
|
| None
| Определяет обычный текст
|
| Underline
| Определяет линию под текстом
|
| Overline
| Определяет линию над текстом
|
| line-through
| Определяет линию через текст
|
| Blink
| Определяет мигающий текст
|
Пример:
h1{ text-decoration: overline} Параметр 'text-indent'
Данный параметр создает отступ для первой строки текста элемента.
Наследование: да.
Примечание: допускаются отрицательные значения, для которых первая строка будет сдвинута влево.
Может принимать следующие значения:
| Значение
| Описание
|
| Length
| Определяет фиксированный отступ
|
| %
| Определяет отступ в % от ширины родительского элемента
|
Примеры:
pre{ text-indent: -10px} p{ text-indent: 10px } Параметр 'text-transform'
Этот параметр управляет регистром символов в элементе.
Наследование: да.
Может принимать следующие значения:
| Значение
| Описание
|
| None
| Определяет обычный текст с символами нижнего регистра и заглавными буквами
|
| Capitalize
| Каждое слово в тексте начинается с заглавной буквы
|
| Uppercase
| Определяет только заглавные буквы
|
| Lowercase
| Определяет только символы нижнего регистра
|
Примеры:
h1{text-transform: capitalize} pre{ text-transform: lowercase} Параметр 'white-space'
Параметр задает способ обработки пробелов внутри элемента.
Наследование: да.
Может принимать следующие значения:
| Значение
| Описание
|
| normal
| Браузер игнорирует пробел
|
| pre
| Браузер сохраняет пробел. Действует как тег <pre> в HTML
|
| nowrap
| Текст не будет переноситься на другую строку, пока не встретится тег <br>
|
Пример:
pre{white-space: pre} Параметр 'word-spacing'
Данный параметр увеличивает или уменьшает пробел между словами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
| Значение
| Описание
|
| normal
| Определяет обычный пробел между словами
|
| length
| Определяет фиксированный пробел между словами
|
Примеры:
pre{ word-spacing: -10px} h1{ word-spacing: 35px} Лекция 5. Шрифты в CSS
Параметры шрифтов в CSS определяют шрифт текста.
Примеры:
- Этот пример показывает, как задать шрифт текста.
2. <html>
3. <head>
4. <style type="text/css">
5. h1 {font-family: courier}
6. h2.font {font-family: sans-serif}
7. pre {font-family: times}
8. </style>
9. </head>
10.
11. <body>
12. <pre>применяется шрифт "times"</pre>
13. <h1>заголовок h1</h1>
14. <h2 class="font">заголовок h2</h2>
15. </body>
16.
</html>
- Этот пример показывает, как задать размер шрифта.
18. <html>
19. <head>
20. </head>
21.
22. <body>
23. <ol style="font-size: 200%">
24. <li>first</li>
25. <li>second</li>
26. </ol>
27. <p style="font-size: 80%">текст параграфа</p>
28. <ul style="font-size: 60%">
29. <li>first</li>
30. <li>second</li>
31. </ul>
32. </body>
33.
</html>
- Этот пример показывает, как задать стиль шрифта.
35. <html>
36. <head>
37. <style type="text/css">
38. ol {font-style: normal}
39. ul {font-style: oblique}
40. p {font-style: italic}
41. </style>
42. </head>
43.
44. <body>
45. <p>Текст параграфа. Текст параграфа. Текст параграфа.</p>
46. <ol>
47. <li>первый пункт</li>
48. <li>второй пункт</li>
49. <li>третий пункт</li>
50. </ol>
51. <ul>
52. <li>первый пункт</li>
53. <li>второй пункт</li>
54. <li>третий пункт</li>
55. </ul>
56. </body>
57.
</html>
- Этот пример показывает, как задать вариант шрифта.
59. <html>
60. <head>
61. </head>
62.
63. <body>
64. <h1 style="font-variant: small-caps">Заголовок h1</h1>
65. <h2 style="font-variant: small-caps">Заголовок h2</h2>
66. </body>
67.
</html>
- Этот пример показывает, как задать степень жирности шрифта.
69. <html>
70. <head>
71. <style type="text/css">
72. h1.first {font-weight: 800}
73. h2.second {font-weight: bold}
74. h3.third {font-weight: 900}
75. </style>
76. </head>
77.
78. <body>
79. <h1 class="first">заголовок h1</h1>
80. <h2 class="second">заголовок h2</h2>
81. <h3 class="third">заголовок h3</h3>
82. </body>
83.
</html>
- Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
85. <html>
86. <head>
87. <style type="text/css">
88. p
89. {
90. font: oblique small-caps bold -5px serif
91. }
92. </style>
93. </head>
94.
95. <body>
96. <p>параграф параграф параграф параграф параграф параграф</p>
97. </body>
98.
</html>
