Оформление текста и другие базовые возможности
В данной главе мы рассмотрим основные способы использования CSS для задания стилевого оформления текста, а также прочие основные возможности; вы найдете ответы на наиболее часто задаваемые вопро- сы об их применении. Если вы новичок в области CSS, то с помощью приведенных примеров вы узнаете о существовании многих свойств и о методах их использования, что создаст необходимую базу для на- писания собственного кода. Если вы уже хорошо знакомы с технологи- ей CSS, то эта глава сможет подсказать вам необходимые приемы, если в процессе разработки вы вдруг обнаружите, что забыли, как достичь того или иного эффекта.
Приведенные примеры поддерживаются подавляющим большинством броузеров, однако следует помнить о важности тестирования написан- ного кода в различных версиях броузеров. Хотя некоторые несоответ- ствия или отсутствие поддержки предлагаемых методов могут встре- чаться в более ранних версиях броузеров, в целом представленные ре- шения не должны вызывать каких-то серьезных проблем.
Задание определенного шрифта для текста
Решение
Задать определенный шрифт для оформления текста можно с помощью свойства font-family, как показано в следующем примере:
p {
font-family: Verdana;
}
Обсуждение
С помощью CSS можно задавать как определенный шрифт, так и семей- ства шрифтов:
• serif
• sans-serif
• monospace
• cursive
• fantasy
При этом необходимо помнить, что на компьютере пользователя мо- жет не оказаться тех шрифтов, что установлены у вас. Если указанный шрифт отсутствует, текст будет оформлен с помощью используемых бро- узером по умолчанию шрифтов, вне зависимости от определенных вами настроек.
Во избежание подобных недоразумений можно просто-напросто задать название семейства шрифтов, а система пользователя сама определит, какой шрифт следует применить. К примеру, если вы хотите оформить текст шрифтом из семейства sans-serif, к которому относится, напри- мер, Arial, можно использовать следующее правило стиля:
p {
font-family: sans-serif;
}
Вы хотели бы иметь более гибкую возможность управлять внешним ви- дом вашего сайта? Это возможно. В одном блоке описаний можно опре- делить как названия конкретных шрифтов, так и семейств. В качестве примера рассмотрим следующий код, содержащий правило стиля для элемента p:
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
В данном случае указано, что при наличии в системы шрифта Verdana следует использовать именно его; в противном случае броузер должен проверить, установлен ли в системе шрифт Geneva; если и его не окажет- ся, будет осуществлен поиск Arial, а затем Helvetica. При отсутствии в системе всех перечисленных шрифтов броузер должен применить ис- пользуемый в системе по умолчанию шрифт из семейства шрифтов sans- serif.
Если в названии семейства шрифтов присутствуют пробелы, его следу- ет заключить в кавычки, как показано ниже:
p {
font-family: “Courier New”, “Andale Mono”, monospace;
}
Общее название семейства шрифтов никогда не заключается в кавычки и всегда приводится в самом конце списка.
Вы можете абсолютно спокойно использовать на своих страницах сле- дующие шрифты:
Windows Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic Sans, Verdana, Georgia, Garamond
Mac Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville, Andale Mono
Одного взгляда на данный список достаточно, чтобы понять, почему в на- шем правиле стиля мы определили именно такие шрифты: в начале ука- зан наиболее предпочтительный для нас шрифт Verdana, широко рас- пространенный в Windows, затем сходный шрифт для Mac – Geneva. Да- лее приводятся другие шрифты, которые будут использованы, если ни один из первых двух шрифтов не будет найден в системе пользователя.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- 50 СПОСОБОВ ЗАСТАВИТЬ GOOGLE ЛЮБИТЬ ВАШ САЙТ (0)
- Вклад поисковой системы Google в жизнь людей и организаций (0)
- Указание поисковой системе Google на фразы и предложения (0)
- Информирование поисковой системы Google о подборках страниц (0)
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
