- •27. Основы css
- •Введение
- •Что такое css?
- •Определение правил стилей
- •Комментарии css
- •Селекторы объединения в группу
- •Дополнительные селекторы css
- •Универсальные селекторы
- •Селекторы атрибутов элементов
- •Селекторы потомков элементов
- •Селекторы нижележащих элементов
- •Селекторы смежных одноуровневых элементов
- •Псевдо-классы
- •Псевдо-элементы
- •Сокращенная запись css
- •Сравнение индивидуальных и сокращенных значений
- •Задание менее четырех значений для сокращенного свойства
- •Выбор между одиночным свойством и сокращенным значением
- •Справочник сокращений
- •Применение css к html
- •Строковые стили
- •Вложенные стили
- •Внешние таблицы стилей
- •Импорт таблиц стилей
- •Заключение
- •Контрольные вопросы
- •Об авторе
Комментарии css
Прежде всего необходимо узнать, как создавать в CSS комментарии. Комментарии добавляют, помещая их между символами /* и */. Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:
/* Это базовые селекторы элементов */
селектор {
свойство1:значение;
свойство2:значение;
свойство3:значение;
}
Комментарии можно добавлять либо между правилами, либо внутри блока свойств — например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером. Это будет полезно, когда вы проверяете, как влияют определенные части вашего CSS на Web-страницу; просто закомментируйте их, сохраните код CSS, и перезагрузите страницу HTML.
селектор {
свойство1:значение;
/*
свойство2:значение;
свойство3:значение;
*/
}
В отличие от других языков, CSS имеет только комментарии блочного уровня — однострочные комментарии не существуют.
Можно, конечно, при желании ограничить комментарий одной строкой, но все равно потребуется использовать открывающий и закрывающий ограничители комментария (/* и */).
Селекторы объединения в группу
Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h1 и p, тогда можно было бы написать следующий CSS:
h1 {color:red}
p {color:red}
Это, однако, не очень хорошо, так как повторяется одинаковая информация. Поэтому можно сократить код CSS, группируя селекторы вместе с помощью запятой — правила в скобках применяются к обоим селекторам:
h1, p {color:red}
Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Тремя наиболее общими селекторами, которые встречаются чаще всего, являются следующие:
p {}: селектор элемента
соответствует всем элементам на странице с указанным названием (элементам p, в приведенном выше случае)
.example{}: селектор класса
соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать <p class="example">, <li class="example"> или <div class="example">, или любому другому элементу со значением class равным example. Отметим, что селекторы класса не проверяют никакое конкретное название элемента.
#example{}: селектор id
соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соотвествовать <p id="example">, <li id="example"> или <div id="example">, или любому другому элементу со значением id равным example. Отметим, что селекторы ID не проверяют название никакого элемента, и можно иметь только один селектор для каждого ID в документе HTML - они являются уникальными для каждой страницы.
Вы можете увидеть приведенные выше селекторы в действии в следующих примерах. Отметим, что при открытии примера в браузере стиль warning применяется к элементу списка и параграфа (если маркер списка исчезает, то это связано с тем, что задается белый цвет текста на белом фоне).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Selectors Example</title>
<link rel="stylesheet" href="selectors.css" type="text/css" media="screen">
</head>
<body>
<h1>CSS Basics Example</h1>
<ul id="menu">
<li>Item</li>
<li class="warning">Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p class="warning">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li id="extra">Item</li>
<li>Item</li>
</ul>
</body>
</html>
Листинг . example-selectors.html (html, txt)
#menu{
border-style:solid;
border-color:rgb(0,0,0);
border-width:1px;
}
.warning{
background:red;
color:white;
}
li{
font-family:arial,sans-serif;
}
Листинг . selectors.css (html, txt)
Можно соединять несколько селекторов, чтобы определить еще более конкретные правила:
p.warning{}
соответствует всем параграфам со значением class равным warning
div#example{}
соответствует элементу со значением атрибута id равным example, но только когда он является div
p.info, li.highlight{}
соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight
В следующем примере это используется для различия между разными стилями предупреждений:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Specific Selectors Example</title>
<link rel="stylesheet" href="specificselectors.css" type="text/css" media="screen">
</head>
<body>
<h1>CSS Basics Example</h1>
<ul id="menu">
<li>Item</li>
<li class="warning">Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p class="warning">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li id="extra">Item</li>
<li>Item</li>
</ul>
</body>
</html>
Листинг . example-specificselectors.html (html, txt)
#menu{
border-style:solid;
border-color:rgb(0,0,0);
border-width:1px;
}
.warning{
background:red;
color:white;
}
p.warning{
background:#fcc;
color:red;
}
li{
font-family:arial,sans-serif;
}
li#extra{
padding:10px;
}
Листинг . specificselectors.css (html, txt)