Базовые понятия и основы CSS

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

Сам код CSS пишется на весьма формальном языке с использованием небольшого количества правил оформления и с понятными словами на английском языке, как width (ширина), background (фон), red (красный) и многими другими.

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

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

Начинаем погружение

Основной синтаксис состоит из селекторов и свойств. Селектор представляет собой формальное описание элемента, для которого нам нужно задать внешний вид, что мы делаем через свойства. Могут быть селекторы блоков (элементов страницы), абзацев, шрифтов, таблиц и всего, что обычно можно встретить на веб-страницах.

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

Способы подключения стилей к документу

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

В таком случае ссылка на каскадные таблицы стилей помещается в HTML коде в тегеи, для чего используется тег . Пример: . В этом примере мы указываем, что это таблица стилей – stylesheet. И даем ссылку на название файла с ними – style.css (файл должен при таком указании храниться в одной папке с HTML страницей).

Синтаксические правила

Все представление кода CSS состоит из повторения блоков селекторов и указания к ним свойств. Выглядит это таким образом:

селектор {

свойство1: значение;

свойство2: значение;

}

Пример кода, в котором мы подключаем каскадную таблицу стилей и реализуем простой домик. Сначала создаем html документ под именем index.html в текстовом редакторе Notepad ++

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css">
 <title>Домик</title>
</head>
<body>
 <div class="scene">
  <div class="roof"></div>
  <div class="house">
   <div class="door"></div>
  </div>
 </div>
</body>
</html>

Каждый из структурных элементов домика обозначаются блоками (тег «div») – это удобные функциональные компоненты в CSS, дающие большую гибкость в управлении визуальным отображением на веб-странице. Каждому из них даем название (roof – рисуем крышу, house – сам домик, door – двери). В программе Notepad ++ создаем новый файл под именем style.css.Теперь можно воплотить наш домик в жизнь:

.roof {
 width: 0;
 margin: 0 auto;
 margin-top: -50px;
 border: 150px solid white;
 border-bottom-color: red;
}

.house {
 width: 200px;
 height: 200px;
 margin: 0 auto;
 background-color: blue;
 overflow: hidden;
}

.door {
 height: 100px;
 width: 50px;
 margin-top: 100px;
 margin-left: 50px;
 background-color: red;
}

Открываем файл index.html в любом браузере, например, Яндекс-браузер.

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