| Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|
| background | Позволяет установить все свойства фона в одном объявлении (универсальное свойство). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-attachment | Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-blend-mode | Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения). | 35.0 | 30.0 | 22.0 | 7.1* | Нет | Нет |
| background-color | Определяет цвет фона элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-image | Задает одно или несколько фоновых изображений для элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-position | Задает положение (позицию) фонового изображения. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-repeat | Устанавливает, как будет повторяться фоновое изображение. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-clip | Определяет область элемента для которой будет задан задний фон. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
| background-origin | Определяет как позиционируется фоновое изображение/-я относительно элемента. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
| background-size | Определяет размер фонового изображения/-ий. | 4.0 1.0 -webkit- | 4.0 3.6 -moz- | 10.5 10.0 -o- | 4.1 3.0 -webkit- | 9.0 | 12.0 |
| border | Позволяет установить все свойства границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom | Устанавливает все свойства нижней границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom-color | Устанавливает цвет нижней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom-left-radius | Определяет форму границы нижнего левого угла. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 -webkit- | 9.0 | 12.0 |
| border-bottom-right-radius | Определяет форму границы нижнего п |
CSS
Вы здесь: Главная — CSS
CSS (Cascading Style Sheets) — это каскадные таблицы стилей. Или, если объяснить это более понятным языком, CSS — это технология описания внешнего вида страниц, написанных на HTML.
Главная задача таблиц стилей — это разделить код страниц и её внешний вид. Возможно, что Вы спросите: «А зачем нужно так делать?«. Ответ очевиден: «Для большей мобильности«. Действительно, допустим у Вас имеется сайт, на котором 100 страниц (это совсем немного). Допустим, шрифт обычного текста у Вас на сайте — 15pt. И представьте, что Вам захотелось сделать не 15pt, а 17pt, что Вы будете делать?
Если Вы не используете CSS
, то Вам придётся в каждой из 100 страниц, в каждом месте, где вставляется текст исправлять с 15pt на 17pt. Разумеется, займёт это несколько часов.Если Вы используете CSS, то тогда Вам требуется лишь открыть специальный файл со стилями, найти в этом файле задание размера шрифта и всего один раз изменить с 15pt на 17pt. И Ваш сайт полностью и сразу преобразится. Я уже молчу про массу возможностей создания необычных дизайнерских решений с помощью CSS, которые невозможно реализовать только с помощью HTML.
Уверен, что Вы уже осознали преимущество CSS перед обычной «смесью» структуры и стиля.
А теперь встаёт главный вопрос: как же познакомиться с этой чудо-технологией и где можно узнать про эту несомненно важную часть создания своего сайта, чтобы у Вас появилось ещё больше информации о том: «Как создать свой сайт».
Собственно, Вы уже нашли, что искали: в данном разделе сайта находится информация по основам CSS, где Вы сможете узнать обо всех
Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup
Свежие материалы по CSS
Учебник CSS 3. Статья «Размеры блочных элементов в CSS»
Эта объемная статья учебника будет посвящена важным темам, задача которых заключается в том, чтобы расставить по полочкам методы работы с блочными элементами, объянить читателю для чего применяется изменение модели вычисления ширины и высоты элементов, как управлять переполнением блочных элементов, и как работать с минимальными и максимальными размерами элементов.
При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.
В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.
Рис. 99 Схема вычисления общей ширины и высоты элементов.
Общая ширина элемента вычисляется по формуле:
width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).
Общая высота элемента вычисляется по формуле:
height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).
Допустим, у нас есть следующие стили для элемента <div>:
div {
width: 150px; /* устанавливаем ширину элемента */
height: 150px; /* устанавливаем высоту элемента */
padding: 10px; /* устанавливаем внутренние отступы элемента */
border: 5px; /* устанавливаем границы элемента */
}
Для размещения элемента <div> браузеру необходимо подготовить следующее пространство:
Общая ширина элемента:
150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей.Общая высота элемента:
150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей.И так, мы с Вами рассмотрели, как классически происходит вычисление общей ширины и высоты элементов. Минусы этой модели заключаются в том, что вам необходимо проводить математические вычисления, чтобы понять какую действительно ширину, либо высоту имеет тот, или иной элемент. Удобно ли это?
Изменение модели вычисления ширины и высоты элементов
С выходом стандарта CSS 3 добавлено свойство box-sizing, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.
Для того, чтобы понять стоит ли нам использовать альтернативные способы вычисления ширины и высоты элементов, давайте рассмотрим пример, в котором создадим четыре блока одной ширины, при этом мы будем использовать процентные значения:
<!DOCTYPE html>
<html>
<head>
<title>Пример вычисления ширины и высоты элементов</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
/* обязательно прочтите пояснение ниже */
<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div>
</body>
</html>
Обратите внимание на важный момент — все четыре блока размещены в одну строчку.
Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.
В результате у нас должно получиться четыре разноцветных блока, расположенных в линейку:
Рис.100 Пример вычисления ширины и высоты элементов.А теперь техническое задание поменялось, и Вам необходимо к каждому нечетному блоку добавить сплошную границу справа размером 5px. Для этого мы создадим следующий стиль:
div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}
Теперь добавим стиль к нашему коду и посмотрим, что у нас из этого получится.
<!DOCTYPE html>
<html>
<head>
<title>Пример вычисления ширины и высоты элементов в процентах</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
}
div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div>
</body>
</html>
Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:
Рис. 101 Пример вычисления ширины и высоты элементов в процентах.Какие у нас есть варианты, чтобы исправить наш макет?
Варианта два:
- Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
- Второй – использовать альтернативную модель вычисления ширины и высоты элементов.
В нашем случае я считаю, что необходимо выбрать второй вариант:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства box-sizing</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
box-sizing: border-box; /* изменяем модель вычисления ширины и высоты элементов */
}
div:nth-child(odd) {
border-right: 5px solid; /* к каждому нечетному блоку добавляем сплошную границу справа черного цвета размером 5px. */
}
.test {
background-color: red; /* задаем цвет заднего фона */
}
.test2 {
background-color: green; /* задаем цвет заднего фона */
}
.test3 {
background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div>
</body>
</html>
Мы использовали CSS свойство box-sizing со значением border-box, что позволило нам изменить модель вычисления ширины и высоты элементов.
Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).
В нашем случае это спасает ситуацию, и нам не придется производить каких-то вычислений, и в дальнейшем боятся каких-либо изменений, которые могут потребоваться для наших элементов. Оставим эти не нужные вычисления на стороне браузера и посмотрим на результат нашего примера:
Рис.102 Пример использования свойства box-sizing.Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример изменения модели вычисления ширины и высоты элементов</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 150px; /* устанавливаем ширину блока */
height: 150px; /* устанавливаем высоту блока */
margin: 10px; /* устанавливаем внешний отступ для всех сторон */
padding: 10px; /* устанавливаем внутренний отступ для всех сторон */
border: 10px solid orange; /* устанавливаем сплошную границу 10px оранжевого цвета */
background: khaki;
}
.test {
box-sizing: content-box; /* ширина и высота элемента включают в себя только содержание элемента (по умолчанию) */
}
.test2 {
box-sizing: border-box; /* ширина и высота элемента включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}
</style>
</head>
<body>
<div class = "test">content-box</div><div class ="test2">border-box</div>
</body>
</html>
Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:
150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей.
Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box, то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.
Результат нашего примера:
Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).Управление переполнением блочных элементов
В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:
| Значение | Описание |
|---|---|
| visible | Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию. |
| hidden | Переполнение обрезается (контент, который выходит за размеры будет невидимым). |
| scroll | Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров. |
| auto | Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров. |
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 125px; /* устанавливаем ширину блока */
height: 100px; /* устанавливаем высоту блока */
padding: 5px; /* устанавливаем внутренний отступ для всех сторон */
border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */
}
.test {
overflow: visible; /* переполнение не обрезается */
}
.test2 {
overflow: hidden; /* переполнение обрезается */
}
.test3 {
overflow: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow: auto; /* если переполнение обрезается, то полоса прокрутки будет добавлена автоматически */
}
</style>
</head>
<body>
<div class = "test"><p>overflow: visible</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = "test2"><p>overflow: hidden</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = "test3"><p>overflow: scroll</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
<div class = "test4"><p>overflow: auto</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>
В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:
- Первый блок (значение visible) – содержимое выходит за границы элемента (значение по умолчанию).
- Второй блок (значение hidden) – содержимое, которое переполняет элемент обрезается.
- Третий блок (значение scroll) – переполнение обрезается, но добавляется полоса прокрутки.
- Четвертый блок (значение auto) – как и при значении scroll, только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.
Результат нашего примера:
Рис. 104 Пример управления переполнением элемента.Переполнение по определённой оси
С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).
Давайте рассмотрим пример, в котором нам необходимо добавить полосу прокрутки для блока текста, если содержимое переполнит элемент по горизонтали:
<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента по горизонтальной оси</title>
<style>
pre {
width: 300px; /* устанавливаем ширину элемента */
overflow-x: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
background-color: orange; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<pre>
Съешь же ещё этих мягких французских булок да выпей чаю.
</pre>
</body>
</html>
В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.
Результат нашего примера:
Рис. 105 Пример управления переполнением элемента по горизонтальной оси.Минимальные и максимальные значения ширины и высоты блочного элемента
Заключительная тема этой статьи, которую необходимо освоить это указание минимальных и максимальных размеров для блочных элементов.
CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:
- min-width (устанавливает минимальную ширину элемента).
- max-width (устанавливает максимальную ширину элемента).
- min-height (устанавливает минимальную высоту элемента).
- max-height (устанавливает максимальную высоту элемента).
На просторах интернет не редко можно встретить такое оформление сайтов, где основное содержимое находится по центру, а на заднем фоне находятся какие-то рекламные, либо графические материалы. Сделаем для этого похожую начальную разметку:
<!DOCTYPE html>
<html>
<head>
<title>Минимальная высота и максимальная ширина для блочных элементов</title>
<style>
:root { /* псевдокласс :root определяет корневой элемент документа */
background-color: black; /* задаем цвет заднего фона */
}
html {
height:100%; /* задаем высоту элемента в процентах */
background-color: white; /* задаем цвет заднего фона */
}
body {
margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */
max-width: 800px; /* задаем максимальную ширину элемента в пикселях */
height: 100%; /* задаем высоту элемента в процентах */
}
div {
min-height: 100%; /* задаем минимальную высоту элемента в процентах */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Какие приёмы CSS надо обязательно уяснить из этого примера:
Как установить высоту элемента 100% при любом разрешении?
Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.Как горизонтально центрировать страницу?
Для этого необходимо установить внешние отступы элемента сверху и снизу равными 0 (нулю), а слева и справа установить как auto (автоматически):margin: 0 auto;
В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).Как установить стиль, который будет приоритетней элемента <html>?
Псевдокласс :root, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля). Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».
Результат нашего примера приведен на изображении ниже:
Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):
Практическое задание № 26.
Обратите внимание, что при уменьшении размера окна браузера страница принимает следующий вид:
Практическое задание № 26 (при уменьшении размеров окна).Обращаю Ваше внимание, что для выполнения этого задания Вам необходимы знания из прошлых статей учебника.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]
Базовый синтаксис CSS | htmlbook.ru
Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.
Пример 5.1. Использование стилей
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки</title>
<style>
h2 { color: #a6780a; font-weight: normal; }
h3 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
</body>
</html>В данном примере свойства селектора h2 записаны в одну строку, а для селектора h3 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.
Правила применения стилей
Далее приведены некоторые правила, которые необходимо знать при описании стиля.
Форма записи
Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 5.2.
Пример 5.2. Расширенная форма записи
td { background: olive; }
td { color: white; }
td { border: 1px solid black; }Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).
Пример 5.3. Компактная форма записи
td {
background: olive;
color: white;
border: 1px solid black;
}Эта форма записи более наглядная и удобная в использовании.
Имеет приоритет значение, указанное в коде ниже
Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).
Пример 5.4. Разные значения у одного свойства
p { color: green; }
p { color: red; }В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.
На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.
Значения
У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.
Комментарии
Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают.
Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).
Пример 5.5. Комментарии в CSS-файле
/*
Стиль для сайта htmlbook.ru
Сделан для ознакомительных целей
*/
div {
width: 200px; /* Ширина блока */
margin: 10px; /* Поля вокруг элемента */
float: left; /* Обтекание по правому краю */
}Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.
Вопросы для проверки
1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?
- красный.
- синий.
- зелёный.
- чёрный.
- установленный в браузере по умолчанию.
2. В какой строке кода содержится ошибка?
- p { text-align: center; color: #000000 }
- div { color: red; font-size: 11pt; }
- title { color: #fc0; margin: 10px; }
- p { color: green; color; }
- html { float: left; }
3. Какая ошибка содержится в следующем коде?
/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */
- Опечатка в тексте комментария.
- Вложенные комментарии.
- Нет точки с запятой.
- Недопустимые значения у стилевых свойств.
- Лишние переносы в коде.
4. В какой строке содержится корректный синтаксис?
- body:color=black
- body{color:black}
- {body;color:black}
- {body:color=black}
- body{color=black}
5. Как правильно вставить комментарий в CSS-файл?
- ‘ комментарий
- // комментарий
- // комментарий //
- /* комментарий */
- <!— комментарий —>
Ответы
1. синий.
2. p { color: green; color; }
3. Вложенные комментарии.
4. body{color:black}
5. /* комментарий */
Селекторы по атрибутам в CSS
Селекторы по атрибутам в CSS
В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:
<h3 rel="friend">David Walsh</h3>У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:
h3[rel=friend] {
/* woohoo! */
}Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.
[rel=external]
Атрибут точно соответствует заданному значению
В приведённом выше примере, атрибут элемента h3 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:
<h2 rel="external">Attribute Equals</h2>
h2[rel=external] { color: red; }Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:
<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.
a[href=http://perishablepress.com] { color: red; }Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:
input[type=text] { padding: 3px; }
input[type=radio] { float: left; }Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.
[rel*=external]
Атрибут содержит заданное значение.
Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:
<h2 rel="xxxexternalxxx">Attribute Contains</h2>
h2[rel*=external] { color: red; }Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:
<div></div>
<div></div>
<div></div>Вы можете подсветить все эти элементы следующим образом:
div[id*=post] { color: red; }[rel^=external]
Атрибут начинается с заданного значения
<h2 rel="external-link yep">Attribute Begins</h2>
h2[rel^=external] { color: red; }Пример из жизни может быть такой: скажем вам необходимо подсветить ссылки на дружественный вам сайт отличным от остальных ссылок цветом. Неважно куда ведут эти ссылки, на главную страницу, или на какую-либо другую. Все эти ссылки можно подсветить следующим образом:
a[href^=http://perishablepress.com] { color: red; }[rel$=external]
Атрибут заканчивается на заданное значение
Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?
<h2 rel="friend external">Attribute Ends</h2>
h2[rel$=external] { color: red; }Честно говоря, я не смог найти реального примера применения такого вида селектора. Но я верю что он существует. Предположим, что вам необходимо подсветить ссылки, которые заканчиваются не значимыми символами:
a[href$=#], a[href$=?] { color: red; }[rel~=external]
Атрибут находится в списке, разделённом пробелами
Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;
<h2 rel="friend external sandwich">Attribute Space Separated</h2>
h2[rel~=external] { color: red; }Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.
[rel|=external]
Атрибут находится в списке, разделённом дефисами
Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».
<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>
h2[rel|=external] { color: red; }[title=one][rel^=external]
Соответствие по нескольким атрибутам
Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам.
<h2 rel="handsome" title="Important note">Multiple Attributes</h2>
h2[rel=handsome][title^=Important] { color: red; }Поддержка браузерами
Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.