Что такое CSS и CSS3. Синтаксис CSS и примеры

Вводная статья про CSS, из которой Вы познакомитесь с общими понятиями, что такое CSS, для чего он нужен. Кратко познакомимся с его синтаксисом и возможностями. Начнем с определения

Оглавление
1. Определение CSS
2. Цели и задачи CSS
3. Синтаксис CSS (селекторы)
4. Как и где задавать стили CSS
5. В чем плюсы использования CSS
6. Проблемы CSS с браузерами
7. Ответы на часто задаваемы вопросы
7.1. Что такое CSS3
7.2. В чём разница между CSS и HTML

1. Определение CSS

CSS (от англ. "Cascading Style Sheets", каскадные таблицы стилей) — список стилей для сайта на html

Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например, любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п. Все, что связано с форматированим текста делается через CSS.

Но это лишь малая часть из возможностей. За всю визуализацию всех тегов html отвечает CSS. Даже за динамические изменения: выпадающие меню, подсвечивания ссылок при наведении.

Список всех стилей на языке вебмастеров часто называют "таблица стилей CSS".

2. Цели и задачи CSS

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

3. Синтаксис CSS (селекторы)

Каждое свойство и стиль описывается через "Селекторы". Его синтаксис следующий

Селектор{
	атрибут: значение;
	}

Селектор — это может быть название стиля или тега. В фигурных скобках описываются конкретные правила. Описание происходит всегда по одному стандарту: "название атрибута: значение". Каждое правило должно заканчиваться точкой с запятой.

Например

.название_стиля {
	атрибут1: значения1;
	атрибут2: значения2;
	...
	};

Существует множество вариантов задания стилей CSS. Давайте разберем самые популярные на примерах.

/*Задание общего стиля*/
	.global_style {
	font-size: 12px;
	color: red;
	}
/*Задание общего стиля только для тега font*/
	font.style1 {
	font-size: 10px;
	color: blue;
	}
/*Задание общего стиля только для тега font*/
	#global_style2 {
	font-size: 14px;
	color: red;
	}
	
	h1 {
	font-size: 19px;
	}

Стиль global_style можно использовать для всех тегов в качестве класса. Например, <div class="global_style">.

Стиль style1 можно использовать только для тега <font>, поскольку в определении было указано font.style1.

Третий вариант задания через решетку (#). Как и в первом случае он определен для всех элементов, но задавать его нужно не через class, а через атрибут id: <div id="global_style2">

В последнем варианте мы просто указали название тега <h1> и прописали ему стиль. Это значит, что теперь все теги <h1> будут наследовать значение этого стиля.

4. Как и где задавать стили CSS

Стиль задается в мета тегах head с помощью тега <style>:

<html>
<head>
<style type="text/css">
	.styletest {
	color: blue; 
	font-size:12px; 
	font-family:Arial;
	}
</style>
</head>
<body>
...
Тело страницы
...
</body>
</html>

Но это плохо, т.к. загромождается код описаниями стилей. К тому же, если этот код одинаковый для всех страниц сайта, то чтобы поменять его везде, придется повозиться. Поэтому используют специальные файлы с расширениями .css, куда заносятся все стили. Далее этот файл подключается к странице сайта с помощью тега <link> в разделе head:

<head>
...
	<link rel="stylesheet" type="text/css" href="style.css"/>
...
</head>

Преимуществом такого подхода является так же и то, что этот файл кэшируется браузерами, что снижает "вес" сайта, тем самым он быстрее грузится. А это сейчас очень важно для SEO. См. как увеличить скорость загрузки сайта

5. В чем плюсы использования CSS

Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он изменится на каждой странице сайта
Это единственный способ изменять дизайн на сайте
Простой синтаксис языка

6. Проблемы CSS с браузерами

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

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

-moz- для браузера Firefox
-webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
-ms- для браузера Internet Explorer
-o- для браузера Opera

7. Ответы на часто задаваемы вопросы

7.1. Что такое CSS3

В последнее время часто можно встретить понятие CSS3. По сути это все тот же CSS, но с набором новых аргументов, которые дают дополнительные возможности в плане различных эффектов. Например, свечение текста. Многие браузеры не поддерживают такие свойства, поэтому рекомендуется использовать такие эффекты в минимальных количествах.

7.2. В чём разница между CSS и HTML?

HTML — это каркас вашей страницы (это ссылки, картинки, контент). А в CSS определяется то, как все это будет отображаться для пользователя. Так что HTML и CSS это принципиально разные вещи, но они связаны между собой. Правилом хорошего тона является разделение кодов между собой, чтобы не смешивать их на одной странице.

← Перейти в каталог CSS уроков

CSS — что это такое