Базовые понятия css
В прошлой статье мы с вами подробнее разобрались что же такое html, теперь перед тем как приступить к верстке нам следует разобраться с css. Css(каскадная таблица стилей). И так для начала вспомним что у каждого тега помимо названия есть атрибуты. В данной статье ас будут интересовать первую очередь 2 атрибута это id(идентификатор тега) и class(класс тега).
Базовые понятия css
Для начала напомню что атрибуты тега задаются в теле тега, разделаются пробелов и являют собой пару ключ значение разделанные знаком равенства. id и class это строковые атрибуты в именах которых нельзя использовать пробелы и спец символы. Задаются они следующим образом.
<div id=”exampleId” class=”exampleClass”>text</div>
Теперь рассмотрим, что же данные атрибуты обозначают id это идентификатор указывающий на конкретный элемент, и при помощи данного атрибута к элементов можно обратится к примеру задавая ему css или из javaScript. У элемента id может быть только один, а может не быть совсем. class же в отличии id может обозначать группу элементов то есть несколько элементов могу иметь одинаковый класс и обираясь по классу из css\js вы работаете со всеми элементами данного класса.
На самом деле одинаковый id также можно задавать но действие будет выполнено над первым найдены(с учетом возможности задавать контекст достаточно часто это бывает удобно). А в случае с классом действие будет производится над всеми элементами с данным классом и соответствующие данным условиям. Также можно обратится ко всем тегам оправленной группы(p div итд). Также стоит отметить что классов 1 элементу можно задавать несколько, в таком случаете они должны быть разделены пробелом.
<div id=”exampleId” class=”exampleClass1 exampleClass2”>text</div>
Для того чтобы разобраться что мы будем записывать в css мы сначала разберем еще один атрибут элемента, а именно style. В данном атрибуте мы можем расписывать различные характеристики отображения элемента(высоту, ширину, цвет фона, положение на экране итд). То есть структура атрибута является составной и состоит из правил параметр:значение, данный пары разделаются ; .
style=”width: 150px; left: color: red”
В данном примеру мы задаем ширину элемента равную 150 красный цвет текста.
В теги данный атрибут помещается также просто как и другие
<div style=”width: 150px; left: color: red”>text</div>
Изначально стили в html документах так издавали стили, но это переводило к огромной перегрузке документа и дублированию кода. В виду чего было принято решение выносить стили в отдельные файлы css, как привязать css к html документы вы узнали в предыдущей статье.
Привязываем блоки стилей, как я писал выше по средствам id class или названий тегов или комбинированных условий.
Запись css файлов унаследовало многое от атрибута style. Внутри блока пары параметра и значения записываются также, но сам блок заключается ф фигурные скобки ({... }) перед которыми указывается цель блока(селектор). Для обрашния к классу нужно написать .ClassName(.exampleClass). Для обращения к id #ClassName(#exampleId). Для обращения ко всем тегам конкретного типа просто написать имя тега
Пример 1 обращение по тегу(в данном случае правило будет применено ко всем div ам документа) div
{ color: white; font-size: 10pt; font: normal; background: transparent;
}
Пример 2 по id(в данном случае правило будет применено к первому элементу с указанным id)
#exampleId
{ color: white; font-size: 10pt; font: normal; background: transparent;
}
Базовые понятия css
Пример 3 по классу(в данном случае правило будет применено ко всем элементам указанного класса)
.exampleClass
{ color: white; font-size: 10pt; font: normal; background: transparent;
}
