...

Изучив материалы, представленные на сайте CSS-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей Cascading Style Shett

Поиск по сайту:

	Главная

	Синтаксис CSS

	Свойства CSS

	Форматирование блоков
	Списки

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

	Оптимизация стилей

	Оформление текстов

	Использование блоков

	Позиционирование

	Слои в CSS

	Готовые решения

	Дополнительные возможности CSS


	Программа TopStyle

	Таблица цветов

Все свойства CSS !important after background background-attachment background-color background-image background-position background-repeat before border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom caption-side clear clip color content cursor display float font font-family font-size font-style font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-width min-width opacity overflow padding padding-bottom padding-left padding-right padding-top position quotes right table-layout text-align text-decoration text-indent text-transform top vertical-align visibility white-space width word-spacing z-index



статьи 1 2 3 4

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

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

Мы уже достаточно много узнали о свойствах 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 и описание карты ссылок, которое используется для изображения флагов государств. С этого изображения с помощью карты ссылок осуществляется переход на варианты сайта, написанные на других языках: украинском и английском. Само описание карты ссылок нам не интересно, потому что его мы менять не будем, а вот с открывающим тегом <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 - 2012 г. Все права защищены