Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

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

CSS верстка сайтов 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 верстка сайтов, таблицы стилей, каскадные таблицы стилей