- •1. Общие сведения о css
- •1. Разделение оформления и содержания
- •2. Добавление стиля на веб-страницу
- •2.1. Таблица связанных стилей
- •2.2. Таблица глобальных стилей
- •3. Cинтаксис css
- •3.1. Свойства css
- •3.2. Селекторы тегов
- •Селекторы атрибутов
- •Простой селектор атрибута
- •Селектор атрибута со значением
- •Атрибут начинается с определенного значения
- •Атрибут оканчивается определенным значением
- •Значение встречается в любом месте атрибута
- •Группирование
- •4. Псевдоклассы
- •Псевдоклассы, определяющие состояние элементов
- •2. Более высокий приоритет имеет значение, указанное в коде ниже
- •3. Описание стилей начинайте с селекторов верхнего уровня
- •4. Группируйте селекторы с одинаковыми параметрами и значениями
- •5. Используйте идентификаторы и классы
- •6. Применяйте универсальные стилевые параметры
3.2. Селекторы тегов
В качестве селектора может выступать любое имя тега HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде :
Имя_тега { свойство1: значение; свойство2: значение; ... }
Пример описания стиля параграфа:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style> </head>
…
В данном примере описан размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри любого контейнера <р> на HTML-странице.
Селекторы классов
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий:
Имя_тега.Имя_класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется имя тега, а затем, через точку имя класса. Для применения данного стиля в коде HTML необходимо в теге, для которого применяется стиль указать атрибут class="Имя_класса".
Например:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.Color {
color: navy;
}
</style>
</head>
<body>
<p>Пример использования селектора тегов.</p>
<p class="Color">Пример использования класса.</p>
</body>
…
В этом примере описано два стиля. Первый из них применяется ко всем параграфам, а второй только к тем параграфам, у которых тег имеет вид <p class=Color…
Можно использовать классы и без указания имени тега. Синтаксис в этом случае будет следующий:
.Имя_ класса { свойство1: значение; свойство2: значение; ... }
Описанный таким образом стиль может быть применен к любому элементу HTML-страницы, в открывающем теге которого имеется атрибут class=”Имя_класса” .
Селекторы - идентификаторы
Идентификатор (называемый также "ID селектор") определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически. Идентификатором элемента является значение его атрибута id.
Синтаксис использования селектора-идентификатора следующий :
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Описанный таким образом стиль будет применен только к элементу, имеющему атрибут id=”Имя идентификатора”. Пример использования селектора-идентификатора:
…
<head>
…
<style type="text/css">
#help {
position: absolute;
left: 160px;
top: 50px;
width: 225px;
height: 180px;
background: #f0f0f0;
}
</style>
</head>
<body>
<div id="help">Пример использования Идентификаторов</div>
</body>
…
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.
Описанній таким образом стиль будет применен только к указаному тегу, имеющему соответствующее значение атрибута id.
Пример
Описание стиля
<style>
P#new {
color: red; /* Красный цвет текста */
}
</style>
Применение стиля
<p>Обычный параграф</p>
<p id="new">Параграф необычный - красный</p>
Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, используются селекторы, которые работают только в определенном контексте.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий :
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.
Пример использования контекстных селекторов:
…
<head>
…
<style type="text/css">
P B {
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
</body>
…
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Например:
<p>Это <b>пример</b> <i>соседних</i> селекторов.</p>
Теги <b> и <i> представляют собой соседние элементы.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
Например,
Описание стиля
i+b {
font-weight: bold;
color: blue;
}
Использование в HTML
<p><i>Выделенный</i><b>текст</b></p>
На странице слово ”текст” жирным начертанием и синим цветом.
Дочерние селекторы
Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий [2, 5]:
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.
Пример
Описание стиля
DIV > I { /* Дочерний селектор */
color: red; /* Красный цвет текста */
}
Использование стиля в HTML
<div>
<p><i>Текст НЕ выделяется </i> красным цветом</p>
</div>
<div>
<i>Текст выделяется красным цветом</i>
</div>