Встраивание определения стилей в заголовок HTML-документа

Дата добавления: 2013-12-23; просмотров: 1099; Нарушение авторских прав

Встраивание определения стиля в тег

ü Определение стиля встраивается в любой тег с помощью параметра style(примечание: этот параметр имеют все теги): Текст

ü Если определение стиля состоит из нескольких атрибутов, то они указываются через точку с запятой: Текст

ü Если какое-либо значение атрибута требует наличия кавычек, то оно указывается в апострофах: Текст

Все определения стилей можно собрать в одном месте.

<head><title>Применение стилей</title>

<Селектор> { <Атрибут 1>: <Значение 1>; …, <Атрибут N>: <Значение N>; }

</style> </head>

В теге, к которому нужно применить стиль, указывается имя стиля с помощью параметра class.

В параметре <Селектор> могут быть указаны следующие селекторы

*– все теги, например, уберем все внешние и внутренние отступы:

* {margin: 0; padding: 0}

Тег – все теги, имеющие указанное имя:

font { font-size: 12pt; color: green; font-family: “Arial” }

…

Текст2<!—Зеленый текст-->

.Класс – все теги, имеющие указанный класс:

.text1 { font-size: 12pt; color: red; font-family: “Arial” }

…

Текст1

Текст2

Тег.Класс – все теги, имеющие указанный класс;

font.text2 { font-size: 12pt; color: blue; }

…

Текст1

!!! Если имя класса указать в другом теге, то он не будет определен:

Текст2

#Идентификатор – тег с указанным идентификатором:

#txt1 { color: red }

Тег#Идентификатор – идентификатор, указанный в определенном теге;

p#txt1 { color: red }

…

Текст

!!! Если идентификатор находится в другом теге, то элемент будет проигнорирован.

Пример:

<html>

<head><title>Пример использования силей</title>

.text1 {font-size: 12pt; color: red; font-family: "Arial"}

font {font-size: 12pt; color: green; font-family: "Arial"}

font.text2 {font-size: 12pt; color: blue; font-family: "Arial"}

</style>

</head>

<body>

Текст1

Текст2

Текст3

Текст4

Текст5

</body>

</html>

Привязка к нескольким тегам:

Стилевой класс можно привязать сразу к нескольким тегам. В этом случае селекторы указываются через запятую: h1, h2 { font-family: “Arial” }

<== предыдущая лекция	\|	следующая лекция ==>
Способы встраивания определения стиля	\|	Форматирование шрифта