Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Экзамен / web / example1 / Введение в PHP.doc
Скачиваний:
101
Добавлен:
18.05.2015
Размер:
3 Mб
Скачать

Группирование

Если селекторам присваивается одинаковое определение:

h1 {

font-family: arial

}

h2 {

font-family: arial

}

то можно записывать их через запятую:

h1, h2 {

font-family: arial

}

Если селектор имеет несколько определений:

h1{font-weight:bold} h1 {font-size: 14pt}

то они записываются через точку с запятой:

h1 {font-weight: bold; font-size: 14pt;}

Наследование

При определении стиля элемента, вложенные элементы наследуют свойства головного элемента. Например, если в параграфе <p> задается красный цвет шрифта, то выделенный с помощью <b> текст также будет красным:

<p style=”color: red;”>Внутри параграфа с красным цветом текста, <b>выделенный текст</b> наследует цвет головного тега.</p>

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого необходимо описать стиль тега <body>, порождающего остальные элементы HTML документа.

CSS- Классы

Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде:

.classname{свойства}

Для присвоения класса выбранному тегу в теге используется свойство class:

class="classname"

Это можно продемонстрировать на следующем примере:

<html>

<head>

<title>Использование классов</title>

<style type="text/css">

<!-- .font1 {

color: yellow;

background: red;

}

.font2 {

color: blue;

background: yellow;

} --> </style>

</head>

<body>

<span class="font1">Желтый текст на красном фоне</span>

<span class="font2">Синий текст на зеленом фоне</span>

А здесь цвет фона и текста заданы по умолчанию.

</body>

</html>

В примере прописаны два класса «font1» и «font2» задающие цвет фона и изображения. Эти классы были применены к тегу <span>. Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:

<table class="font1"> <tr>

<td>Это ячейка таблицы</td>

<td>и это тоже</td>

</tr> <table>

Для определения класса для определенного тега используется конструкция:

имя_тега.имя_класса {свойства}

Например, нам нужно часть текста выделить красным. Определим класс для тега <span>:

<html>

<head>

<title>Использование классов</title>

<style type="text/css">

<!-- span.select {color: red;} --> </style>

</head>

<body>

Здесь мы выделили <span class="select">часть текста.</span>

</body>

</html>

Если необходимо поменять стиль выделения текста с помощью класса «select» во всем документе с красного, на другой цвет, то достаточно поменять значение цвета в одном месте - в определении этого класса. А изменения вступят в силу сразу же во всем документе. Если на всех страницах сайта подключается один и тот же стилевой файл, то изменение свойств класса в этом файле приведет и к изменению стиля соответствующий тегов на всех страницах сайта.

Множественные классы.

В HTML значением class может быть список слов, разделенный пробелами. Например:

<p class=”urgent warning”>Опасность! Предупреждение!</p>

Чтобы, например, выделить курсивом все элементы, атрибут class которых имел значение urgent warning,нужно описать стиль следующим образом:

.warning.urgent {font-style: italic;}

Объединяя 2 селектора класса, можно выбрать только те элементы, которые имеют оба имени класса, стоящие в любом порядке. Вместо <p class=”urgent warning”> могло быть <p class=”warning urgent”>.

Соседние файлы в папке example1