Ранее я рассказывал о том, как сделать html сайт в блокноте. В той статье  я упомянул о каскадные таблицы стилей. Пришло время рассказать о них подробнее.

В статье, о которой я упомянул выше, мы создавали html страницу, используя для этого html теги. С помощью тегов мы разметили основную структуру документа. В итоге мы получили готовую страницу сайта. Свое предназначение она, разумеется, выполняет, но при этом выглядит, мягко говоря, непрезентабельно. Сегодня мы займемся ее оформлением. И на помощь нам придут CSS (читается как си-эс-эс ), что расшифровывается как Cascading Style Sheets в переводе на русский – каскадные таблицы стилей.

Основы CSS

Итак, что же такое CSS и с чем их едят? Как Вы, наверно, знаете оформление текста можно задавать с помощью атрибутов html. Однако, это не удобно. Представьте, что у Вас большой сайт из нескольких сот, иди даже тысяч страниц. Вдруг Вам захотелось поменять оформление. Если Вы задали оформление непосредственно в html, то Вам придется изменить код сразу на всех страницах. Именно поэтому было решено разделить структуру документа и его оформление. С помощью css Вы можете задавать оформление сразу всех страниц сайта. Теперь для того, чтобы поменять, скажем, цвет заголовков, Вам не нужно переписывать код на каждой странице, а достаточно просто изменить одну строчку.

Как прикрепить CSS к сайту

Существует несколько способов прикрепить код css к html сайту.

  1. Стиль оформления прописывается непосредственно внутри тега html с помощью атрибута style.
  2. Стиль оформления встраивается в html документ внутри тега <head> с помощью элемента Style.
  3. Стиль оформления выноситься в отдельный файл.

На практике обычно применяется последний способ. Его мы и рассмотрим поближе.

Пример оформления сайта с помощью CSS

Итак, для примера создадим html страницу, как мы это делали раньше. Теперь немного усложним код.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="Description" content="Это описание нашего html сайта">
<meta name="Keywords" content="Ключевые слова">
<title>Это оглавление страницы</title>
</head>
<body>
<div class="header"><h1>Название сайта</h1></div>
	<div class="content">
		<h2>Подзаголовок</h2>
			Текст статьи
	</div>
</body>
</html>

Как видите, по сравнению с прошлым разом, я внес в код несколько изменений:

1. В теге <head> была добавлена строчка:

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

С помощью этой строчки мы прикрепили к нашей html страничке еще один файл – style.css в котором мы и будем задавать оформление для нашего сайта. При этом href=»style.css» путь к этому файлу. В данном случае, относительный путь, т.е путь задан относительно нашего файла html. Данная запись означает, что файл style.css находится в той же самой папке, что и файл html.

2. Название сайта  было заключено в тег <div>. Данный тег говорит нам, что название будет заключено в блок. Размеры, отступы, фон, цвет текста внутри блока и многое другое мы сможем прописать в файле style.css.

Наша html страничка готова. Теперь осталось сделать сам файл стилей. Делается он точно также. В блокноте создается текстовый файл, который мы назваем style. После этого, мы меняем ему расширение с txt на css. Помещаем мы его, разумеется, в ту же самую папку, что и наш файл html.

В файл style.css мы записываем следующий код:

body { background-color:#E5EFF4;}
.header { color:#FFFFFF; background-color:#5E89CB; padding:20px;}

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

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

Строчка

body { background-color:#E5EFF4;}

говорит нам о том к содержимому тега <body> будет применяться оформление, указанное в фигурных скобках. В данном случае мы задали для тега <body> цвет фона. Мы сделали это с помощью  background-color. Для того, чтобы указать цвет мы использовали шестнадцатеричный код #E5EFF4.

Возникает вопрос: «Как определить код интересующего меня цвета?». Думаю, ответ Вы найдете в статье про палитру цвета в html.

Оформление можно задать не только для тега <body> но и для любого другого тега, например, для тега <div>. Помимо цвета фона мы можем задать для тегов div размеры, расположение, способ взаимодействия с другими элементами странички, отступы, фоновую картинку, цвет и размер текста, и многое другое. При этом, указанное оформление будет применяться для всех тегов <div> на сайте. Если Вы хотите применить оформление только для определенного тега, то Вы можете задать ему класс. Именно таким образом мы присвоили класс «header» тегу <div> в котором находится название нашего сайта. Мы сделали это в строчке html файла:

<div class="header"><h1>Название сайта</h1></div>

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

Заключение

Разумеется, я не смогу в одной статье рассказать обо всех нюансах оформления сайта. Я и не ставил перед собой такую задачу. В этой статье я хотел лишь объяснить основные принципы, на которых строится верстка сайта. И я надеюсь, у меня это получилось. Как и всегда, буду рад Вашим комментариям.