Определение нескольких значений шрифта одновременно
Свойства шрифта можно определять независимо, но лучше записать все элементы шрифта в одном определении, используя свойство 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.Увеличение отступа между буквами слова
Определение кернинга 1. Напишите letter-spacing в списке CSS-определений и поставьте двоеточие: letter-spacing: 2. Укажите значение свойства letter-spacing: длину, например 2 em. Таким образом устанавливается постоянная величина межсимвольного интервала.
Положительное значение letter-spacing увеличивает обычное расстояние между буквами, а отрицательное – уменьшает. Значение, равное нулю, не изменяет расстояние между буквами, но при его использовании исчезает выравнивание текста.
Популярное: Личность ребенка как объект и субъект в образовательной технологии: В настоящее время в России идет становление новой системы образования, ориентированного на вхождение... Как выбрать специалиста по управлению гостиницей: Понятно, что управление гостиницей невозможно без специальных знаний. Соответственно, важна квалификация... Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (368)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |