1.7 Стиль элемента – альтернатива устаревшим тегам и атрибутам. - HTML - Каталог статей

1.7 Стиль элемента – альтернатива устаревшим тегам и атрибутам.

Урок №1: Введение в языки разметки

Рассмотренный в предыдущем разделе набор элементов XHTML довольно широк, однако и он не позволяет решить любую задачу по оформлению web страниц. Многие элементы логического форматирования отображают заключенный в них текст одинаково, или без изменений и это одна из основных причин по которой вам необходимо использовать стиль CSS.

Однако, основным назначением стилей CSS является отделение структуры документа от его представления и расширение возможностей визуального оформления элементов XHTML.

Применение стиля

Детальному изучению Каскадных Таблиц Стилей посвящена отдельная часть нашего курса, в рамках же данного занятия нам предстоит лишь познакомиться с одним из способов применения стилей. Так же мы рассмотрим возможности правил CSS для шрифрового оформления текста страницы.

Наиболее простым способом применения стилей является использование атрибута style:

<элемент style="правила стиля"> ...

Правила стиля записываются в виде пар "название:значение;" последовательно одно за другим. Например, если необходимо установить в заголовке 1го уровня размер текста равным 16 пунктам, а цвет сделать темно-красным, можно использовать следующий набор правил:

Листинг №1.7.1: Использование стиля

<body>
 <h1>Обыкновенный заголовок 1го уровня</h1>
 <h1 style="font-size: 16pt; color: #660000;">
 Заголовок 1го уровня, использующий стили.
 </h1>
</body>

Стили шрифтового оформления текста

CSS дают дизайнеру поистине великолепные возможности по форматированию шрифтов, в чем вы сами наглядно убедитесь, опробовав на практике следующие правила:

font-family: название шрифта;
font-size: размер;
font-weight: normal | bold; - жирность начертания
font-style: normal | italic; - курсив
color: цвет символов;

Свойства font-weight и font-style используются довольнно тривиально и не стоят подробного рассмотрения. Они заменяют элементы b и i соответственно. Аспекты применения остальных свойств рассматриваются ниже.

Свойство font-family

Это свойство применяется для указания используемого шрифта или семейства шрифтов. Ниже показан пример назначения шрифта "Comic Sans MS" абзацу:

<p style="font-family: Comic Sans MS;"> ...

Текст абзаца будет выведен шрифтом "Comic Sans MS".

Совет: для того, чтобы узнать названия шрифтов, доступных вам для использования, раскройте панель управления Windows и выберите пункт "Шрифты" ("Fonts").

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

Как же поступить в этом случае? Можно указать не один шрифт, а несколько, перечисляя их через ",":

<p style="font-family: Century Gothic, Tahoma, Arial;"> ...

Тогда браузер попытается отобразить текст первым шрифтом из списка. Если указанный шрифт на компьютере отсутствует, будет сделана попытка воспользоваться вторым из списка. Если и второй будет недоступен, браузер попробует использовать следующий — третий. Потом — четвёртый, пятый и так далее.

Но и в этом случае остается вероятность (пусть и небольшая) отсутствия всех перечисленных шрифтов на компьютере пользователя! Что же делать тогда? Необходимо завершать список указанием имени семейства, к которому относятся перечисленные шрифты. Ниже приводятся названия семейств и несколько относящихся к ним шрифтов:

serif - антиква, шрифты с "засечками". Наиболее распостраненный пример - Times New Roman. К этому семейству относятся так же Bookman Old Style, Garamond, Georgia, Minion Web.
sans-serif - гельветика, шрифты "рубленные" или без "засечек". Наиболее распостраненные шрифты этого семейства Arial, Tahoma, Verdana, Century Gothic, Franklin Gothic, Impact.
monospace - моноширный, с одинаковой шириной знакоместа для каждого символа. Наиболее известные шрифты данного семейства - Courier, Courier New, Lucida Console, Monotype.com.

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

<p style="font-family: Century Gothic, Tahoma, Arial, sans-serif;"> ...

Свойство font-size

C помощью данного свойства можно указать размер шрифта. Размер шрифта принято указывать в специальных единицах - пунктах(pt, 1pt = 1/72 дюйма). Однако, нет препятствий для использования других единиц измерения, таких как дюйм (in), сантиметр (cm), миллиметр (mm) и, наконец, пиксель (px). Название единицы измерения должно следовать сразу за величиной размера:

<p style="font-size: 12pt;"> ...

Свойство color

Цвет символов текста можно указать, используя свойство color. При этом цвет вожет быть задан как названием, так и с помощью палитры web цветов:

<p style="color: red;"> ... 
<p style="color: #FF0000;"> ...

В обоих случаях цвет текста будет красным.

Еще пару слов об элементах

Уже сейчас, используя изученные стили оформления текста вы можете "заставить" выглядеть любой элемент логического (и не только) форматирования так, как вам захочется. Но иногда появляется необходимость, выделить фрагмент, к примеру, только цветом, какой элемент использовать? Кому назначать стиль? Специально для таких ситуаций, существует элемент <span>. Это элемент - пустышка, обертка, которую можно сделать красивой, благодаря стилям:

Листинг №1.7.2: Использование элемента span

<p style="color: #000066;">Предположим, что в тексте абзаца необходимо выделить цветом <span style="color: #FF0000;">одно или несколько слов</span>. Используйте для этих целей элемент <span style="font-weight: bold; color: red;">"span"</span>. </p>

<span> является линейным элементом, и не подходит для форматирования крупных текстовых блоков. Для этой цели необходимо использовать его блочный аналог - элемент <div>.

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 2656 | Рейтинг: 0.0/0

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

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]