Какое свойство позволяет задать цвет текста
CSS имеет несколько опций для определения цвета текста и фоновых
областей на веб-странице. Эти опции по работе с цветом не только
заменяют аналогичные в простом HTML, но и дают массу новых возможностей.
Например, традиционный путь для создания цветной области, заключается
в применении таблицы. Стили позволяют отказаться от подобного использования
таблиц предлагая более простые и удобные варианты управления цветом.
В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| color | Цвет | Устанавливает цвет текста | P { color: #330000 } |
| background-color | Цвет transparent | Цвет фона | BODY { background-color: #6699FF } |
| background-image | URL none | Фоновый рисунок | BODY { background-image: url (bg.gif) } |
| background-repeat | repeat repeat-x repeat-y no-repeat | Повторяемость фонового рисунка | BODY { background-image: url (bg.gif) background-repeat: repeat-y } |
| background-attachment | scroll fixed | Прокручиваемость фона вместе с документом | BODY { background-image: url (bg.gif) background-attachment: fixed } |
| background-position | Проценты Пикселы top center bottom left right | Начальное положение фонового рисунка | BODY { background-position: left top } |
Установка цвета
Цвет, используя CSS, можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию (пример 1).
Пример 1. Установка цвета элемента по его названию
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Цвет</title>
<style type=»text/css»>
P {
color: navy; /* Цвет текста */
background-color: yellow; /* Цвет фона */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
2. По шестнадцатеричному значению
Цвет можно устанавливать по его шестнадцатеричному значению, как и
в обычном HTML (пример 2).
Пример 2. Установка цвета элемента по шестнадцатеричному
значению
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Цвет</title>
<style type=»text/css»>
H1 { color: #fc0; }
P {
color: #F9E71A;
background-color: #98560F;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
Также допустимо использовать сокращенную запись, вроде #fc0. Она означает,
что каждый символ дублируется, в итоге получим #ffcc00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей
в десятичном исчислении. Значение каждого из трех цветов может принимать значения
от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).
Пример 3. Установка цвета элемента по шестнадцатеричному значению
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Цвет</title>
<style type=»text/css»>
P {
color: RGB(249, 231, 16);
background-color: RGB(85%, 24%, 5%);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
Установка цвета фона и фонового рисунка
Цвет фона определяется значением свойства background-color,
а изображение, которое используется в качестве фона, задается свойством background-image.
Значением по умолчанию для цвета фона является transparent,
которое устанавливает прозрачный фон. Для установки фонового рисунка используется
абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно
фоновый рисунок и цвет фона, который будет использоваться в случае недоступности
файла изображения.
Пример 4. Цвет фона и фоновое изображение
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Цвет фона</title>
<style type=»text/css»>
BODY {
background-color: #98560F; /* Цвет фона */
background-image: url(images/bg.jpg); /* Путь к фоновому рисунку */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
Если задано фоновое изображение, то свойство background-repeat
определяет его повторяемость и способ, как это делать. Допустимыми значениями
являются repeat (повторяемость по вертикали и горизонтали),
repeat-x (по горизонтали), repeat-y
(по вертикали) и no-repeat (только один рисунок,
без повторения), как показано в примере 5.
Пример 5. Повторяемость фонового рисунка
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Фон</title>
<style type=»text/css»>
BODY {
background-image: url(images/gradient.png); /* Путь к фоновому рисунку */
background-color: #b9c79a; /* Цвет фона */
background-repeat: repeat-x; /* Повторение фона по горизонтали */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
В данном примере фоновый рисунок повторяется по горизонтали.
Положение фона определяется свойством background-position.
У него два значения, положение по горизонтали (может быть — right,
left, center) и вертикали
(может быть — top, bottom,
center). Положение можно, также, задавать в процентах,
пикселах или других абсолютных единицах (пример 6).
Пример 6. Положение фона
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Фон</title>
<style type=»text/css»>
BODY {
background-attachment: fixed; /* Фиксируем фон */
background-image: url(images/home.png); /* Путь к фоновому рисунку */
background-repeat: no-repeat; /* Отменяем повторение фона */
background-position: right bottom; /* Положение фона */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet…</p>
</body>
</html>
В данном примере фон будет помещен в правый нижний угол страницы. Если нужно
определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position:
left top.
Свойство background-attachment: fixed фиксирует
фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.
ÐдÑавÑÑвÑйÑе, доÑоге дÑÑзÑÑ!
ÐÑи оÑоÑмлении ÑекÑÑа на ÑайÑе нам ÑаÑÑо пÑÐ¸Ñ Ð¾Ð´Ð¸ÑÑÑ Ð¸Ð·Ð¼ÐµÐ½ÑÑÑ ÑÐ²ÐµÑ ÑекÑÑа, ÑазмеÑ, жиÑноÑÑÑ, наÑеÑÑание и Ñак далее. Ð ÑÑой ÑÑаÑÑе Ð²Ñ ÑзнаеÑе как в HTML измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа не пÑÐ¸Ð±ÐµÐ³Ð°Ñ Ðº помоÑи дополниÑелÑнÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð¾Ð², модÑлей и библиоÑек.
ÐÑли Ð²Ð°Ñ ÑÐ°Ð¹Ñ Ñделан на одной из CMS, Ñо Ð´Ð»Ñ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑвеÑа ÑекÑÑа Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе иÑполÑзоваÑÑ Ð²ÑÑÑоеннÑй ÑÑнкÑионал визÑалÑного ÑедакÑоÑа, однако ÑÐ°ÐºÐ°Ñ ÑÑнкÑÐ¸Ñ Ñам не вÑегда еÑÑÑ, а ÑÑавиÑÑ Ñади ÑÑого дополниÑелÑнÑй модÑÐ»Ñ Ð¸Ð»Ð¸ плагин не вÑегда еÑÑÑ ÑмÑÑл.
ÐлÑÑ Ð±ÑваÑÑ ÑиÑÑаÑии когда вам нÑжно измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа в виджеÑе или ÑлайдеÑе или еÑÑ Ð³Ð´Ðµ Ñо, где визÑалÑнÑй ÑедакÑÐ¾Ñ Ð½Ðµ поддеÑживаеÑÑÑ.
ÐÐ·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑвеÑа ÑекÑÑа ÑÑедÑÑвами HTML
Ð ÑÑаÑÑÑÑ Ð² HTML еÑÑÑ ÑпеÑиалÑнÑй Ñег Ñ Ð°ÑÑибÑÑом color, в коÑоÑом можно ÑказаÑÑ Ð½ÑжнÑй ÑÐ²ÐµÑ ÑекÑÑа.
<font color=»red»>ÐÑаÑнÑй ÑекÑÑ</font> |
ÐнаÑение ÑвеÑа можно задаваÑÑ Ð½ÐµÑколÑкими ÑпоÑобами:
- ÐÑи помоÑи кодового Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ñ (ÐапÑимеÑ: red, black, blue)
- Ð ÑеÑÑнадÑаÑиÑиÑном ÑоÑмаÑе (ÐапÑимеÑ: #000000, #ccc)
- Ð ÑоÑмаÑе rgba (ÐапÑимеÑ: rgba(0,0,0,0.5))
ÐÑли Ð²Ñ ÐµÑÑ Ð½Ðµ знаеÑе как опÑеделиÑÑ Ð·Ð½Ð°Ñение ÑвеÑа на ÑайÑе, Ñо вам ÑÑда
Таким обÑазом Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе измениÑÑ ÑÐ²ÐµÑ Ñ Ñелого абзаÑа, Ñлова или одной бÑквÑ, обеÑнÑв Ñо ÑÑо вам нÑжно в Ñег <font>
Ðак измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа в HTML Ñ Ð¸ÑполÑзованием CSS?
ÐÐ»Ñ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑвеÑа ÑекÑÑа Ð´Ð»Ñ Ð¾Ð¿ÑеделÑнного абзаÑа или Ñлова можно пÑиÑвоиÑÑ ÐµÐ¼Ñ ÐºÐ»Ð°ÑÑ, а заÑем в CSS Ñайле задаÑÑ Ð´Ð»Ñ ÑÑого клаÑÑа ÑвойÑÑво color.
ÐÑглÑдеÑÑ ÑÑо бÑÐ´ÐµÑ Ñак:
HTML
<p class=âcolor-textâ>ÐÑÐ¸Ð¼ÐµÑ ÑекÑÑа</div> |
CSS
.color-text { color:#555555; } |
ÐмеÑÑо color-text Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе ÑказаÑÑ Ñвой клаÑÑ.
ÐÑли вам нÑжно измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа Ð´Ð»Ñ ÑлеменÑа на ÑайÑе Ñ ÐºÐ¾ÑоÑого Ñже еÑÑÑ ÐºÐ»Ð°ÑÑ Ð¸Ð»Ð¸ иденÑиÑикаÑоÑ, Ñо можно вÑÑиÑлиÑÑ ÐµÐ³Ð¾ название и ÑказаÑÑ Ð² CSS.
ÐÑли Ð²Ñ Ð½Ðµ Ñ Ð¾ÑиÑе лезÑÑ Ð² CSS Ñайл ÑÑÐ¾Ð±Ñ Ð²Ð½ÐµÑÑи изменениÑ, Ñо можно допиÑаÑÑ CSS ÑÑили пÑÑмо в HTML коде ÑÑаниÑÑ, воÑполÑзовавÑиÑÑ Ñегом <style>.
ÐÐ»Ñ ÑÑого:
- 1.ÐÐ°Ñ Ð¾Ð´Ð¸ ввеÑÑ Ñ HTML ÑÑÑаниÑÑ Ñег </head>. ÐÑли Ð²Ð°Ñ ÑÐ°Ð¹Ñ ÑабоÑÐ°ÐµÑ Ð½Ð° CMS, Ñо ÑÑÐ¾Ñ ÑÑÐ°Ð³Ð¼ÐµÐ½Ñ ÐºÐ¾Ð´Ð° Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ Ð² одном из Ñайлов Ñаблона. ÐапÑимеÑ: header.php, head.php или ÑÑо-Ñо наподобие ÑÑого в завиÑимоÑÑи Ð¾Ñ CMS.
- 2.ÐеÑед ÑÑÑокой </head> добавлÑем Ñеги <style>…</style>.
- 3.ÐнÑÑÑи ÑÑиÑ
Ñегов задаÑм Ñе CSS ÑвойÑÑва, коÑоÑÑе нам нÑжнÑ. Рданном ÑлÑÑае color:
<style>
.color-text {
color:#555555;
}
</style>
ÐÑÐ¾Ñ ÑпоÑоб Ð¿Ð¾Ð´Ñ Ð¾Ð´Ð¸Ñ ÐµÑли вам нÑжно измениÑÑ ÑÐ²ÐµÑ ÑÑÐ°Ð·Ñ Ð´Ð»Ñ Ð½ÐµÑколÑÐºÐ¸Ñ ÑлеменÑов на ÑайÑе.
ÐÑли же Ñакой ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð¾Ð´Ð¸Ð½, Ñо можно задаÑÑ Ð¸Ð»Ð¸ измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа пÑÑмо в HTML коде.
ÐзменÑем ÑÐ²ÐµÑ Ð² HTML коде пÑи помоÑи аÑÑибÑÑа style
ÐÐ»Ñ ÑÑого добавлÑем к ÑÐµÐ³Ñ Ð´Ð»Ñ ÐºÐ¾ÑоÑого нам нÑжно измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа аÑÑибÑÑ style.
<p style=âcolor:red;â>ÐÑимеÑ</p> |
ÐдеÑÑ Ð¶Ðµ пÑи Ð½ÐµÐ¾Ð±Ñ Ð¾Ð´Ð¸Ð¼Ð¾ÑÑи ÑеÑез ; Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе задаÑÑ Ð¸ дÑÑгие CSS ÑвойÑÑва, напÑимеÑ, ÑÐ°Ð·Ð¼ÐµÑ ÑÑиÑÑа, жиÑноÑÑÑ Ð¸ Ñак далее.
<p style=âcolor:red; font-size:20px; font-weight:bolder;â>ÐÑимеÑ</p> |
ÐиÑно Ñ Ð¾Ð±ÑÑно иÑполÑзÑÑ Ð²Ð°ÑÐ¸Ð°Ð½Ñ Ñ Ð·Ð°Ð´Ð°Ð½Ð¸ÐµÐ¼ ÑÑилей в CSS Ñайле, но еÑли вам нÑжно измениÑÑ ÑÐ²ÐµÑ ÑекÑÑа Ð´Ð»Ñ ÐºÐ°ÐºÐ¾Ð³Ð¾ Ñо одного-двÑÑ ÑлеменÑов, Ñо не обÑзаÑелÑно пÑиÑваиваÑÑ Ð¸Ð¼ клаÑÑ Ð¸ поÑом оÑкÑÑваÑÑ CSS Ñайл и Ñам допиÑÑваÑÑ Ñлили. ÐÑоÑе ÑÑо ÑделаÑÑ Ð¿ÑÑмо в HTML пÑи помоÑи Ñега <font> или аÑÑибÑÑа style.
Так же Ð²Ñ Ð´Ð¾Ð»Ð¶Ð½Ñ Ð·Ð½Ð°ÑÑ, ÑÑо еÑÑÑ Ñакое понÑÑие как пÑиоÑиÑÐµÑ ÑÑилей. Так Ð²Ð¾Ñ ÐºÐ¾Ð³Ð´Ð° Ð²Ñ Ð·Ð°Ð´Ð°ÑÑе ÑÐ²ÐµÑ ÑекÑÑа или дÑÑгие ÑÑили в html пÑи помоÑи аÑÑибÑÑа style, Ñо Ñ ÑÑÐ¸Ñ ÑÑилей пÑиоÑиÑÐµÑ Ð±ÑÐ´ÐµÑ Ð²ÑÑе Ñем еÑли Ð²Ñ Ð¸Ñ Ð·Ð°Ð´Ð°Ð´Ð¸Ñе в CSS Ñайле (пÑи ÑÑловии ÑÑо Ñам не иÑполÑзовалоÑÑ Ð¿Ñавило !important)
ЧÑÐ¾Ð±Ñ Ð¸Ð·Ð¼ÐµÐ½Ð¸ÑÑ ÑÐ²ÐµÑ ÑекÑÑа оÑделÑного Ñлова, ÑÑÐ°Ð·Ñ Ð¸Ð»Ð¸ бÑÐºÐ²Ñ Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ обеÑнÑÑÑ Ð¸Ñ Ð² Ñег span и задаÑÑ ÐµÐ¼Ñ Ð½ÑжнÑй ÑвеÑ.
ÐапÑимеÑ:
<p>ÐÑÐ¸Ð¼ÐµÑ <span style=âcolor:#2F73B6;â> ÑекÑÑа</span></p> |
РиÑог полÑÑиÑÑÑ Ð²Ð¾Ñ Ñак:
ÐÑÐ¸Ð¼ÐµÑ ÑекÑÑа
ЧÑо делаÑÑ ÐµÑли внеÑÑннÑе Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð½Ðµ менÑÑÑÑÑ?
ÐазалоÑÑ Ð±Ñ, изменение ÑвеÑа â одна из пÑоÑÑейÑÐ¸Ñ Ð¾Ð¿ÐµÑаÑий пÑи оÑоÑмлении ÑекÑÑа, Ð½Ñ ÑÑо здеÑÑ Ð¼Ð¾Ð¶ÐµÑ Ð¿Ð¾Ð¹Ñи не Ñак?
Ðднако и здеÑÑ ÐµÑÑÑ Ñвои нÑанÑÑ, коÑоÑÑе нÑжно ÑÑиÑÑваÑÑ:
- 1.ÐÑиоÑиÑÐµÑ ÑÑилей, о коÑоÑом Ñ Ð¿Ð¸Ñала вÑÑе. ÐÑли задаваÑÑ ÑÐ²ÐµÑ ÑекÑÑа пÑÑмо в HTML Ñо пÑиоÑиÑÐµÑ Ð±ÑÐ´ÐµÑ Ð²ÑÑе. ÐÑли Ð²Ñ Ð·Ð°Ð´Ð°Ð»Ð¸ его пÑи помоÑи аÑÑибÑÑа style, а он вÑÑ Ñавно не изменилcÑ, Ñо попÑобÑйÑе добавиÑÑ Ðº Ð½ÐµÐ¼Ñ Ð¿Ñавило !important;
<p style=âcolor:#fff!important;â>â¦</p>
- 2.ÐÑобенноÑÑи Ñегов. ÐÑли Ð²Ñ Ð·Ð°Ð´Ð°Ð´Ð¸Ñе ÑÐ²ÐµÑ ÑекÑÑа Ð´Ð»Ñ Ð°Ð±Ð·Ð°Ñа внÑÑÑи коÑоÑого еÑÑÑ ÑÑÑлка, Ñо он измениÑÑÑ Ð´Ð»Ñ Ð²Ñего абзаÑа кÑоме ÑÑÑлки. ЧÑÐ¾Ð±Ñ Ð¸Ð·Ð¼ÐµÐ½Ð¸Ð»ÑÑ ÑÐ²ÐµÑ ÑÑÑлки нÑжно задаваÑÑ ÐµÐ³Ð¾ именно Ð´Ð»Ñ Ñега ÑÑÑлки.
ÐналогиÑно еÑли Ð²Ñ Ð·Ð°Ð´Ð°Ð´Ð¸Ñе ÑÐ²ÐµÑ ÑекÑÑа Ð´Ð»Ñ Ð±Ð»Ð¾ÐºÐ°, внÑÑÑи коÑоÑого Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ ÑпиÑок, Ñо Ð´Ð»Ñ ÑлеменÑов ÑÑого ÑпиÑка он Ð¼Ð¾Ð¶ÐµÑ Ð½Ðµ пÑимениÑÑÑÑ Ð¸ нÑжно бÑÐ´ÐµÑ Ð¾ÑделÑно задаваÑÑ ÐµÐ³Ð¾ именно Ð´Ð»Ñ Ñегов ÑпиÑка.
- 3.ÐеÑиÑование. ЧаÑÑо ÑовÑеменнÑе бÑаÑзеÑÑ ÐºÐµÑиÑÑÑÑ ÑÑили ÑайÑа и даже поÑле внеÑÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ð¹ в код они еÑÑ ÐºÐ°ÐºÐ¾Ðµ Ñо вÑÐµÐ¼Ñ Ð¾ÑобÑажаÑÑ ÑÑаÑÑÑ Ð²ÐµÑÑÐ¸Ñ ÑÑилей. ÐÐ»Ñ ÑеÑÐµÐ½Ð¸Ñ Ð¿ÑÐ¾Ð±Ð»ÐµÐ¼Ñ Ð¼Ð¾Ð¶Ð½Ð¾ обновлÑÑÑ ÑÑÑаниÑÑ Ð¿Ñи помоÑи ÑоÑеÑÐ°Ð½Ð¸Ñ ÐºÐ»Ð°Ð²Ð¸Ñ CTRL+F5.
Так же Ñ Ð²Ð°Ñ Ð½Ð° ÑайÑе Ð¼Ð¾Ð¶ÐµÑ ÑÑоÑÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ Ð´Ð»Ñ ÐºÐµÑиÑованиÑ, из-за коÑоÑого Ð²Ñ Ñак же можеÑе не видеÑÑ Ð²Ð½ÐµÑÑннÑÑ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ð¹ на ÑайÑе.
ÐоÑ, в обÑем Ñо и вÑÑ ÑÑо каÑаеÑÑÑ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑвеÑа в HTML. Ðак видиÑе, ниÑего Ñложного! ÐÑли Ñ Ð²Ð°Ñ Ð²Ð¾Ð·Ð½Ð¸ÐºÐ½ÑÑ ÐºÐ°ÐºÐ¸Ðµ Ñо вопÑоÑÑ â пиÑиÑе Ð¸Ñ Ð² комменÑаÑиÑÑ .
УÑÐ¿ÐµÑ Ð¾Ð² вам и ваÑим пÑоекÑам!
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Здравствуйте, уважаемые читатели блога webcodius.ru. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи «что такое css».
Font-family — задаем имя шрифта в CSS
Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:
font-family: <список имен шрифтов разделенных запятыми>
Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:
p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }
В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.
Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:
- serif — шрифты с засечками;
- sans-serif -шрифты без засечек;
- cursive — шрифты, имитирующие рукописный текст;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты.
Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.
Font-size — задаем размер шрифта с помощью CSS
Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Давайте теперь рассмотрим подробнее способы применения данного свойства.
Размер шрифта можно задавать в абсолютных и относительных величинах. Для этого используются единицы измерения, поддерживаемые CSS. Чтобы задать размер шрифта жестко, используются следующие единицы измерения:
- px — пиксели;
- pt — пункты;
- in — дюймы;
- cm — сантиметры;
- mm — миллиметры;
- pc — пики.
Обозначение единицы измерения указывают после самого значения. Например:
p { font-size: 10px; }
strong { font-size: 12pt; }
При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.
Для задания относительных размеров шрифта используются следующие обозначения:
- em — размер буквы «m» текущего шрифта;
- ex — размер буквы «x» текущего шрифта;
- % — проценты от размера шрифта родительского элемента.
Например:
h1 { font-size: 3em; }
em { font-size: 150%; }
В этом примере заголовок h1 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.
Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:
Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.
Свойство color — задаем цвет текста
Атрибут стиля color задает цвет текста. Синтаксис:
color: цвет
Цвет можно задать с помощью RGB-кода, который записывается в формате:
#<доля красного цвета><доля зеленого цвета><доля синего цвета>
Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h2 на странице выводились красным цветом, необходимо написать такой код CSS:
h2 { color: #ff0000; }
Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:
h2 { color: red; }
Свойства font-weight, font-style, text-decoration и другие
С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.
Пример использования:
em { font-weight: bold; }
Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.
С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:
text-decoration: none|underline|overline|line-through|blink
Для этого атрибута доступны пять значений:
- none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
- underline — устанавливает подчеркнутые текст;
- overline — «надчеркивает» текст, то есть проводит линию над текстом;
- line-through — зачеркивает текст;
- blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.
По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).
Поэтому, кроме ссылок, на веб-странице подчеркиванием лучше ничего не выделять. Потому что пользователи подсознательно решат, что раз подчеркнуто — значит по этому можно кликнуть для перехода. И выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение.
Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:
text-decoration:underline overline line-through;
Результат будет такой:
перечеркнутый подчеркнутый и надчеркнутый текст!
Свойство стиля text-transform позволяет задавать регистр символов текста:
text-transform: capitalize|uppercase|lowercase|none
Свойство может иметь одно из четырех значений:
- capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
- uppercase — текст в верхнем регистре;
- lowercase — текст в нижнем регистре;
- none — не меняет регистр символов.
Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:
p { line-height: 1.5 }
Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:
em { letter-spacing: 5px; }
Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:
h1 { word-spacing: 5px }
Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:
font: [font-style || [font-variant||font-weight] font-size [/line-height] font-family
Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.
Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:
p { font: 10pt «Times New Roman» }
А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:
p { font: italic 12px sans-serif }
На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела «Справочник CSS». До новых встреч!