Что такое CSS верстка сайтов

CSS верстка сайтов пользуется у современных веб-разработчиков заслуженной популярностью. CSS – каскадные таблицы стилей – позволяют веб-мастеру очень гибко задавать стили отображения элементов на страницах сайта, помогают экономить время и усилия на верстку сайтов. Как происходит CSS верстка сайтов?

CSS верстка сайтов может использоваться с применением связанных стилей, глобальных стилей, внутренних стилей. Наиболее рационально использование связанных стилей: программный код CSS сохраняется в виде отдельного файла, который можно подключить к любой HTML-, XHTML- или XML-странице.

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

Подключение выполняется при помощи следующей конструкции:

&lt,link rel=’stylesheet’ type=’text/css’ href=’/style.css’&gt,, где
style.css – название файла каскадных таблиц стилей

Такой подход обеспечивает возможность использования одного стиля CSS для множества сайтов.

CSS верстка сайтов производится в специальных визуальных CSS-редакторах или же в обычных текстовых редакторах. Каждая таблица CSS состоит из определенного набора правил, которые в свою очередь состоят из набора селекторов и блока определений. В качестве селектора может выступать любой элемент (тэг) языка разметки (HTML, XHTML, XML). Блок определений состоит из набора свойств тэгов и их значений, отделяется фигурными скобками.

Синтаксис CSS описывается так:

Селектор {
Свойство: Значение,
Свойство: Значение,
}


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

Приведем пример:

p {
color: black,
font-size: 18px,
}


В данном примере, любой текст, заключенный в тэги &lt,p&gt,, будет черного цвета с размером шрифта 18 пикселей.

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

В HTML-коде страницы класс для элементов задается так:

&lt,название тэга class=’название класса’&gt,

В CSS-документе стиль отображения этого класса описывается следующим образом:

.название класса {
свойство: значение,
свойство: значение,
……
}



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

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

К примеру, если необходимо указать цвет, размер шрифта, гарнитуру шрифта сразу для тэгов p, div, h1, то достаточно перечислить селекторы этих тэгов через запятую и присвоить им нужные значения свойств:

div, p , h1 { color:red, font-size:12px, }

Данная запись означает, что текст, содержащийся в элементах div, p и h1 будет отображен шрифтом красного цвета размером в 12 пикселей.

CSS верстка сайтов может применяться для самых разных по тематике и структуре сайтов, она совместима с большинством современных браузеров. CSS верстка сайтов позволяет гибко управлять изменением свойств элементов при взаимодействии с пользователями сайтов (при нажатии кнопкой мыши, при наведении курсора).

Теги:
верстка сайтов, css верстка, css верстка сайтов, таблицы стилей, каскадные таблицы стилей

Источник