Блог Тимура Казанского

Урок 1. Основы и правила CSS


В данном уроке вы узнаете, что такое правила CSS, наследование, идентификаторы, селекторы, определения, свойства и их значения, в общем все то, с чего каждому новичку следует начинать изучение языка CSS. В Уроке 2. Стили CSS в HTML, я вкратце упоминал о стилях и приводил на примере дома, как с помощью css можно его разукрасить и стилизовать. Советую перечитать этот урок, чтобы разобраться на практическом примере применения css. Напомню CSS (Cascading Style Sheets – Каскадные таблицы стилей) – определяет представление внешнего вида документа HTML.

Давайте начнем с практики, а потом разберем каждую строчку кода.

В уроке 5. Блочные и строчные элементы в HTML, я приводил пример, в котором разбирал блочные элементы html и помечал их разными цветами, давайте разберем данный пример, затем слегка модернизируем его, что-то уберем, добавим, это нам поможет лучше разобрать и понять вышеуказанные определения и их работу, заранее хочу сказать – не пугайтесь если ниже вы обнаружите большое количество кода, мы с вами разберем каждую строчку, к тому же с большей частью синтаксиса css вы уже ознакомились в первых уроках по html. Сначала я приведу для наглядности весь код примера, а потом мы займемся непосредственно каскадными таблицами стилей.

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type= "text/css">
div#header {
background-color: yellow;
}
div#body {
background-color: blue;
width: 600px;
}
div#footer {
background-color: green;
}
</style>
</head>
<body>
<h1>Пример из Урока 5. Блочные и строчные элементы в HTML</h1>
<div id="header">
<h2>Шапка сайта</h2>
<p>Здесь располагается картинка с <b>логотипом</b> и названием ресурса<em>(или сайта)</em></p>
</div>
<div id="body">
<h3>Середина сайта</h3>
<p>В теле сайта находится <ins>все остальное</ins> - колонки, таблицы, кнопки, поля ввода, текст и.т.д</p>
</div>
<div id="footer"><h4>Подвал сайта</h4>
<p>Копирование контента строго <a>Запрещено!</a></p>
</div>
<p>P.S. В уроке 2 мы трансформируем данный пример вот в такой домик <img src="preview-uroka-2.jpg" alt="Трансформацию примера ждите во 2-ом уроке."/> - не пропустите!</p>
</body>
</html>

Посмотреть результат выполнения кода вы может в новом окне, нажав a сюда, а скачать можете отсюда.

Html код мы разбирать не будем, но хотелось бы отметить, что в примере выше, css кода почти столько же, сколько и html, а представьте если элементов html будет больше – соответственно будет и расти код стилизации, очень неудобно, когда в одном файле (документе) сосредоточены сразу два различных кода, существует 3 варианта расположения стилей css. Вариант, который представлен выше, где элемент <style> находится в элементе <head> называется глобальной таблицей стиля.

Есть еще похожий на предыдущий вариант размещения стилей – встроенная таблица стилей, схожесть заключается в том, что css стили применяются также в файле (документе) html но на этот раз непосредственно в самом элементе html, и выступают в роли атрибута с определенным значением, рассмотрим элемент html <p>:

<p style="color:red; text-align: center;">Текст абзаца</p>

Я не советую использовать данный вариант, так как, во-первых это усложняет разметку и читаемость кода, во вторых при изменении стиля, вам потребуется огромное количество времени на поиски элемента <p>, особенно, когда таких элементов много.

И последнее и самое предпочтительное – это внешняя таблица стилей, это когда весь код css выносится за предела html документа, в отдельный текстовый файл с расширением «.css» (расширение файла – это то, что идет после точки в названии файла, тем самым определяя тип данного файла, например file.html, или file.css), вот этот метод мы и будем использовать в дальнейшем. Давайте создадим новый текстовый документ на рабочем столе компьютера, как создать текстовый файл – я подробно описал в данной статье, назовем его «style.css». И скопируем туда весь код css без элемента <style>, вот как это будет выглядеть:

Вот, как выглядит документ style.css

Далее возникает вопрос, как указать HTML файлу путь к нашему новому файлу «style.css»? Очень просто, используем элемент <link> помещаем его в элемент <head> и указываем тип и ссылку (Про ссылки я писал в уроке 3. Ссылки в HTML) на файл style.css, а вот как это будет выглядеть:

Для версии HTML-4:
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
Для версии HTML-5:
<head>
<link rel="stylesheet" href="lounge.css">
</head>

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

Наследование в CSS

Наверное, лучшим примером для объяснения данного термина будет ребенок и родитель. Представим, что родитель папа имеет рыжие волосы, а мама голубые глаза, соответственно если их ребенок будет иметь голубые глаза и рыжие волосы, то можно смело считать, что он унаследовал данные свойства от своих родителей. То же самое можем сказать и про каскадные таблицы стилей (css), давайте посмотрим на древовидную структуру (структура в виде дерева) нашего документа:

Древовидная структура вышеуказанного примера

А теперь добавим следующий код css, разберем его и посмотрим, что изменилось на структуре нашего документа:

body { - устанавливаем стиль тела сайта;
font-family: Verdana; - определяем шрифт;
color: red; - утанавливает цвет (красный);
text-align: center; отображаем текст по центру;
} закрываем фигурную скобку.

Структура документа с изменением селектора body

Щелкните сюда, чтобы посмотреть результат, или сюда, чтобы скачать. Вы заметили, после того, как мы применили вышеуказанные стили к body весь текст в документе изменился, а именно цвет, шрифт и отображение текста по центру. Не догадываетесь почему так произошло? Именно! Все дело в наследовании! В данном случае родителем является тело документа body – а все остальное это дочерние типы или потомки body, соответственно они унаследовали все свойства родителя. Также это касается элемента <div id=”header”> , который в свою очередь является родителем по отношению к элементам <p> и <h2>, а элементы <p> и <h2> являются дочерними по отношению к элементу <div id=”header”> и так далее вниз по иерархии наследования – элементы <p> и <h2> являются родителями для элементов <b> и <em> и соответственно элементы <b> и <em> являются дочерними типами по отношению к <p> и <h2>. А вот элементы стоящие на одном уровне, такие как: <div>, <h1>,<p> и так далее, являются сестрами по отношению друг к другу. Для того, чтобы вы наверняка разобрались в данной теме, давайте приведем еще один пример. Удалим из всех div их определения (все, что между фигурными скобками) и добавим в body цвет фона - background-color: pink; (розовый цвет):

body {
font-family: Verdana;
color: red;
text-align: center;
background-color: pink;
}
div#header {
}
div#body {
width: 600px;
}
div#footer {
}

Запускаем наш пример и видим, что вся страница стала иметь розовый фон, догадываетесь почему так произошло? Правильно, во-первых, по той же причине, что и с текстовыми элементами, все элементы <div> унаследовали все свойства родителя, в данном случае – фон. А во вторых, я думаю, вы уже поняли, почему до этого все элементы <div> имели разные цвета, а после того, как мы их удалили и определили один цвет в body все разом окрасилось в один единственный цвет. Если не догадались, объясню подробней: мы имеем 3 элемента <div>, но чтобы мы смогли их окрасить в разные цвета, нам нужно, как-то их разделить, поэтому мы используем идентификатор id (атрибут в html элементе и символ решетки - «#» в css), присваиваем ему любое имя (значение), главное, чтобы оно было понятное и логичное (это делается, для вашего удобства, так как если в будущем вам потребуется, что-то поправить или изменить, то вы с легкостью смогли бы понять к какому элементу или части кода этот идентификатор относится) и затем переопределяем для каждого элемента <div> свой цвет, иначе, если мы просто укажем элемент <div> и придадим ему какой-либо цвет, то браузер будет считать, что этот цвет вы указали для всех элементов <div>, соответственно они окрасятся в один и тот же цвет. Вы можете установить атрибут идентификатора в любом элементе html и в последующем стилизовать его отдельно от других элементов. Не волнуйтесь, если вы чувствуйте, что не полностью разобрались в этом, мы поговорим подробнее об идентификаторах на следующих уроках. Ну и в завершении данного раздела, вернем цвета элементам <div> и в дополнении укажем в элементе <div> с идентификатором «header» цвет текста – черный, в результате чего элементы <h2>,<p>, <b> и <em> также унаследуют этот цвет.

body {
font-family: Verdana;
color: red;
text-align: center;
}
div#header {
background-color: yellow;
color: black;
}
div#body {
background-color: blue;
width: 600px;
}
div#footer {
background-color: green;
}

Посмотрите, что получилось.

А теперь взглянем на структуру документа:

Структура документа с изменением селектора div

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

Правила CSS или написание правил в CSS

Написание правил в CSS

Рассмотрим в качестве примера следующую строчку кода:

p {color: red; text-align: center;} – вся эта строчка кода называется правилом (кстати, вы можете оформлять написание кода и в таком виде, т.е. в одну строчку, но лучше избегать этого, так как это затрудняет читабельность).

body { font-family: Verdana;} – а вот еще одно правило.

А теперь давайте разберем вышеперечисленные два правила по кусочкам и узнаем, как называются внутренние части правил.

  • body и p – селекторы
  • color, text-align, font-family – это свойства;
  • red;, center;, Verdana; - это значения свойств.

А теперь подытожим:

Свойство + Значение = Определение.

{ font-family: Verdana;}

Определение + Определение = Блок определений.

{color: red; text-align: center;}

Селектор + Определение (Блок определений) = Правило.

p {color: red; text-align: center;} – не забываем ставить пробел после двоеточия и точки с запятой!

Вот и все, ничего сложного, правда? А теперь я приведу табличку с кодом, вернее поступим иначе, я напротив каждой строчки кода, буду оставлять комментарий с определением, заодно вы наглядно поймете как это делать, комментарии нужны для того, чтобы описывать какие-то строчки кода, которые вы можете забыть в будущем или оставлять какие-то заметки в коде, не переживайте, на код комментарии никак не влияют – они невидимы и чтобы записать комментарий, достаточно вставить его между символами «/**/», вот как это будет выглядеть - /*Здесь находится комментарий*/.

body { /*устанавливаем определения для селектора body */
font-family: Verdana; /*указываем шрифт Verdana*/
color: red; /*и цвет текста - красный*/
text-align: center; /*устанавливаем текст по центру страницы*/
} /*закрываем фигурную скобку*/
div#header { /*селектор div с идентификатором header(верхняя часть страницы)*/
background-color: yellow; /*устанавливаем фон желтым цветом*/
color: black; /*а текст помечаем в черный цвет*/
} /*после написания определений, закрываем фигурную скобку*/
div#body { /*селектор div с идентификатором body(тело страницы)*/
background-color: blue; /*фон имеет синий цвет*/
width: 600px; /*устанавливаем ширину селектора div в 600 пикселей*/
} /*с правилом данного div ммы закончии*/
div#footer { /*теперь разберем нижнюю часть селектора div*/
background-color: green; /*цвет фона - зеленый*/
} /*закрываем указание определений для селектора div*/

Для лучшего запоминания и понимания правил CSS вы можете сравнить их в какой-то степени с элементами HTML, т.е. правило в css – это как элемент в html, а определение (свойство, значение) – аналогично атрибуту (свойство, значение) html, тоже самое с функциональной точки зрения, определения в css дают (основную) информацию селектору, точно так же, как и в html атрибуты дают (дополнительную) информацию элементу.

Ну вот мы и разобрались в правилах и основах CSS, если что-то непонятно, не переживайте, в следующих уроках мы будем возвращаться к этому! Также все вышеперечисленные примеры вы можете скачать одним архивом отсюда. Удачи и увидимся на следующих уроках!

Категория: Уроки CSS для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0