Современная CSS верстка сайтов

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

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

Основные преимущества CSS верстки - это более гибкий процесс управления элементами дизайна.
CSS3 значительно расширяет функциональные возможности HTML5.

Чтобы подключить отдельный файл в стилями, его следует создать. Далее в файл самой страницы вставить следующий код:

<link rel="stylesheet" type="text/css" href="/template.css">, где template.css представляет собой название файл с каскадной таблицей нужных стилей.

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

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

Синтаксис следующий, весьма простой, кстати говоря:

Селектор {
CSS свойство: присвоенное значение;
CSS свойство: присвоенное значение;
}

Можно задавать стиль шрифта, цвет шрифта, стиль обводки и так далее.

Чуть ниже продемонстрируем простой пример:

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

Любой текст, который будет заключен в тег <p> получит черный шрифт с размером текста восемнадцать пикселей.

А если некоторые абзацы текста совсем другие, то, что делать нужно? CSS верстка подразумевает использование классов. Класс можно задавать определенным тегам HTML разметки.

Синтаксис простой:

<название тега class=”название самого класса”>

Чтобы описать сам класс, нужно вставить в файл следующее:

.название_класса {
CSS свойство: присвоенное значение;
CSS свойство: присвоенное значение;
}

Есть и использование псевдоэлементов, но про это немного позже.

CSS верстка позволяет сделать код страницы более понятным.

Можно сразу присваивать некоторыми элементам html те самые свойства.

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

Категория: Web

Похожие статьи