Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Что такое CSS?

Что такое CSS? CSS (Cascading Style Sheets — Каскадные Таблицы Стилей) — это просто определенный набор правил, указывающих, каким образом отображать элементы страницы, созданной при помощи языка HTML. Раньше все функции по включению самого содержимого в страницу и заданию его внешнего вида брал на себя HTML, но потом было решено разделить эти функции. Теперь HTML отвечает только за то, что именно будет присутствовать на странице (текст, изображения, таблицы, ссылки и т.д.), а CSS указывает, какой внешний вид будет у всех этих элементов (форма, цвет и т.д.).

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

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

А теперь давайте рассмотрим такой обычный пример:

Пример использования CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Что такое CSS?</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
  <div>Блок DIV</div>
  <p>Параграф текста</p>
 </body>
</html>

Результат в браузере (без стилей)

Блок DIV

Параграф текста

Результат со стилями

Блок DIV

Параграф текста

Еще один результат со стилями

Блок DIV

Параграф текста

Если вы уже освоили учебник HTML, то в этом примере вам может быть незнаком только один тег — <LINK>. В данном случае он служит для подключения стилей, которые находятся в файле style.css. В первом результате примера этот файл был пустой, поэтому применился только HTML. Во втором результате в style.css было добавлено немного стилей, а в третьем — еще немного. При этом сам файл с HTML-страницей не менялся вовсе.

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

Содержание →Подключение CSS
Учебник CSS