|
Читайте также: |
{свойство:значение;
***
свойство:значение;}
Селектор предназначен для связи стилевого определения с элементами html. В качестве селектора часто (но не всегда) используется название элемента, как это было показано выше в примерах.
p {color:red;
font-size:small;}
В таком случае говорят, что задано определение с селектором элемента.
Однако стилевые определения можно строить и без явной связи с конкретными элементами. В этом случае с определением связывается имя класса, которое можно использовать для сопоставления заданного стиля с конкретными элементами, входящими в этот класс.
В этом случае говорят, что задано определение с селектором класса.
Данное определение записывается следующим образом:
.имя_класса {
свойство:значение;
***
свойство:значение;}
Перед именем класса ставится точка.
Сопоставить такое определение с элементом можно при помощи атрибута class, задав в качестве значения имя класса.
| Файл style.css | Файл 1.html | Пример |
| p {color:red; font-size:small;} h1{font-family:cambria; font-style:italic;} .green {color:green; font-size:large;} | <html> <head> <title>Пример5</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body> <h1>На этой странице для описания стилей использованы классы</h1> <p>Первый абзац</p> <em class=green>Второй абзац</em> <p>Третий абзац</p> </body> </html> | 
|
Селектор класса можно записывать с привязкой к элементу:
p.green {color:green;
font-size:small;}
Такое определение будет работать для тех элементов P, открывающий тег которых содержит атрибут class=green, и не будет работать для других элементов, даже с атрибутом class=green в открывающем теге.
Связать стилевое определение с элементом можно и при помощи селектора идентификатора. Об этом подробнее в дополнительной литературе.
Дата добавления: 2015-07-10; просмотров: 68 | Нарушение авторских прав