Многим читающим эту статью уже известно, что CSS расшифровывается как каскадная таблица стилей. Надеюсь, вы хотя бы примерно предполагаете как она работает. Подключать файл стилей мы уже умеем, теперь разберемся с его начинкой. Стили отвечают за внешний вид нашей html-страницы, за ее оформление и привлекательность. Красивый и грамотный дизайн — один из основных факторов успеха и популярности вашего ресурса, помимо контента.
CSS-файл состоит из простейших конструкций. Основу его составляют селекторы и свойства этих селекторов. Селектор — это элемент над которым мы хотим произвести внешние изменения, а свойства — как раз те самые изменения элемента, его цвет, размеры, расположение и т.д. Если представить, что html-страница это холст, то каждый элемент картины является селектором, а вот свойства как раз краски для придания жизни.
CSS правила
Теперь понятно, что весь файл стилей с расширением .css состоит из набора так называемых правил. Правило — это совокупность селектора и свойств. Пример двух правил для заголовка h1 и всех блоков div на странице представлен ниже, именно из таких конструкций состоит весь файл CSS:
h1 {
font-size: 22px;
color: #000;
}
div {
width: 100px;
height: 50px;
}В данном примере мы обращаемся к самым простым селекторам, селекторам с названием тега. Такие правила применяются ко всем тегам на странице, нет никакой избирательности или фильтрации. Можно назвать такое css-правило общим.
Чтобы задать css-свойства для определенной группы элементов, необходимо присвоить каждому элементу группы класс. Класс устанавливается с помощью атрибута class. Например, можно объединить блоки товаров, постов, элементов меню. Все они будут иметь сходные стили, если в качестве селектора использовали название класс. Ниже конструкция каталога, для элементов каталога задаем одинаковые стили.
<div class="catalog">
<div class="catalog-item">...</div>
<div class="catalog-item">...</div>
...
</div>
Стили для элементов каталога по установленному классу:
.catalog-item {
width: 250px;
font-size: 14px;
background: #eee;
}Основные группы CSS-свойств
Все css-свойства условно можно разбить на несколько групп, официально никакой градации не предусмотрено, но для новичков удобнее будет ориентироваться.
-
Внешний вид текста
К этой группе css-свойств можно отнести font-size (размер шрифта), text-decoration (при значении underline имеем подчеркнутый текст), font-weight (жирность шрифта, bold - жирный), font-style (стиль текста), color (цвет текста) и т.д.
-
Размеры и отступы
В верстке существуют два основных, самых важных понятия типа отображения элемента. Элемент может быть блочный и строчный, другие способы отображения не так важны. Блочные элементы могут иметь размеры (высоту height и ширину width), отступы внешние (margin) и внутренние (padding). Свойства css для задания размеров и отступов элементов подробно описаны в так называемой Блочной модели.
-
Сетки
Все видели как выглядит типичный сайт? Сначала идет header, затем основной блок с контентом и сайдбаром, заканчивается страница обычно футером. Такое расположение элементов относительно друг друга называется построением html-сеток. Подробнее о сетках поговорим в следующих уроках верстки. Пример простейшей сетки ниже с помощью float (выравнивания элементов):
<div class="header">Голова</div> <div class="left-column">Контент</div> <div class="right-column">Сайдбар</div> <div class="footer">Подвал</div>Стили для сетки:
div {
margin-bottom: 10px;
padding: 10px 20px 10px 20px;
background-color: #dff0d8;
} .left-column {
width: 60%;
min-height: 90px;
background-color: #fcf8e3;
float: left;
} .right-column {
width: 25%;
min-height: 90px;
background-color: #d9edf7;
float: right;.
} .footer {
clear: both;
} -
Позиционирование в CSS
Позиционирование в css используется для создания эффекта многослойности, чтобы элементы могли накладываться друг на друга, всплывать. Для задания одного из режимов позиционирования используют свойство position и набор из управленческих свойств top, left, right, bottom. Они задают соответствующие отступ для элемента. Популярным значение для свойства position является absolute. Оно исключает элемент из потока, накладывает на страницу сверху. Место выдернутого элемента занимают следующие по порядку блоки. Для задания приоритета позиционирования, порядка наложения используют свойство z-index с целочисленными значениями.
- Дизайн (цвета, тени, градиенты, фон)
- Прочее
Что значит каскадность стилей CSS
Пришло время разобраться с понятием каскадности стилей. Этот мощный механизм основывается на комбинировании всех CSS-правил, которые относятся к одному и тому же элементу. Например, мы назначаем общие правила для всех абзацей на странице. Затем добавляем к одному из абзацей класс, для класса тоже задаем свои свойства. Браузер соберет все правила для данного элемента в соответствии с приоритетом и применит их. В этом и заключается каскадность.
Понятие каскадности тесно связано с переопределением стилей. Оно происходит, когда в файле стилей для одного и того же элемента задаем одинаковое свойство с разными значениями. Стиль переопределиться в соответствии с приоритетом. Кратко можно описать приоритеты следующим образом в порядке убывания:
- Атрибут style внутри тега, самый высокий приоритет
- Правила для селектора c id
- Правила для селектора с классом
- Правила для селектора с тегом
Профессиональными разработчиками часто используется прием нескольких классов у одного элемента. Таким образом не обязательно прописывать свойства для каждого из них, достаточно добавить к нужным блокам класс и прописать свойства для этого класса.
Наследование стилей css
Еще одно важное понятие CSS — это наследование. Все стили определенные для родительского элемента будут приняты и дочерними. Если прописать размер и стиль шрифта, цвет у элемента ul для меню, то все дочерние li примут эти значения. Есть свойства, которые не наследуются. К ним относятся свойства из категории размеры и отступы, позиционирование.