Что такое CSS
Ранее я рассказывал о том, как сделать html сайт в блокноте. В той статье я упомянул о каскадные таблицы стилей. Пришло время рассказать о них подробнее.
В статье, о которой я упомянул выше, мы создавали html страницу, используя для этого html теги. С помощью тегов мы разметили основную структуру документа. В итоге мы получили готовую страницу сайта. Свое предназначение она, разумеется, выполняет, но при этом выглядит, мягко говоря, непрезентабельно. Сегодня мы займемся ее оформлением. И на помощь нам придут CSS (читается как си-эс-эс ), что расшифровывается как Cascading Style Sheets в переводе на русский – каскадные таблицы стилей.
Основы CSS
Итак, что же такое CSS и с чем их едят? Как Вы, наверно, знаете оформление текста можно задавать с помощью атрибутов html. Однако, это не удобно. Представьте, что у Вас большой сайт из нескольких сот, иди даже тысяч страниц. Вдруг Вам захотелось поменять оформление. Если Вы задали оформление непосредственно в html, то Вам придется изменить код сразу на всех страницах. Именно поэтому было решено разделить структуру документа и его оформление. С помощью css Вы можете задавать оформление сразу всех страниц сайта. Теперь для того, чтобы поменять, скажем, цвет заголовков, Вам не нужно переписывать код на каждой странице, а достаточно просто изменить одну строчку.
Как прикрепить CSS к сайту
Существует несколько способов прикрепить код css к html сайту.
- Стиль оформления прописывается непосредственно внутри тега html с помощью атрибута style.
- Стиль оформления встраивается в html документ внутри тега <head> с помощью элемента Style.
- Стиль оформления выноситься в отдельный файл.
На практике обычно применяется последний способ. Его мы и рассмотрим поближе.
Пример оформления сайта с помощью 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 мы перед его названием ставим точку, после чего точно так же задаем оформление в фигурных скобках. В данном случае мы задали цвет фона и отступы внутрь в пикселях.
Заключение
Разумеется, я не смогу в одной статье рассказать обо всех нюансах оформления сайта. Я и не ставил перед собой такую задачу. В этой статье я хотел лишь объяснить основные принципы, на которых строится верстка сайта. И я надеюсь, у меня это получилось. Как и всегда, буду рад Вашим комментариям.
