Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії 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 верстка сайтів, таблиці стилів, каскадні таблиці стилів