... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Практический пример применения стилей. Заголовок.

 

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов


Мы уже достаточно много узнали о свойствах CSS и можем использовать их на практике. Верстку сайта теперь можно дополнить CSS-правилами, с тем чтобы код стал проще и как можно больше удовлетворял нашим потребностям. Ранее при верстке сайта Вы не пользовались средствами CSS, поэтому не все поставленные задачи Вам удавалось решить. Теперь Вы можете использовать параллельно HTML и CSS.

Заголовок

Итак, первый фрагмент кода был следующий:

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.0 Transitional //EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<ТITLE>Желтый клин</ТITLE>
<BASEFONT face="Arial">
</HEAD>

Директиву DTD, естественно, менять не будем, а вот в секцию HEAD внесем несколько изменений. Самое первое - удалим элемент basefont, который задает базовую гарнитуру шрифта (как вы помните, элемент basefont работал только в браузере Internet Explorer). Вместо него напишем CSS-правило, определяющее базовые параметры шрифта, которые будут работать уже во всех браузерах.

Прежде чем писать первые CSS-правила, следует определиться - встроенную или внешнюю таблицу стилей будем использовать. Так как мы имеем дело пока с одним документом, давайте помещать CSS-правила во встроенной таблице стилей, т.е. между тегами <STYLE> </STYLE> в заголовке HTML-документа. Чтобы указать, что таблицы стилей будут писаться на языке CSS, следует также задать атрибут type="text/css" для элемента STYLE. Тогда код приведенной части документа изменится на такой:

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<ТITLE>Желтый клин</ТITLE>
<STYLE type="text/css"> ... Здесь будут записываться CSS-правила для документа ... </STYLE>
</HEAD>

Теперь запишем первое CSS-правило, которое заменит элемент basefont и задаст гарнитуру Arial для всех текстовых блоков. В нашем случае гарнитура относится к свойствам шрифта, которые являются наследуемыми. Как уже говорилось ранее, чтобы задать значение по умолчанию для всех элементов HTML-документа, в качестве селектора для такого правила нужно выбрать элемент верхнего уровня в дереве элементов, чтобы все остальные унаследовали это свойство от него. Давайте в качестве селектора выберем элемент body и запишем правило, которое нужно поместить между тегами <STYLE> </STYLE>:

BODY { font-family: Arial, sans-serif; }

Таким образом, мы определили базовую гарнитуру Arial для всех текстовых блоков в этом документе. Теперь рассмотрим следующий фрагмент кода страницы:

<BODY bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
<MAP name="country">
<AREA shape="rect" alt="Английская версия" coords="69,5,94,18" href="/en">
<AREA shape="rect" alt="Украинская версия" coords="38,5,63 ,17 " href="/ua">
<AREA shape="rect" alt="Русская версия" coords="6,5,31,18" href="/ru">
</MAP>

Этот фрагмент представляет собой открывающий тег BODY и описание карты ссылок, которое используется для изображения флагов государств. С этого изображения с помощью карты ссылок осуществляется переход на варианты сайта, написанные на других языках: украинском и английском. Само описание карты ссылок нам не интересно, потому что его мы менять не будем, а вот с открывающим тегом <BODY> можно поработать. В нем мы задаем поля для страницы, точнее говоря, убираем эти поля, присваивая атрибутам нулевые значения. Запись можно существенно сократить, применив свойство margin для селектора BODY, т.е. вместо записи атрибутов bottommargin="0", topmar-gin="0", leftmargin="0" и rightmargin="0" будем использовать стенографическое свойство margin. Тогда правило для BODY будет следующим:

BODY { font-family: Arial, sans-serif; margin: 0px; }

Аналогичным образом, по ходу работы над HTML-документом, мы будем дописывать созданные на предыдущих этапах правила и, по мере необходимости, писать новые. В итоге получим полноценный документ с оформленной встроенной таблицей стилей.

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены