Использование стилей для форматирования текста

Составные части форматирования текста:

– шрифт текста (стиль шрифтов)

– цвет текста, фона, фоновый рисунок (стиль оформления)

– «табулирование», межсловное и межсимвольное расстояние, отступы, подчеркивание и т.д.

– расположение элемента (размеры, поля, отступы, границы)

– позиционирование

Стили шрифтов

Рассмотрим параметры и их значения.

1) font-family –семейство шрифта (поддерживается всеми элементами). Если конкретного шрифта нет у пользователя, браузер выбирает наиболее подходящий из указанного семейства. Можно через запятую указать альтернативные варианты семейства шрифтов, это является хорошим тоном. Возможные значения: Arial, Courier, Helvetica, “Times New Roman”, название состоящее из нескольких слов пишется в кавычках ‘ или “.

Пример:

р {font-family: ”Times New Roman”, Arial}

2) font-size –размер шрифта (поддерживается всеми элементами). Для таблиц стилей существует несколько способов задания размеров:

• абсолютный, указывается размер в единицах

- cm (сантиметр)

- mm (миллиметр)

- in (дюймы lin=2,54cm)

- pt (пункт l pt= 1/72 in)

- pc (пика 1 pc= 12 pt)

- px (пикселы, зависит от конкретного экрана)

• абсолютный размер с помощью ключевых слов (условно абсолютный), в этом случае размер зависит от таблицы шрифтов конкретного браузера. Ключевые слова: xx-small, x- small, medium, large, x- large, xx- large

• относительный размер (размер вычисляется относительно текущего текста, того который указан в элементе-контейнере)

- в процентах

- c помощью ключевых слов (зависит от браузера). Возможные значения: larger, smaller

Пример: р {font-size: 12pt}

body {font-size : 12 pt}

h1 { font-size : 125%}

h3 { font-size : 75%}

В примере размеры заголовков hi задаются относительно body

3) font- weight – толщина шрифта (поддерживается всеми элементами). Не у каждого шрифта есть соответствующая жирность, браузер выбирает наиболее подходящую толщину. Значением может служить: ключевое слово или числа 100, 200,…900. Некоторые соответствия ключевых слов и числены значений:

normal 400

lignt

bold 700

bolder

4) font-style – стиль шрифта (поддерживается всеми элементами)

normal – прямой (по умолчанию)

italic – курсивный

5) font-variant – вариант стиля шрифта (смена написания строчных букв) (поддерживается всеми элементами)

normal – не включен

small-caps – капитель (строчные как малые заглавные) Е и е (ТЕКСТ текст)

6) font – задание одновременно всех свойств, описанных выше (поддерживается всеми элементами). Значение свойств задается через пробел для каждого одно, альтернативные могут быть только у font-family через запятую. Свойства задаются в определённом порядке: стиль, вариант, толщина, размер, семейство.

Такие стили рекомендуется использовать вместо нежелательных элементов управления шрифтом: b (полужирный шрифт), big (крупный шрифт), small (мелкий шрифт), i (курсив), strike и s (перечеркнутый текст – как задать будет описано далее), u (подчеркнутый текст), tt (шрифт курьер), font, basefont.

Стили оформления текста (цвет, фон)

1) color – цвет текста (всеми). Значения: ключевое слово (16 названий), шестнадцатеричное число # 000000 (из 6 цифр: 0 – F), вещественные числа, определяющие яркость в процентах или значениях от 0 до 255, как параметр функции rgb.

Примеры:

Black # 000000 red # FF 0000

Lime # 00FF00 blue # 0000 FF

сolor: rgb (0, 255, 0)

сolor: rgb (0%, 100%, 0%)

Код цвета, созданный путем любой комбинации пар 00, 33, 66, 99, CC, FF, считается безопасным, т. е. должны отражаться одинаково на любом устройстве, любой платформе или операционной системе.

2) background–image – изображение для фона (все), значением является url-адрес файла с рисунком; формат файла: GIF, JPG, PNG

Пример: background–image: url (pic.gif)

3) background–repeat – расположение фонового рисунка (все)

- repeat – заполнение всей области элемента по горизонтали и вертикали (по умолчанию)

- no–repeat – вывод изображения в единственном экземпляре

- repeat–x – повторяется изображение только по горизонтали

- repeat–y – повторяется изображение только по вертикали

4) background-attachment – прокручивание фонового изображения (все)

- scroll (по умолчанию)

- fixed

5) background – position – начальное положение фонового изображения с помощью 2-х значений: горизонтальной и вертикальной координаты, разделяемых запятой. Значение координат может задаваться абсолютной величиной (см, мм, in, px), в процентах (от размера области), ключевыми словами (top, center, bottom, left, right)

6)background – одновременно значение всех четырех свойств через пробел. Порядок: цвет, изображение, способ расположения, прокрутка, начальное положение.

Пример: body {background: blue url (pic.gif) repeat-x}