HTML & CSS - серия 2

Среда, 29 Февраля 2012 г. 19:09 + в цитатник

HTML & CSS - серия 2

Предыдущая серия - вот:
серия 1
В этих уроках, а также на сайтах htmlbook.ru, postroika.ru, zvirec.com, htmlka.com
и многих других достаточно много информации, причём она толково
изложена. Тем не менее я решила продолжить свои рассказы, чтобы тоже
быть более-менее последовательной.
Кстати, Вы не заметили, что я пишу уже и о CSS (style - это оттуда)? Но об этом - чуть позже.

Форматирование текста: использование тега и атрибута style (2)

Напомню, что про тег и аттрибут style шла речь в прошлый раз.
Было показано, как c их помощью задать цвет, гарнитуру (вид) шрифта, а
также размер шрифта, его вес (насыщенность), стиль (напр. наклонный) и
вариант (капитель). В конце в качестве примера мы получили вот такой
шрифт:

наш шрифт

наш
шрифт

Расстояние между буквами, словами и строчками

Конечно, между буквами можно и пробелы поставить :) Но красивее (во всех смыслах) воспользоваться свойством letter-spacing, которое можно задать, например, в пикселях:

три пикселя между буквами

Аналогично, чтобы задать расстояние между словами, используем word-spacing:

семь пикселей между словами

Теперь зададим высоту строки, точнее говоря, расстояние между строчками. Для этого воспользуемся свойством line-height:

в
этом абзаце расстояние между строчками - 25px (такие вещи лучше делать с
абзацами, используя вместо тег

)

в этом абзаце...

Изменяя
расстояние между строчками, можно добиться того, чтобы строки наезжали
друг на друга. Это иногда используется для создания "многослойного"
текста.

Подчёркнутый или зачёркнутый текст

Такой текст получить совсем несложно. Для этого используем свойство text-decoration:

подчёркнутый текст

зачёркнутый текст

Подчёркнутый
и зачёркнутый текст также можно получить, просто используя парные теги
... и ~~...~~, соответственно. Однако
стили здесь приведены не для того, чтобы Вы печатали побольше букв. В
некоторых случаях нужно задавать именно стили, но об этом будет
отдельный разговор.

синий текст, подчёркнутый красной линией

синий текст...

Обратите внимание, что тег

используется дважды.

Советую
также заглянуть на страничку по ссылке - там есть кое-что из того, что я
пропускаю (например, как оформить нижние и верхние индексы).

Мерцающий текст

Задаётся опять-таки при помощи свойства text-decoration:

мерцающий текст

Данная "фича" работает только в Opera и Firefox :(.

Текст с тенью

Задаётся при помощи свойства text-shadow:

текст с тенью

Здесь
указывается смещение вправо и вниз. Если надо задать смещение влево и
вверх, используются отрицательные значения. В качестве единиц измерения
здесь лучше брать относительные (em), хотя абсолютные (px) тоже
работают. О единицах измерения (размерах) говорилось в прошлой серии. Напомню, что em - размер по отношению к ширине буквы "m" в исходном шрифте.