» Главная
eXcode.ru » Статьи » Web » Применение CSS
» Новости
» Опросы
» Файлы
» Журнал



Пользователей: 0
Гостей: 16





Цвет и шрифт




Управление цветом в CSS

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

Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока (border-color).

Атрибуты стилей, которые мы собираемся рассмотреть, согласно спецификации Microsoft, относятся к группе атрибутов Color and Background Properties. Всего в эту группу входит семь атрибутов, шесть из которых определяют свойства фона. Кроме цвета фона и его прозрачности, можно управлять фоновой картинкой (координатами ее размещения и способами повторения). К сожалению, Netscape Navigator большинство из этих атрибутов не поддерживает, поэтому мы не будем рассматривать их подробно.

Интерпретация атрибутов цвета в Netscape Navigator и Internet Explorer различна. В Netscape Navigator фоновый цвет отображается только там, где есть текст, а в Internet Explorer фоновый цвет заливает весь блок или строковый элемент вне зависимости от наличия в нем текста.

Цвет текста

В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строковых элементов разметки.

Рассмотрим в качестве блочного элемента разметки ячейку таблицы:(открыть)

TD { color:darkred; }
    

Блочный элемент разметки для ячейки таблицы.
Рис. 10.1. Блочный элемент разметки для ячейки таблицы.

В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом (#003366).

При определении цвета текста для блочного элемента весь текст этого элемента отображается заданным цветом. Частичное изменение цвета возможно, если поместить строковый элемент разметки внутрь блочного:(открыть)

P { color:darkred; }
I { color:#003366;font-style:normal; }
    

Частичное изменение цвета текста внутри блочного элемента
Рис. 10.2. Частичное изменение цвета текста внутри блочного элемента

В данном примере в качестве блочного элемента мы используем параграф, а в качестве строкового элемента (in-line) применяем I. Таблица в данном случае большого значения не имеет, но используется для единообразия с предыдущим примером. В нее мы помещаем параграф со встроенным в него in-line элементом разметки.

Цвет фона текста

В HTML цветом фона можно управлять только для конкретного блочного элемента разметки. Таким элементом может быть вся страница:

<BODY BGCOLOR=...>...</BODY>
    

Или, например, таблица:

<TABLE BGCOLOR=...>...</TABLE>
    

В приведенном ниже примере для выделения текста применено инвертирование цвета фона и цвета текста:(открыть)

<SPAN 
STYLE="background-color:black;color:white;">
как строковые элементы разметки
</SPAN>
    

Инвертирование цвета фона и цвета текста для выделения текста.
Рис. 10.3. Инвертирование цвета фона и цвета текста для выделения текста.

При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только в Internet Explorer 4.0. Поддержка CSS в версиях Netscape Navigator гораздо скромнее.

Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в Internet Explorer, начиная с версии 4.0: background-image; background-repeat; background-attachment; background-position. Все свойства фона можно описать в атрибуте background:

background:transparent|color url repeat 
           scroll position 
    

Пример:

P { background: gray 
    http://intuit.ru/intuit.gif 
    no-repeat fixed center center; }
    

Однако при всем изобилии возможностей, злоупотреблять ими не стоит.

Шрифт

Шрифтам в компьютерной графике всегда уделялось много внимания, и World Wide Web не является исключением. Но все богатство и разнообразие существующих шрифтов для русского языка ограничено фактически тремя шрифтами: serif (обычно Times или другой шрифт с засечками), sans-serif (Arial, Helvetica или другой шрифт без засечек) и monospace (Courier). Если быть точным, то здесь перечислены семейства шрифтов. Обычно каждое из этих семейств представлено только одним кириллическим шрифтом.

Автор документа для управления отображением букв может применить несколько атрибутов, влияющих на шрифт:

font-family - семейство начертаний шрифта (гарнитура);

font-style - прямое начертание или курсив;

font-weight - "усиление" (насыщенность) шрифта, "жирность" букв;

font-size - размер шрифта (кегль). Задается в пикселах (px) и типографских пунктах (pt).

font-variant - вариант начертания (обычный или мелкими буквами - капитель).

Все эти параметры можно совместить в одном атрибуте font:

font:bold 12pt sans;
    

Правда, нет никакой уверенности в том, что последнее определение шрифта будет работать во всех браузерах.

При использовании различных гарнитур (font-family) следует помнить, что наличие или отсутствие необходимой автору гарнитуры всецело зависит от предпочтений пользователя. Для кириллицы это может вылиться в появление абракадабры там, где автор применяет отсутствующие у пользователя шрифты.

Самое неприятное, с чем можно столкнуться при использовании шрифтов - это несоответствие моноширинных шрифтов, которые применяются в HTML-формах. Обратная связь с пользователем в этом случае невозможна.

Спецификация CSS предусматривает перечисление шрифтов в описаниях стилей, что позволяет частично решить проблему подбора шрифта. К сожалению, в Unix и Windows шрифты не согласованы. Фактически, при разработке страниц в CSS используются только классы шрифтов (serif, sans-serif и monospace).

Гарнитура (font-family)

Гарнитура шрифта - это набор начертаний одного шрифта. Шрифт может иметь "прямое" начертание (normal), курсив (italic), "скошенное" (oblique), усиленное по насыщенности ("жирное", bold), "мелкое" (капитель, small-caps) и т.п.

Наиболее распространенные гарнитуры в российской части Web - это Times, Arial, Courier. Причем все они принадлежат к разным группам шрифтов. Times - это пропорциональный шрифт "с засечками" (serif), Arial - это пропорциональный шрифт "без засечек" (sans-serif), а Courier - это моноширинный шрифт (monospace). В Unix вместо Arial чаще применяется Helvetica.

В чем разница между этими группами шрифтов, можно показать на примере:(открыть)

Демонстрация групп шрифтов.
Рис. 10.4. Демонстрация групп шрифтов.

Если в вашей операционной системе поддерживается шрифт symbol, то вы увидите нормально записанную формулу суммы, если же нет - абракадабру. Однако в данном случае применение обычного шрифта вообще бессмысленно - в нем формула не будет отображена правильно.

Теперь рассмотрим менее экзотический пример. Речь пойдет о тексте в поле ввода формы.

В первом случае мы применяем просто шрифт по умолчанию. Далее изменим его на другой моноширинный шрифт:(открыть)

шрифт по умолчанию:<>
<INPUT VALUE="Русский язык"> моноширинный шрифт:<>
<INPUT STYLE="font-family:Courier;" VALUE="Русский язык"> <INPUT STYLE="font-family:Courier New" VALUE="Русский язык">

Смена шрифтов в форме ввода.
Рис. 10.5. Смена шрифтов в форме ввода.

В операционной системе, в которой тестировались примеры для этой работы, нет киррилицы в гарнитуре Courier, но зато она есть в гарнитуре Courier New. Следовательно, тот пример, в котором применяется гарнитура Courier, будет у нас отображаться абракадаброй.

Если пользователь работает с другим набором шрифтов, результат будет иным.

<P ALIGN=left STYLE="font-size:24px;
    font-family:serif;color:darkred;">
Эта строка набрана пропорциональным шрифтом
с засечками.</P> 
<P ALIGN=left STYLE="font-size:24px;
    font-family:sans-serif;color:darkred;">
Эта строка набрана пропорциональным шрифтом 
без засечек.</P> 
<P ALIGN=left STYLE="font-size:24px;
    font-family:monospace;color:darkred;">
Эта строка набрана моноширинным шрифтом.</Р>
        

При указании имени группы шрифтов, как показано выше, браузер подбирает подходящий для отображения шрифт данной группы из имеющегося набора шрифтов.

Если оптимизация браузера автора страницы не устраивает, можно указать непосредственно имя гарнитуры шрифта:(открыть)

<SPAN STYLE="font-family:symbol;
      padding-left:65px;">
N</SPAN><BR>
<SPAN STYLE="font-family:symbol;
      font-size:24px;">
A<SUB>x,y</SUB>=е(y<SUB>a</SUB>+x<SUB>a</SUB>)
</SPAN><BR>
<SPAN STYLE="font-family:symbol;
  padding-left:60px; font-size:20px;">a=1
</SPAN>
        

Прямое указание гарнитуры шрифта.
Рис. 10.6. Прямое указание гарнитуры шрифта.

Данный пример со всей очевидностью показывает, что при выборе шрифта, а точнее, гарнитуры шрифта, не нужно мудрить. Лучше всего пользоваться категориями групп шрифтов, тогда текст с точки зрения языка будет везде отображаться правильно. Правда, достигаться эта универсальность будет за счет ограничения возможностей начертания шрифта.

Кегль (font-size)

Кегль - это, если говорить упрощенно, размер шрифта. Более подробное объяснение следует искать в специальной литературе. Нам достаточно знать, что CSS через параметр font-size позволяет управлять размером букв.

Размер шрифта можно задавать в типографских пунктах (pt, 0,35 мм) или пикселах (px). При установке кегля следует помнить, что font-size задает не высоту буквы, а размер "очка" под букву, который больше самой буквы.

Вот несколько примеров использования font-size:(открыть)

<P STYLE="font-size:12pt;">
Кегль параграфа установлен в 12 пунктов</P>
<P STYLE="font-size:12px;">
Кегль параграфа установлен в 12 пикселов</P> 
<P STYLE="font-size:120%;">
Кегль параграфа установлен в 120% от размера 
букв охватывающего параграф элемента</P>
    

Установка размера кегля в абсолютных и относительных единицах измерения.
Рис. 10.7. Установка размера кегля в абсолютных и относительных единицах измерения.

Как видно из последнего примера, кегль можно задавать не только в абсолютных единицах, но и в относительных. Кроме процентов, существует еще несколько условных единиц измерения кегля, которые можно применять в CSS:(открыть)

<P STYLE="font-size:large;">
Размер кегля large</P>
<P STYLE="font-size:small;">
Размер кегля small</P>
<P STYLE="font-size:x-small;">
Размер кегля x-small</P>
<P STYLE="font-size:xx-small;">
Размер кегля xx-small</P>
    

Установка размера кегля в условных единицах измерения.
Рис. 10.8. Установка размера кегля в условных единицах измерения.

Аналогично x-small и xx-small, существуют размеры x-large и xx-large. Кроме того, есть larger, smaller и medium.

Начертание

У каждой гарнитуры (font-family) имеется несколько начертаний. Каждое из них определяется в CSS тремя параметрами стиля: font-style, font-variant, font-weight.

Атрибут стиля font-style определяет прямое начертание (normal) и курсив:(открыть)

<P STYLE="color:darkred;font-style:normal;">
Прямое начертание</P>
<P STYLE="color:darkred;font-style:italic;">
Курсив</P>
    

Начертание гарнитур шрифтов.
Рис. 10.9. Начертание гарнитур шрифтов.

Если хочется усилить насыщенность ("жирность") шрифта, то в описании стиля указывают атрибут font-weight, который принимает значения normal или bold:

<P STYLE="color:darkred;font-style:italic;
   font-weight:bold;">Курсив</P>
    

Хотя шрифт и масштабируется при помощи изменения кегля, качество его начертания при этом обычно страдает. Для качественного отображения мелких букв в некоторых гарнитурах присутствует начертание капитель. В CSS для использования капители зарезервирован атрибут font-variant, который принимает значения normal и small-caps. На практике применение font-variant проблематично из-за отсутствия капители в стандартном наборе кириллических шрифтов.

К началу статьи





Добавил: MadvEXДата публикации: 2006-02-20 18:06:53
Рейтинг статьи:3.33 [Голосов 6]Кол-во просмотров: 14422

Комментарии читателей

Всего комментариев: 1680

2017-06-26 12:17:01
Tarasvox
Пару часов назад анализировал материалы интернет, неожиданно к своему восторгу заметил четкий сайт. Вот посмотрите: <a href=http://mila1.bz/>mila1 biz в обход</a> . Для моих близких данный сайт показался весьма важным. До встречи!

2017-06-26 08:57:35
TimofeyDrole
Целый день серфил контент инета, неожиданно к своему восторгу увидел познавательный сайт. Вот смотрите: <a href=http://mix-24.biz/>mix24 biz</a> . Для меня данный сайт оказал незабываемое впечатление. Всего наилучшего!

2017-06-26 05:43:25
FedorFaday
Минуту назад изучал содержание сети интернет, неожиданно к своему удивлению увидел восхитительный ресурс. Гляньте: <a href=http://bob-24.biz/>bob24 biz</a> . Для нас данный веб-сайт произвел яркое впечатление. Удачи!

2017-06-26 02:23:19
FilippSeeft
Сегодня вечером наблюдал содержание интернет, неожиданно к своему удивлению увидел актуальный ресурс. А вот и он: <a href=http://24-biz.biz/>24 biz в обход блокировки</a> . Для меня данный веб-сайт оказался весьма привлекательным. Успехов всем!

2017-06-25 22:57:40
Yakovinsof
Весь день наблюдал материалы интернет, неожиданно к своему восторгу увидел важный веб-сайт. Вот: <a href=http://legalrce.com/>легал рц</a> . Для меня этот ресурс произвел радостное впечатление. Всех благ!

2017-06-23 00:07:18
bookeenJar
Мечтаете сэкономить свои средства на путешествии? Только оформите запрос в интернациональной системе поиска Букинг.ком (официальный веб-сайт на русском языке). Резервирование пансионов онлайн позволяет подобрать свыше 700000 вариантов для размещения в 221-й державе мира, принимать участие в акциях и спецпредложениях и быть в ориентированности самых последних новостей по подобранному направлению.

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


[url=http://bookeeng.com/]букинг ком официальный сайт[/url]

2017-06-22 10:53:00
bookeengJar
Задумали сэкономить на поездке? Просто-напросто оформите запрос в интернациональной системе поиска Букинг.ком (официальный интернет-сайт на русском языке). Резервирование отелей он-лайн помогает подобрать больше 700000 вариантов для размещения в 221-й государстве мира, быть участником в акциях и спецпредложениях и быть в курсе последних новинок по подобранному направлению.

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


[url=http://bookeeng.com/]букинг ком официальный[/url]

2017-06-21 00:26:14
Michaeltob
Турбо-режим или "Jet Cool" используется чтобы быстрого выхода на заданный режим.
Ассортимент может обретаться оснащен встроенным гигростатом, позволяющим регулировать высота «вырабатываемой» влажности.
Практически не понижают питание кислорода в окружающем воздухе.
Приборы этого типа могут составлять высокотемпературными - когда излучательный элемент раскалён и предаёт более 90% тепла излучением, а также низкотемпературными - обычно они представляют из себя панели порядочный площади, которые монтируют на стены, они передают излучением около 70% тепла.
С наступлением утра разве присутствие включении света сплит-система переходит в обычный режим кондиционирования.

<a href=http://inginerservis.ru/>система отопления</a>
http://inginerservis.ru/ - ремонт кондиционеров
<a href=http://inginerservis.ru/voprosiiotveti.html>аварийный ремонт</a>

ТИПЫ ОСУШИТЕЛЕЙ ПО ПРИНЦИПУ РАБОТЫ
Ионизаторы часто применяют в жилых домах, офисах, а также детских учреждениях и для производстве, сколько позволяет в значительной степени снизить опасность распространения многих инфекций, которые передаются воздушно-капельным путем и повышает иммунитет.
Форма Daikin FTXR28EV1B9 /RXR28EV1B9 серии Ururu Sarara представляет собой привычную сплит-систему, в которой кроме стандартных функций реализован подмес наружного воздуха.
Троп: разве у вас келья площадью 25 кв.
Газовые котлы считаются наиболее распространенным типом систем индивидуального отопления в частных владениях граждан нашей страны.

2017-06-19 21:20:58
NikolayLooth
гиалуронка животного происхождения <a href=http://ellemarket.com/gialuronika-gel-aktivator-dlya-kozhi-lica-kupit-cena.html>гиалуронка амалайн отзывы</a>
.

2017-06-13 11:05:20
Dariusmus
Дорогие мои, ну зачем находить велосипед, разве уже придуманы соединения, рассчитанные специалистами и прошедшие проверку временем?!
Теплицы из поликарбоната бывают самых разнообразных форм и размеров, объемов.
Каркасное укрытие растений.
Чтобы того чтобы воздухообмен был более эффективным, вентиляционные отверстия необходимо расположить в направлении господствующих ветров.
Ориентир тургор листьев.
Даже присутствие установке качественного поликарбоната УФ-защитным покрытием вниз, а не к солнцу, словно рекомендует деятель, материя теряет свойства и разрушается.
Разве «Агроспаном» планируется накрывать теплицу, надо держать в виду, что поверх него надо разместить разряд плёнки.
Истечение штока соединяется с верхними фрамугами через гибкие тяги.

<a href=http://agrohoztorg.ru/каталог-товаров/сетка-притеняющая/>затеняющая сетка для растений купить</a>
http://agrohoztorg.ru/каталог-товаров/садовый-инвентарь/ - купить садовый инвентарь
http://agrohoztorg.ru/каталог-товаров/садовый-инвентарь/ - садовый инструмент

Дозволено скашивать и позднее, только более взрослые растения имеют грубые стебли, они дольше перегнивают в почве.
Изготовление теплиц любых размеров, в т.
УФ-слой защищает только от жесткого коротковолнового излучения в первую очередь сам вещь!
Это обеспечивается благодаря тому, сколько в состав изделий «Агроспан» входит высококачественный ультрафиолетовый стабилизатор, дающий нетканой основе высокую устойчивость к солнечному излучению – одному из главных разрушающих факторов окружающей среды.
Довольно только сверху накинуть его для верхушки растений, а к углам нетканого материала привлекать бремя, примерно кирпичи, для не сдуло.
Укрывной вещество Агроспан: преимущества и недостатки
Строй материала мульчи позволяет судить полив и платить жидкие удобрения.
В связи с этим, некоторые производители начали изготавливать цветные укрывные материалы.
Ваше имя: *
Текст записи: *
Имя:

Пароль:



Регистрация

Каким почтовым клиентом вы пользуетесь?
Мышью
51% (83)
MS Outlook / Outlook Express
15% (25)
Eudora
0% (0)
Thunderbird
7% (12)
Веб-интерфейсом
20% (33)
Почта России
6% (9)

Проголосовало: 162
Origin:
- Ори, джинн! Ори, с#ка!
Рейтинг: 6.2/10 (4)
Посмотреть все анекдоты