2015-04-01
565
Свойства элемента можно изменять в результате реакции на события, связанные с элементом.
Пример:
<BODY>
<H3 align=center onmouseout= “this.style.color= ‘black’ ”
onmouseover= “this.style.color= ‘white’ ”>
Изменение цвета заголовка </H3>
</BODY>
Способы сокращения таблицы стилей
| Группировка разных селекторов в виде списка селекторов, разделяемых запятыми | |
| H3 {color: blue} H4 {color: blue} | H3, H4 {color: blue} |
| Можно сгруппировать определения и определить одно правило: | |
| H3 {font-family: Arial} H3 {font-weight: bold} H3 {font-size: 12pt} | H3 {font-family: Arial; font-weight: bold; font-size: 12pt} |
| Некоторые свойства позволяют задать несколько значений: | |
| H3 {font: Arial bold 12pt } |
Вопросы для повторения
- Что такое селектор и определение, как составить правило CSS?
- В чем заключается связывание таблицы стилей с документом?
- Как внедрить таблицу стилей в документ?
- Каким образом импортировать таблицу стилей в документ?
- Для чего задают классы?
- Для чего определение стиля встраивают в конкретный тэг?
Настройка параметров шрифта и текста
В оставшейся части данной главы мы познакомимся с основными атрибутами форматирования CSS и их использованием в сценариях JavaScript. Эти атрибуты можно разделить на группы по своему назначению. Работе с каждой из этих групп будет посвящен отдельный раздел. В данном разделе рассматривается группа атрибутов, задающих различные параметры шрифта и текста, которым отображается элемент.
Шрифты
Следует отметить, что возможности управления шрифтами в CSS не намного шире, чем в HTML, но пользоваться CSS очень удобно, в чем вы скоро убедитесь. Кроме этого, написание правил CSS для текстовых блоков позволяет значительно уменьшить размеры HTML-кода. Для задания параметров шрифтов в HTML применяется тег <FONT>. Он всегда парный, т.е. <FONT> </FONT>. С его помощью можно указывать гарнитуру шрифта (атрибут face), размер (size) и цвет (color). В CSS то же самое реализуется с помощью свойств.
§ font-family – данное свойство задает гарнитуру шрифта (гарнитура – синоним понятия "шрифт"), т.е. семейство шрифтов, которое будет применено к элементу. Например, можно указать различные семейства шрифтов: Times New Roman, Verdana, Courier и т.д. Однако учитывая, что из указанного конкретного семейства шрифтов на компьютере пользователя может быть ни один не установлен, можно для надежности задать общее семейство шрифтов:
· serif – шрифты с засечками, например, Times New Roman;
· sans-serif— шрифты без засечек, например. Anal или Verdana;
· monospace — моноширинные шрифты, например, Courier New с одинаковыми
по ширине символами наподобие печатной машинки;
· cursive – курсивный или рукописный шрифты, такие как Calisto MT;
· fantasy – декоративные шрифты, буквы которых могут имитировать, например, рукописный текст.
В качестве значения для атрибута font-family можно указать целый перечень семейств шрифтов, разделенный запятыми. В таком случае при отсутствии в системе шрифта, стоящего в списке первым, будет взят второй и т.д. Обычно в списке семейств шрифтов последним ставят одно из общих семейств, поскольку оно почти всегда позволяет подобрать соответствующий шрифт.
Если название семейства состоит из нескольких слов, оно должно быть записано в кавычках. При этом будьте осторожны в сценариях при вложении одних кавычек в другие, например:
elem.style.fontFamily= ‘ “Times New Roman”, serif ’
§ font-weight – данное свойство определяет насыщенность шрифта, т.е. толщину его линий. Практически любому семейству шрифтов присущи шрифты с нормальным и полужирным начертанием. Двум данным вариантам соответствуют значения атрибутов normal и bold. Если существует больше градаций жирности, то для их выбора атрибуту font-weight присваивается одно из возможных числовых значений: 100, 200, 300, 400 (тоже, что и normal), 500, 600, 700 (тоже, что и bold), 800, 900.
§ font-style – свойство задает стиль шрифта. Допускаются значения: normal (обычный прямой шрифт), oblique (наклонный шрифт), italic (курсивный). Здесь возникает справедливый вопрос: в чем отличие "курсивного" шрифта от "наклонного"? Суть состоит в том, что значение italic использует встроенное в шрифт курсивное начертание. Как правило, набор символов шрифта включает набор букв нормального начертания (normal), полужирного (bold) и курсивного (italic). Иногда шрифт содержит набор комбинаций полужирного курсива (bold italic), возможны и другие варианты начертания. Если в шрифт не входят наборы bold и italic, то полужирное начертание имитируется утолщением букв, а курсив – простым наклоном букв шрифта, что и соответствует значению oblique. По умолчанию для свойства используется значение normal.
§ font-size – свойство позволяет указать размер применяемого шрифта. Поддерживаются любые значения с размерностью длины. При использовании единиц em или процентов размер шрифта вычисляется относительно размера шрифта родительского элемента.
§ line-height – позволяет задать высоту строки. Чаще всего данный атрибут указывается в единицах em или процентах. В обоих случаях это означает, что высота строки будет вычисляться относительно высоты шрифта.
§ font – обобщающее (или стенографическое, как принято говорить в CSS) свойство, позволяющее в краткой форме записать все возможные свойства шрифта (т.е. это атрибут сокращенного форматирования). Например, если нужно в одном правиле форматирования задать сразу много свойств шрифта:
font-family: sans-serif;
font-weight: bold;
font-style: oblique;
font-size: 2em;
line-height: 3em;
то можно записать тоже самое сокращенно с помощью стенографического атрибута font:
font: oblique bold 2em/3em sans-serif;
