Сегодня начнем разбираться в CSS (Cascading Style Sheets — каскадные таблицы стилей). Этот язык используется для описания внешнего вида документа, описанного в HTML, другими словами с помощью CSS мы будем создавать нужный нам внешний вид веб-страницы. Как уже говорил на прошлых уроках, HTML строится на основании древовидной структуры, которая выглядит подобным образом:
Между тегами <body> </body> создается вся иерархия. CSS помогает нам легко и изящно управлять внешним видом всех элементов, находящихся в любых отношениях между собой. В иерархии html элементы могут быть:
- родительскими, как например <div> по отношению к <p>
- дочерними, как <a> по отношению к <p>
- элементами предками, как <body> является предком <div>, <p> и <a>
- элементами потомками, как <div>, <p> и <a> по отношению к <body>
- сестринскими элементами, как теги абзацев <p> друг к другу
CSS позволяет описывать нам, то как будет выглядеть тот или иной элемент на сайте с помощью селектора. Селектор - это одна из двух частей CSS правила. CSS правило - это то, чем описываются все файлы стилей. Но давайте по порядку. Сначала мы подключим CSS файл к html, данную процедуру я уже показывал в этом уроке: CTRL+N - создается новый файл, далее CTRL+S - сохраняем новый файл под именем style.css. Советую в панели инструментов открыть сайдбар открытых файлов
Теперь само подключение: подключается этот файл в голове, т.е. между тегами <head></head> с помощью тега <link>, в котором указывается атрибут rel (realtionship - отношение) со значением stylesheet, а в значении атрибута href указывается путь до файла, в моем случае файл находится в той же папке, что и html-файл, поэтому указываю просто имя style.css
Теперь узнаем, что такое CSS правило и из чего состоит. СSS правило состоит из двух частей: селектор и блок объявления. Селектор ( от слова select - выбирать) всегда пишется в левой части, и указывает к каким элементам html кода будет применено наше правило. Далее пишется блок объявлений внутри таких { } скобок. В блоке объявлений пишем сами объявления, которые разделяются точкой с запятой. Сами объявления представляют собой простые сочетания CSS свойств и его значений. Объявлений для селектора можно писать сколько угодно, причем объявление может относится сразу к нескольким селекторам, главное разделять селекторы запятой.
Добавил заголовок <h1> в html код. В файле style.css к селекторам p и h1 написал правила:
- color: #FF6347 - изменил стандартный черный на томатный цвет, запись цветов принято производить в 16-ричной системе исчиcления (по простому hex), но можно и просто названием цвета на английском языке. Все цвета я беру ЗДЕСЬ
- font-size: 28px; - изменил размер шрифта
На этом первый урок по основам CSS закончился. Скоро будут новые. Подписывайтесь, чтобы не пропустить.