Чтобы придать любой html-странице свой стиль и индивидуальность, активно используют фоны для элементов и страницы в целом. За этот момент оформления отвечает целый раздел css-свойства, которые начинаются со слова background.

Как задать цвет и изображение фона сайта

Для задания цвета фона используют свойство background-color, оно принимает значения в шестнадцатеричном формате цвета, в формате RGB, задание цвета при помощи ключевых слов.

Чтобы использовать в качестве фона сайта изображения, применяют свойство background-image, где указывают ссылку на файл. Можно использовать одновременно и вариант с цветом фона, и с изображением. Тогда изображение накладывается поверх фона определенного цвета.

Теперь поговорим о том, как регулировать повторение фонового изображения, как растянуть его на весь экран и т.д. Свойство, которое отвечает за повтор фона, называется background-repeat. Оно принимает четыре значения. В качестве значения по умолчанию принимается repeat (повторять по вертикали и горизонтали). Три других значения:

• repeat-x - повторяет изображение по горизонтали
• repeat-y - повторяет изображение по вертикали
• no-repeat - не повторяет изображение совсем

Для задания размера фонового изображения сайта используют свойство background-size, оно принимает значения в процентах, пикселях и слово auto. Имеет два значения через пробел. Первое значение отвечает за растяжение по горизонтали, второе по вертикали. Если первое значение задано (например, 100%), а второе значение выставлено auto, то фон по горизонтали растянется на весь размер блока, а по вертикали подгоняет высоту для данной ширины. Есть еще два значения для этого свойства (cover и contain). Cover изменяет размеры изображения так, чтобы блок был полностью закрыт картинкой, а contain так, чтобы картинка поместилась в блок целиком. Cover и contain задаются по одному, через пробел уже ничего писать не нужно.

Пример. Зададим цвет фона, его изображение без повтора и растянем его по ширине и высоте:

.block {
 background-color: #eee;
 background-image: url("/assets/img/image.png");
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

Положение фонового изображения, background-position

Немного подробнее остановимся на работе с фоновым изображением, которое не нужно повторять. Для регулирования нахождения этого изображения внутри блока, которому мы задаем фон, используется CSS-свойство background-position. Это свойство принимает два значения через пробел. Первое определяет положение по оси x (горизонтали), второе по оси y (вертикали).

Единицы измерения этих двух величин проценты и пиксели. Еще они принимают значения top, bottom, left, right, center. Значения для оси x, естественно, left, right, center. Значения для оси y - top, bottom, center. Единицы измерения, значения, пиксели и проценты можно комбинировать между собой в произвольном формате. В примере ниже зададим позиции для фонового изображения. В первом случае будет изображение по центру в процентах. Во втором случае изображение в правом нижнем углу блока. В третьем случает изображение сдвинуто на 50 пикселей слева и на 100 пикселей сверху. Пример:

.block1 {background-position: 50% 50%;}
.block2 {background-position: right bottom;}
.block3 {background-position: 50px 100px;}

Фиксим фонового изображения, background-attachment

Иногда для создания визуальных эффектов нужно, чтобы фон при прокрутки не уезжал вместе с просмотренной частью страницы, а оставался на месте. Это будет создавать интересный эффект параллакса.

Для фиксации фона используется css-свойство background-attachement. Оно принимает два значения, scroll - значение по умолчанию, прокрутка вместе со всем остальным содержимым, fixed - фон остается на месте при прокрутке.

CSS-свойство background

Чтобы обобщить все вышеперечисленные громоздкие конструкции в CSS есть свойства для их объединения, background. Оно имеет следующую структуру background: background-color background-image background-repeat background-position background-attachement; Все значения этих свойств перечисляются через пробел. Если заданы не все свойства, то они имеют значения по умолчанию. Например:

.block {
background: #eee url("/assets/img/image.png") center center;
}

В предыдущих уроках кратко упоминали, что при знакомстве с таблицей стилей CSS, правилами, свойствами и селекторами стоит уяснить для себя правила наследования стилей. Мы знаем, что весь HTML- документ условно можно представить в виде иерархии, где одни элементы содержат в себе другие. Между элементами существуют различные связи. Они могут быть соседними, а могу иметь свзять родитель-дочерний элемент. У каждого элемента только один непосредственный родитель, это тот, который содержит его явно. Родителя нет только у корневого элемента, в Html-файлах это тег <html>.

Свойства, которые мы прописываем для родительского элемента передаются всем его потомкам различных уровней вложенности. Чтобы переопределить эти свойства необходимо прописать их дочернему элементу. Такие стили будут иметь больший приоритет и перебьют наследуемые свойства. Наследуются, естественно, не все стили. Например, стили связанные со шрифтами. Этот механизм необходим для сокращения таблицы стилей, ведь это очень удобно, хотя есть и существенные минусы. Когда css-файл разрастается, очень трудно отследить какой родительский элемент задает некоторые стили, от этого может возникнуть путаница.

Какие css-свойства (стили) наследуются

font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.

Наследуются еще некоторые другие свойства, но применяют такое наследование гораздо реже. Почему же в основном этому механизму подвержены стили работы с текстом. Дело в том, что у большинства сайтов есть общая типографическая концепция. Цвет текста, размер шрифта, вид шрифта, поэтому здраво задавать такие стили для документа в целом или для конкретных блоков.

Соответственно большинство свойств, отвещающих за внешний вид сайта не наследуются. Было бы странно, если задавая фон или рамку одного элемента, мы получали такие же у всех потомков. Поэтому механизм наследования имеет продуманную суть.

В некоторых ситуациях имеются исключения. Например, мы хотим все же получить значение для свойства от родительского элемента. Тогда можно использовать конструкцию свойство : inherit; Для любого свойства будет принято значение от родителя. Этот механизм называется принудительное наследование.

Каскадирование CSS, каскадные таблицы стилей

Мы уже знаем о расшифровке аббревиатуры CSS, с таблицей стилей все в принципе понятно, а что же такое каскадная? Каскадирование - один из базовых механизмов при работе с css-правилами. Для одного и того же элемента может быть задано множество пересекающихся стилей. Стили могут задаваться через атрибут style, через селектор тега, класса, идентификатора, могут наследоваться от родителя и т.д. Вопрос в том, какие же стили применяться к элементу в конечном итоге, давайте разбираться.

На выбор стилей для элемента влияют несколько факторов. Приоритет, специфичность, порядок кода. Специфичность простым языком можно описать так, чем конкретнее (точнее) задан селектор, тем он специфичнее. Т.е. чем меньше выбираем элементов для данного правила, тем специфичность больше.

Теперь на примерах:

• Если задаем стили для элемента по одинаковому селектору, по тегу, по классу, например, то применяются те свойства, которые стоят ниже в css-файле. Ведь специфичность и приоритет в этом случае будут одинаковы.
• Если одно правило в качестве селектора использует класс, а другое тег с уточняющим классом, то применяются стили второго правила, т.к. более специфичный. Например, для <p class="first sec"> зададим правила с использованием селекторов .first и p.second. В конечном итоге приоритетными будут свойства второго селектора.
• Если в качестве селектора использовать идентификатор (id), то такие правила будут приоритетнее. Это происходит потому что элемент с данным Id единственный на страницу, значит специфичность его больше.
• Еще более приоритетны свойства записанные через атрибут style
• Чтобы переопределить стили через атрибут style можно использовать ключевое слово !important применимое к любому свойства. Оно переопределяет все. Однако злоупотреблять им не стоит, использовать в крайних случаях

Перекрестное наследование стилей

Далее расскажем про еще один популярный и удобный прием в задании css-свойсв. У большинства сайтов есть похожие друг на друга элементы, которые отличаются лишь незначительно. Одним из таких популярных html-элементов являются кнопки. Как правило, они имеют одинаковые отступы, размеры, закругления, тени, цвет текста и т.д. Здесь и удобно применять перекрестное наследование стилей

• Вынесем общие стили в основной класс .button
• Зададим вспомогательные стили еще в нескольких классах. Например, .button-red и .button-blue
• Пропишем у всех сходных элементов базовый класс, а следом при необходимости один или несколько вспомогательных

<div class="catalog"> <div class="catalog-item">
 ...
 <a class="button button-red"></a>
 </div>
 <div class="catalog-item"> 
 ...
 <a class="button button-blue"></a>
 </div>
</div>

Таким образом избавляемся от лишнего кода, упрощаем себе жизнь.

Без селекторов задавать стили для элементов html-страницы очень сложно. Необходимо было бы прописывать стили с помощью атрибута style у каждого элемента, это нерационально и долго. Существование селекторов и файла CSS существенно упрощает задачу. В этом css-уроке разберемся с тем, какие же существуют селекторы.

Селекторы по тегу, классу и id

Этот тип селекторов указывает на все элементы страницы с определенным тегом. Чтобы прописать стили по тегу, необходимо взять название тега и в фигурных свойствах отметить все свойства для них. Что касается селектора по классу, то необходимо указать сначала название класс, а потом в фигурных скобках css-свойства для него. Для селектора по id ситуация идентичная.

Например, пропишем свойства для всех абзацей на странице и для последнего из абзацей по классу перебьем значение отступа снизу:

<div class="content"> <p>...</p> ... <p class="last">...</p> </div>

p { margin-bottom: 10px;
color: #000;
font-size: 14px; }
.last {
margin-bottom: 25px;
}

Вложенные и соседние селекторы

Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.

Например, добавим стили для абзацей контентной части. В этом случае стили, которые заданы у вложенного в блок абзаца перебьют общие стили для всех абзацей. Таким образом мы не плодим лишние классы, а обходимся компактной конструкцией.

<div class="content"> <p>...</p> ... <p>...</p> </div>

p { margin-bottom: 10px;
color: #000;
font-size: 14px; }
.content p {
color: #eee;
font-size: 16px;
matgin-bottom: 15px;
}

Еще одна полезная фишка для удобства - это использование соседних селекторов. Слева направо через знак плюс прописываем два селектора. Стили, указанные в фигурных скобках, применяются к последнему селектору только в случае, если он стоит после первого.

Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:

<div class="content"> <p class="first">...</p> <p class="sec">...</p> </div>

.first + .sec { margin-top: 20px; }

Вложенные и соседние селекторы можно комбинировать. Если зададим в примере перед конструкцией .first + .sec класс .content, то свойства применяются для второго класса в случае, если он идет после первого и они оба лежат в блоке с классом .content.

Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков

С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками. При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е. для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.

В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.

<div class="content"> 
 <span>...</span>
 <p class="first">
 <span>...<span>
 </p> <p class="sec">...</p> </div>

.content > span {
...
}

Псевдоклассы

Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:

• first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.

  p:first-child{...}
  

• nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:

  p:nth-of-type(2n){...}

• hover. С помощью этого псевдокласса можно отследить такое действие пользователя, как наведение на элемент и задать при этом стилистические особенности. Например, при наведении на ссылку уберем ее подчеркивание.

  a:hover {text-decoration: none;}

• :link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
• :focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.

Многим читающим эту статью уже известно, что 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-правил, которые относятся к одному и тому же элементу. Например, мы назначаем общие правила для всех абзацей на странице. Затем добавляем к одному из абзацей класс, для класса тоже задаем свои свойства. Браузер соберет все правила для данного элемента в соответствии с приоритетом и применит их. В этом и заключается каскадность.

Понятие каскадности тесно связано с переопределением стилей. Оно происходит, когда в файле стилей для одного и того же элемента задаем одинаковое свойство с разными значениями. Стиль переопределиться в соответствии с приоритетом. Кратко можно описать приоритеты следующим образом в порядке убывания:

1. Атрибут style внутри тега, самый высокий приоритет
2. Правила для селектора c id
3. Правила для селектора с классом
4. Правила для селектора с тегом

Профессиональными разработчиками часто используется прием нескольких классов у одного элемента. Таким образом не обязательно прописывать свойства для каждого из них, достаточно добавить к нужным блокам класс и прописать свойства для этого класса.

Наследование стилей css

Еще одно важное понятие CSS — это наследование. Все стили определенные для родительского элемента будут приняты и дочерними. Если прописать размер и стиль шрифта, цвет у элемента ul для меню, то все дочерние li примут эти значения. Есть свойства, которые не наследуются. К ним относятся свойства из категории размеры и отступы, позиционирование.

Мы уже знаем, что самое важное, что есть на любом сайте — это информация. Для грамотного представляю данных часто возникает нужда в таблицах. У тех, кто только начинает знакомиться с версткой, часто возникают трудности с версткой именно таблиц. Иногда нужно оформлять большие и сложные таблицы, их верстка сопряжена с использованием различных тегов, структура которых не всегда понятна.

Основным тегом для верстки таблиц является тег <table>. Он оборачивает все содержимое и закрывается по окончанию. Все мы знаем, что у таблицы есть строки и столбцы. Для обозначения строк используем тег <tr>, а для столбцов тег <td>. Содержимое каждого столбца оборачиваем тегом td. Теги td находятся внутри тегов tr. В случае с простейшей таблицей число тегов td в каждой строке(tr) одинаково.

Иногда в процессе верстки таблиц возникает необходимость создать заголовки столбца, для этого мы используем тег th. Этот тег аналогичен тегу td, тоже расположен внутри tr, но идеологически и стилистически отличается. По умолчанию он выделен жирно, и текст в нем выравнивается по центру.

Не совесем понятно? Рассмотрим таблицу из 4 строк и 2х столбцов с заголовками:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Простая таблица</title>
 </head>
 <body> <table border="1">
 <tr>
 <th>Заголовок 1</td>
 <th>Заголовок 2</td>
 </tr>
 <tr>
 <td>Пример столбца 1</td>
 <td>Пример столбца 2</td>
 </tr>
 <tr>
 <td>Пример столбца 3</td>
 <td>Пример столбца 4</td>
 </tr>
 <tr>
 <td>Пример столбца 5</td>
 <td>Пример столбца 6</td>
 </tr>
 <tr>
 <td>Пример 7</td>
 <td>Длинный текст 8</td>
 </tr>
</table> 
</body> 
</html>

В итоге получаем:

Заголовок 1	Заголовок 2
Пример столбца 1	Пример столбца 2
Пример столбца 3	Пример столбца 4
Пример столбца 5	Пример столбца 6
Пример 7	Длинный текст 8

Объединение ячеек в таблице по вертикали и горизонтали, верстка

Теперь поговорим об одном достаточно сложном и непонятном моменте в верстке таблиц. Часто нам необходимо объединить ячейки таблицы между собой по вертикали или горизонтали. Для этого используется атрибут colspan для ячеек таблицы td. Значения у этого атрибута в виде чисел. Если ставим цифру 2 в значение, то совмещаем по горизонтали две ячейки, текущую и ту, что справа, но в разметке правой ячейки уже быть не должно, содержимое пишем в тот td, которому задали colspan.

Для совмещения ячеек по вертикали необходимо использовать аналогичный атрибут rowspan для тега td. Например, задаем значение 2, значит совмещаем ячейку с нижней. Не забываем удалить ту ячейку, с которой совмешаем из разметки таблицы, иначе выйдет смещение и появление лишних элементов в таблице. Почему объединение по вертикали сложнее? Ведь в разметки таблицы данных нижняя ячейка лежит в следующем теге tr, поэтому ее удаление не столь очевидно, как при объединении по горизонтали.

Можно объединить ячейки одновременно по вертикали и горизонтали, для это задаем оба атрибута сразу. Наглядно станет понятно в примере:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Простая таблица</title>
 </head>
 <body> <table border="1">
 <tr>
 <td colspan="2">Объединяем вправо</td>
 <td colspan="2" rowspan="2">Объединяем все</td>
 </tr>
 <tr>
 <td>Пример столбца 3</td>
 <td rowspan="2">Объединяем вниз</td>
 </tr>
 <tr>
 <td>Пример столбца 5</td>
 <td>Пример столбца 6</td>
 <td>Текст</td>
 </tr>
 <tr>
 <td>Пример 7</td>
 <td>Длинный текст 8</td>
 <td>Текст</td>
 <td>Текст</td>
 </tr>
</table> 
</body> 
</html>

Объединяем вправо		Объединяем все
Пример столбца 3	Объединяем вниз
Пример столбца 5		Пример столбца 6	Текст
Пример 7	Длинный текст 8	Текст	Текст

CSS-оформление таблиц

Верстать таблицы научились, теперь можно создавать таблицы с любым количеством столбцов и строк, нужно лишь корректировать необходимым образом html-разметку. Чтобы придать таблицам привычный вид, нужно знать о css-свойствах, которые полезны при верстке таблиц.

Во-первых, таблицам можно задавать рамки. Рамку можно задать, как самой таблице, так и каждой размеченой ячейке таблицы. Но выглядят такие рамки неэстетично и непривычно, чтобы избежать просветов между рамками, используют свойство border-collapse: collapse; Оно накладывает рамки ячеек и убирает нежелательные расстояния между ними. Рамку задаем с помощью свойства border: 2px solid #000; Этим свойством и его значением задаем размер рамки в два пикселя, черного цвета, простой линией.

С помощью рамок можно придать таблице определенный вид. Допустим, хотим расчертить таблицу только на строки или столбцы. Для этого используем css-свойства border-bottom и border-right. С помощью этих свойств задаем рамку у ячейки только с одной стороны,что расчерчивает таблицу нужным образом.

Еще одним важным моментом в верстке таблиц становятся отступы внутри ячейки, их задаем с помощью свойства padding. Можно задать отступ только с одной стороны, для это используем одно из свойств padding-top, padding-right, padding-bottom или padding-left.

Для выравнивания текста внутри ячейки по горизонтали используем css-свойство text-align со значениями left, center и right. Для выравнивания по вертикали подойдет свойство vertical-align. Оно имеет значения top, middle, bottom. Можно задать для ячеек и строк цвет текст (color), цвет фона (background-color), жирность текста (font-weight) и так далее. Чтобы присвоить определенные стили только для конкретной строки или ячейки целесообразно использовать классы для них, а затем писать css-свойства уже для новых классов.

Пример css-кода для разметки простой таблицы.

table {
 border-collapse: collapse;
 border: 2px solid black;
}
td {
 padding: 5px;
 padding-right: 10px;
 border-bottom: 1px solid lightgray;
 text-align:center; } th {
 padding: 10px;
 border: 1px solid black;
}
tr {
background-color: #eee;
}