Определение нескольких значений шрифта одновременно

Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство font.

В примере 6 определяется заголовок первого уровня и класс copy, который затем применяется к абзацам в тексте. С помощью специального стиля описывается тег заголовка третьего уровня.

 

Определение в правиле нескольких атрибутов

1. Введите свойство font: и поставьте двоеточие. Затем укажите следующие значения:

<font-family>

<font-style>

<font-variant>

<font-weight>

<font-size>

<font-height>

<visitor-style>

2. Укажите значение font-weight и нажмите клавишу пробела

bold

3.Укажите значение font-style и нажмите клавишу пробела

italic

4. Определите значение font-variant и нажмите клавишу пробела

small-caps

5. Введите значение font-size

26px

6. Введите слэш (/), значение line-height и пробел

/3em

7. Укажите значение font-family

"milion web", Georgia, "Times New Roman", Times, serif;

 

Пример 6

 

<html>

<head>

<style type="text/css">

h1 {

font: bold italic small-caps 2.5em/3em "milion web", Georgia, "Times New Roman", Times, serif;

}

h3 {

font: caption;

}

.copy {

font: 10px/20px Arial, Helvetica, Geneva, sans-serif;

}

</style>

</head>

<body>

<br>

<h1> Введение в книгу </h1>

<h3> Инструментарий Microsoft и электронная коммерция </h3>

<br>

<p class="copy"> Быстрое развитие ....

</p>

</body>

</html>

 

Рис.8. Определение нескольких значений шрифта, используя свойство font

 

Использование стилей посетителя

Было бы удобно, если бы стили шрифта, которые использует посетитель страницы, совпадали с вашими стилями. Этого можно добиться при работе с Internet Explorer 5/6 и Netscape, определив стиль шрифта с помощью ключевых слов (например font: icon:):

· Caption используется для написания текста на кнопках;

· Icon применяется для текста на иконках;

· Menu выводится в выплывающих меню и списках;

· Massage-box применяется в диалоговых окнах;

· Small-caption удобен для подписей под элементами управления;

· Status-bar задействуется в строке состояния.

Если вы не хотите определять какой-либо атрибут, просто не включайте его в список. Вместо него браузер воспользуется значением, установленным по умолчанию.

 

 


II. Управление текстом

 

Кернинг

Одна из особенностей CSS заключается в том, что HTML-стили не имеют функции, которая позволяла бы легко изменять отступ для текста, включая отступ между отдельными буквами (Кернинг), словами и строками текста в абзаце. В отличие от HTML при использовании CSS, можно легко управлять отступами в тексте и изменять их по своему усмотрению.

Кернинг означает отступ между буквами в слове. Увеличение отступа часто позволяет улучшить читабельность текста. С другой стороны, слишком большой отступ может затруднить чтение, так как отдельные слова будет сложно различить на странице.

В примере 1 увеличивается отступ между буквами слова «бизнеса».

Пример 1

 

<html>

<head>

<style type="text/css">

.str {

letter-spacing: 2em;

}

</style>

</head>

<body>

Быстрое развитие коммуникационных технологий в настоящее время трансформирует многие процессы в современном обществе.

Не является исключением и сфера <span class="str">бизнеса</span>. Интернет, как наиболее....

</p>

</body>

</html>

Рис.1.Увеличение отступа между буквами слова

 








Дата добавления: 2016-02-16; просмотров: 441;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.007 сек.