CSS

Что такое CSS

CSS - это технология, позволяющая управлять внешим видом содержимого html-документа. Аббревиатура CSS расшифровывается как Cascading Style Sheets, а переводится это так: каскадные таблицы стилей.

Изучение CSS подразумевает знание HTML. Если вы не изучили HTML, то начинать изучение CSS вам ещё рано. Сначала освойте язык разметки гипертекста, а потом приступайте к изучению каскадных таблиц стилей.

Ближе к делу.

Каждый элемент html-документа имеет свой внешний вид по умолчанию. Например, текст взятый в тег <h1>, будет иметь поределённый размер, цвет и шрифт. Так и все теги по умолчанию как-то отображаются образуя стиль.

Стиль html документа - это, говоря по простому, всё, что относится к отображению документа в браузере: шрифты, размеры, цвета, разрядки заголовков и текста, отступы и т.д. При помощи CSS мы можем управлять параметрами форматирования элементов документа.

Как именно это делается?

Опишу для начала один способ присоединения CSS к документу. Хотя способов существует несколько, но нужно начать с чего-то одного.

Итак, в корне сайта создаёте текстовый файл, но с расширением не .txt, а .css. Корень сайта выбран просто так, можно создать папку /css/ и разместить файл там.

Назовём этот файл css-file.css. В этот файл вписывается программный код таблицы стилей. Таблица стилей - это шаблон, который управляет форматированием тэгов HTML в Web-документе.

Таблица стилей представляет собой набор правил форматирования тегов HTML. Синтаксис их следующий:

тег { свойство: значение }

Например сделаем этот заголовок синим и величиной 16pt. Для этого в файл вписывается строка:

h1 { color: blue; font-size: 16pt }

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

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

В html документе теперь теги <h1> будут синие и величиной 16pt.

Другой способ

Есть и другой способ прописать в html-документе правило CSS. Нужно в разделе <head> прописать таблицу стилей в теге <style>, вот как это выглядит:

<head>
<style>
	h1 { color: blue; font-size: 16pt }
</style>
</head>

Сейчас я приведу пример того, как это работает. Вот образец кода:

<head>
	<title>Пример CSS</title>
	<style>
		h1 { color: blue; font-size: 16pt; }
	</style>
</head>
<body>
	<h1>Привет!</h1>
	<h2>Заголовок h2!</h2>
</body>

Ещё один способ добавления CSS

Существует еще один способ добавить стиль к тегу - прописать нужные параметры стиля в самом теге в атрибуте style. Данные стили называются внутренние, или встроенные. По сути эти стили - это расширение одного тега. Вот пример использования такого стиля:

<head>
	<title>Пример CSS</title>
</head>
<body>
	<h1>Заголовок h1 без стилей</h1>
	<h1 style="color: blue; font-size: 16pt;">Заголовок h1 с внутренним стилем</h1>
</body>

Промежуточные итоги

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

  1. Связывание - хранение таблицы CSS в отдельном файле и происходит подключение его в html-документам. Этот способ позволяет использовать одну таблицу стилей для форматирования многих документов. Стили из таких файлов называют связанные стили.
  2. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в заголовке документа. Такие стили также называют глобальные стили.
  3. Встраивание в тэги документа - позволяет изменять параметры стиля конкретных тегов страницы. Это также называют внутренний или встроенный стиль.

Есть ещё четвертый способ - импортирование, но его мы пока упустим.

Сейчас нас интересует следующий вопрос. Как будет вести себя браузер, если тегу <h1> указаны стили всеми тремя способами.

Существует иерархия применения стилей, необходимо помнить об этом. Основной приоритет имеет внутренний стиль, затем применяется глобальный стиль и в связанный стиль будет применён в последнюю очередь.

Наверно именно из-за этой иерархии таблицы стилей назвали каскадными.

Удобный способ

Самый удобный способ задания стилей - это подключение css файла в документу, или связывание. Именно он используется наиболее часто, так как позволяет изменяя стили в одном месте, влиять на большое число страниц.

Подробнее про синтаксис CSS и используемые термины

Как я написал выше, таблица стилей представляет собой набор правил форматирования тегов HTML. Синтаксис этих следующий:

тег { свойство: значение }

Правило CSS - это указание браузеру как отображать тег.

Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. То есть наш пример синтаксиса можно написать так:

селектор { определение }

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

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

В одном правиле CSS можно задавать несколько определений, в таком случае их разделяют символом точка с запятой (;), именно так и было сделано в примерах выше.

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

После последнего определения ставить точку с запятой (;) не обязательно.

В качестве селектора могут выступать не только теги, но и классы и идентификаторы. Но это тема отдельной статьи.

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

<head>
<title>Пример CSS</title>
	<style>
		h1 { color: blue; font-size: 16pt; }
		h2
		{
			color: red;
			font-size: 12pt;
		}
	</style>
</head>
<body>
	<h1>Заголовок h1</h1>
	<h2>Заголовок h2</h2>
</body>

В этом примере первое правило (для селектора h1) записано в одну строку, второе правило (для селектора h2) прописано по другому - каждой определение селектора прописано в новой строке. Второй вариант кода более удобен для чтения.

В CSS допустимо для одного селектора каждое свойство указывать по отдельности, вот пример такого кода:

<style>
	h1 { color: blue; }
	h1 { font-size: 16pt; }
</style>

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

<style>
	h1
	{
		color: blue;
		font-size: 16pt;
	}
</style>

Может получиться так, что для одного селектора было два раза задано одно стилевое свойство.

<style>
	h1
	{
		color: blue;
		font-size: 16pt;
		color: red;
	}
</style>

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

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

Очевидная вещь: у каждого свойства может быть только соответствующее ему значение. У свойства color это будет цвет, а не размер.

Комментарии в файле CSS

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

Для создания комментария в CSS применяют следующую конструкцию: /* ... */. Пример комментариев в CSS файле.

/*
	Стиль сделан Иваном Монеткиным для ознакомительных целей
*/

div
{
	width: 100px; /* Ширина блока */
	margin: 10px; /* Поля  вокруг элемента */
	float: right; /* Обтекание по правому краю */
}

Следует помнить что вложенные комментарии недопустимы.

Заключение

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