CSS/Шрифты и текст: различия между версиями
Содержимое удалено Содержимое добавлено
Oleg4280 (обсуждение | вклад) Нет описания правки |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 5:
* font-family
Семейство шрифта
В этом свойстве через запятую перечисляются шрифты в порядке приоритета. Браузер будет использовать первый из списка. Если первый не будет найден, будет использоваться следующий и так далее. Если ни один не будет найден, тогда браузер применит шрифт по умолчанию.
Если в имени шрифта есть пробелы, его необходимо заключать в одинарные или двойные кавычки. После всех шрифтов необходимо добавить семейство шрифтов, из которого будет выбран подходящий шрифт, если требуемых шрифтов не окажется на компьютере.
Пример:
<source lang=css>
p {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
</source>
Существуют 5 семейств шрифтов:
# serif шрифты с засечками
# sans-serif шрифты без засечек
# monospace моноширинные
# cursive курсивные
# fantasy декоративные
Пример, как выглядят такие шрифты:
<div style="display:block; text-align:center; font-size:2em; word-spacing:2em">
<span style="font-family:serif">serif</span>
<span style="font-family:sans-serif">sans-serif</span>
<span style="font-family:monospace">monospace</span>
<span style="font-family:cursive">cursive</span>
<span style="font-family:fantasy">fantasy</span>
</div>
* font-style
Стиль шрифта
Существуют три значения этого свойства:
# normal обычный
# italic курсив
# oblique наклонный
Браузеры последний стиль обычно отображают как курсивный
* font-variant
Вариант шрифта
# normal обычный
# small-caps капитель, то есть все строчные символы становятся уменьшенными заглавными
* font-weight
Вес шрифта
Это свойство устанавливает вес (насыщенность) шрифта.
Возможные значения:
<ol>
<li style="font-weight:100">100</li>
<li style="font-weight:200">200</li>
<li style="font-weight:300">300</li>
<li style="font-weight:400">400 или normal</li>
<li style="font-weight:500">500</li>
<li style="font-weight:600">600</li>
<li style="font-weight:700">700 или bold</li>
<li style="font-weight:800">800</li>
<li style="font-weight:900">900</li>
</ol>
* font-size
Размер шрифта
Возможные значения этого свойства:
# абсолютные константы xx-small, x-small, small, medium, large, x-large, xx-large
# относительные константы smaller, larger
# абсолютные и относительные единицы измерения CSS
* line-height
Межстрочный интервал, часто применяется вместе с font-size
Это отношение между высотой шрифта и межстрочным интервалом
* font
Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании
Пример:
<source lang="css">
p {
font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif;
}
</source>
Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar
* web-шрифты
Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face
Строка 22 ⟶ 103 :
* text-align
Выравнивание текста
Возможные значения:
# left по левому краю
# right по правому краю
# center по центру
# justify по ширине
* letter-spacing
Интервал между буквами
* word-spacing
Интервал между словами
* text-decoration
Оформление текста
Возможные значения:
# underline подчёркнутый текст
# overline линия над текстом
# line-through перечёркнутый текст
# blink мигающий текст
# none отмена всех эффектов
* text-indent
Отступ первой строки
* text-transform
Трансформация текста
Возможные значения:
# none нет трансформации (значение по умолчанию)
# uppercase преобразование всех строчных символов в заглавные
# lowercase преобразование всех заглавных символов в строчные
# capitalize преобразование первой буквы каждого слова в заглавную
* vertical-align
Выравнивание элемента по вертикали
Применяется только к строчным элементам и к ячейкам таблицы
Возможные значения для строчных элементов:
# baseline по базовой линии (значение по умолчанию)
# sub нижний индекс
# super верхний индекс
# top верх элемента выравнивается с самым высоким элементом строки
# text-top верх элемента выравнивается с верхом шрифта родительского элемента
# middle по середине
# bottom по нижней части
# text-bottom низ элемента выравнивается с низом шрифта родительского элемента
# проценты
# величины CSS
Для ячеек таблицы:
# baseline
# top
# bottom
# middle
Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот
* white-space
Пробелы между словами
Возможные значения:
# normal обычное поведение
# pre пробелы и переносы учитываются
# nowrap пробелы и переносы не учитываются
# pre-wrap пробелы учитываются, текст переносится
# pre-line пробелы не учитываются, текст переносится
* text-shadow (CSS3)
Добавление тени к тексту
Возможные значения
# h-shadow смещение тени по горизонтали
# v-shadow смещение тени по вертикали
# blur радиус размытия тени
# color цвет тени
# none нет тени (значение по умолчанию)
* text-overflow (CSS3)
Видимость текста, если он не влезает в ширину блока
Это свойство работает вместе с overflow
Возможные значения:
# clip текст обрезается по размеру блока
# ellipsis текст обрезается с добавлением многоточия
[[Категория:CSS]]
| |||