Полезное в сети
Всегда в теме
Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
| Главная » Статьи » Образовательные » Программирование |
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)
| В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для сайта, может отображаться только в том случае, если этот шрифт имеется в браузере/системе, с которого выполняется доступ к этому сайту. Дано описание следующих CSS-свойств: font-family font-style font-variant font-weight font-size font Семейство шрифта [font-family] Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или страницы. Если первый шрифт списка не найден в браузер/системе, то ищется следующий шрифт списка, пока не будет найден подходящий. Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее. Family-name Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma". Generic family Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet". При указании шрифтов для вашего сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты. Список шрифтов может выглядеть так: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} Заголовки будут отображаться шрифтом "Arial". Если он не установлен, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif. Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках. Стиль шрифта [font-style] Свойство font-style определяет normal, italic или oblique. В примере все заголовки будут показаны курсивом italic. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} Вариант шрифта [font-variant] Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите пример: ABCABC Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра. h1 {font-variant: small-caps;} h2 {font-variant: normal;} Вес шрифта [font-weight] Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;} Размер шрифта [font-size] Размер шрифта устанавливается свойством font-size. Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'. Тогда во многих браузерах пользователь сможет сам настроить размер шрифта, который будет ему удобен для чтения. Сокращённая запись [font] Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле. Например, вот четыре строки описания свойств шрифта для : p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Используя сокращённую запись, код можно упростить: p { font: italic bold 30px arial, sans-serif; } Порядок свойств font таков: font-style | font-variant | font-weight | font-size | font-family Текст Форматирование и установка стиля текста - ключевая проблема для любого дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства: text-indent text-align text-decoration letter-spacing text-transform Отступы [text-indent] Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам : p { text-indent: 30px; } Выравнивание текста [text-align] CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify. В примере текст заголовочных ячеек таблицы выравнивается вправо, а в ячейках данных - по центру. Кроме того, нормальные параграфы - justify: th { text-align: right; } td { text-align: center; } p { text-align: justify; } Декоративный вариант [text-decoration] Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере подчёркнуты, - имеют черту над текстом, а <h3> - перечёркнуты. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } Интервал между буквами [letter-spacing] Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах и 6px - в заголовках , то используется такой код: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } Трансформация текста [text-transform] Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде. Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform: capitalize: Капитализирует каждое слово. Например: "john doe" станет "John Doe". uppercase: Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE". lowercase: Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe". none: Трансформации нет - текст отображается так же, как в HTML-коде. Для примера мы используем список имён. Все имена выделены с помощью • (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром. Видите, HTML-код в этом примере в действительности записан в нижнем регистре. h1 { text-transform: uppercase; } li { text-transform: capitalize; } Ссылки Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить на интересные эффекты на ваш сайт. Для этого используются так называемые псевдоклассы. Что такое псевдокласс? Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга. Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом . В CSS мы также можем использовать a в качестве селектора: a { color: blue; } Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок. a:link { color: blue; } a:visited { color: red; } Псевдокласс: link Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал. В примере кода непосещённые ссылки - синие. a:link { color: #6699CC; } Псевдокласс: visited Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые. a:visited { color: #660099; } Псевдокласс: active Псевдокласс :active используется для активных ссылок. В примере активные ссылки имеют жёлтый фон. a:active { background-color: #FFFF00; } Псевдокласс: hover Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши. Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так: a:hover { color: orange; font-style: italic; } Пример 1: Эффект при нахождении указателя над ссылкой Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover. Пример 1a: Расстояние между буквами Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки: a:hover { letter-spacing: 10px; font-weight:bold; color:red; } Пример 1b: UPPERCASE и lowercase В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте! Пример 2: Удаление подчёркивания ссылок Обычный вопрос - как удалить подчёркивание ссылок? Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего сайта. Люди привыкли видеть на страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта. Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none. a { text-decoration:none; } Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов. a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; } | |
| Просмотров: 1273 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
