САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

< Предыдущая Следующая >

С помощью CSS Вы можете оформлять текст HTML элементов.

Цвет текста

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:

1. С помощью названия цвета (например 'red' задаст красный цвет);
2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пояснения:

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.

Второй способ может использоваться для задания любых цветов и оттенков.

Синтаксис:

rgb(красный,зеленый,голубой)

красный число от 0 до 255 указывающее как много красного будет в итоговом оттенке.

зеленый число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке.

голубой число от 0 до 255 указывающее как много голубого будет в итоговом оттенке.

Например rgb(255,0,0) задаст красный цвет, а rgb(0,255,0) зеленый. Смешивая красный с зеленым rgb(255,255,0) мы получим желтый.

Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ.

Синтаксис:

#красныйзеленыйголубой

красный шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке.

зеленый шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке.

голубой шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке.

Например #ff0000 задаст красный цвет, а #00ff00 зеленый. Смешивая красный с зеленым #ffff00 мы получим желтый.

Теперь попробуем перекрасить абзацы в зеленый цвет всеми перечисленными выше способами:

p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}

Выравнивание текста

С помощью CSS свойства text-align Вы можете выровнять текст элемента по горизонтали.

Текст может быть выровнен:

• По центру (значение center);
• По левому краю (left);
• По правому краю (right);
• По ширине (justify).

Обратите внимание: по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.

Пример

p.ta1 {text-align:center;}
p.ta2 {text-align:left;}
p.ta3 {text-align:right;}
p.ta4 {text-align:justify;}

Свойство text-decoration

С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:

• Подчеркнутым (значение underline)
• Перечеркнутым (line-through)
• Отобразить над текстом элемента линию (overline)

Пример

p.td1 {text-decoration:underline;}
p.td2 {text-decoration:line-through;}
p.td3 {text-decoration:overline;}

Свойство text-decoration со значением none "очищает" текст от всех вышеперечисленных эффектов. Это может использоваться для создания не подчеркнутых ссылок.

Пример

a:link {text-decoration:none;}
a:visited {text-decoration:none;}

Обратите внимание: подчеркивать обычный текст не рекомендуется, так как пользователи могут перепутать его со ссылкой.

Отступ между словами и буквами в тексте

С помощью CSS свойства letter-spacing Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов.

Пример

p.ls1 {letter-spacing:10px;}

С помощью свойства word-spacing Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов.

Пример

p.ws1 {word-spacing:15px;}

Остальные CSS свойства оформления текста

Для того, чтобы посмотреть подробную информацию о желаемом CSS свойстве, щелкните по его названию.

Свойство	Описание	Значения
direction	Устанавливает направление текста.	ltr rtl
line-height	Устанавливает высоту строки.	normal пиксели %
text-indent	Устанавливает величину отступа первого символа текста.	пиксели %
text-transform	Устанавливает регистр букв текста элемента.	none capitalize uppercase lowercase
vertical-align	Устанавливает вертикальное выравнивание элемента.	sub super top middle bottom пиксели %
white-space	Устанавливает как должны обрабатываться пробелы внутри элемента.	normal pre nowrap

Сделайте сами

Обратите внимание: для выполнения этого задания Вам необходимо будет посетить CSS справочник так как не все свойства оформления текста были разобраны в данной главе.

Задание 1 оформите элементы согласно их описанию:

Пример

1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс.
Данный абзац оранжевого цвета.
2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей.
Данный абзац серого цвета.
3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10
пикселей. Данный элемент имеет цвет #ff3366.
4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6
пикселей. Текст написан маленькими буквами красного цвета.
5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем

равен 7 пикселей. Текст написан большими буквами зеленого цвета.

< Предыдущая Следующая >

Последние добавления

HTML для новичков

XHTML

CSS для новичков