CSS верстка сайтов пользуется у современных веб-разработчиков заслуженной популярностью. CSS – каскадные таблицы стилей – позволяют веб-мастеру очень гибко задавать стили отображения элементов на страницах сайта, помогают экономить время и усилия на верстку сайтов. Как происходит CSS верстка сайтов?
CSS верстка сайтов может использоваться с применением связанных стилей, глобальных стилей, внутренних стилей. Наиболее рационально использование связанных стилей: программный код CSS сохраняется в виде отдельного файла, который можно подключить к любой HTML-, XHTML- или XML-странице.
Основные преимущества CSS верстки по сравнению с HTML версткой заключается в более удобном управлении дизайном страниц сайта, более точном отображении элементов вне зависимости от браузера, в более удобном написании кода благодаря разделению содержимого сайта от его оформления. Кроме того, CSS верстка существенно расширяет стандартные возможности HTML.
Подключение выполняется при помощи следующей конструкции:
<link rel="stylesheet" type="text/css" href="/style.css">, где
style.css – название файла каскадных таблиц стилей
Такой подход обеспечивает возможность использования одного стиля CSS для множества сайтов.
CSS верстка сайтов производится в специальных визуальных CSS-редакторах или же в обычных текстовых редакторах. Каждая таблица CSS состоит из определенного набора правил, которые в свою очередь состоят из набора селекторов и блока определений. В качестве селектора может выступать любой элемент (тэг) языка разметки (HTML, XHTML, XML). Блок определений состоит из набора свойств тэгов и их значений, отделяется фигурными скобками.
Синтаксис CSS описывается так:
Селектор {
Свойство: Значение;
Свойство: Значение;
}
Таким образом можно задать цвет, размер, шрифт текста, цвет и стиль рамки, строк и колонок таблиц, стиль поведения ссылок при нажатии и многое-многое другое. Если в качестве селектора выбран какой-нибудь тэг языка разметки HTML, то действие этого селектора распространяется на все такие тэги, встречающиеся на страницах сайта.
Приведем пример:
p {
color: black;
font-size: 18px;
}
В данном примере, любой текст, заключенный в тэги <p>, будет черного цвета с размером шрифта 18 пикселей.
Но как поступить, если необходимо задать для некоторых абзацев стиль отображения, отличающийся от общего на странице? CSS верстка сайтов в этом случае предлагает использование классов – class. Класс задает стиль отображения только для тех элементов, к которым он был применен.
В HTML-коде страницы класс для элементов задается так:
<название тэга class="название класса">
В CSS-документе стиль отображения этого класса описывается следующим образом:
.название класса
{
свойство: значение;
свойство: значение;
......
}
Для задания динамических свойств отображения элементов существуют также псевдоклассы и псевдоэлементы. Их применение подробнее рассматривается здесь.
CSS верстка сайтов, как уже упоминалась, позволяет сделать код страниц более компактным, удобным. Способствует этому возможность группировки селекторов для задания одинаковых свойств отображения сразу нескольким элементам.
К примеру, если необходимо указать цвет, размер шрифта, гарнитуру шрифта сразу для тэгов p, div, h1, то достаточно перечислить селекторы этих тэгов через запятую и присвоить им нужные значения свойств:
div, p , h1 { color:red; font-size:12px; }
Данная запись означает, что текст, содержащийся в элементах div, p и h1 будет отображен шрифтом красного цвета размером в 12 пикселей.
CSS верстка сайтов может применяться для самых разных по тематике и структуре сайтов, она совместима с большинством современных браузеров. CSS верстка сайтов позволяет гибко управлять изменением свойств элементов при взаимодействии с пользователями сайтов (при нажатии кнопкой мыши, при наведении курсора).
Теги:
верстка сайтов,
css верстка,
css верстка сайтов,
таблицы стилей,
каскадные таблицы стилей |