Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или нескольких селекторов(3) и блока определения(2), выделяющегося фигурными скобками.
Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p>соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Это HTML код:
Это CSS код:
Так код будет выглядеть в браузере:
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
Так код будет выглядеть в браузере:
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.
В CSS существуют следующие виды селекторов:
Вы можете выбирать элементы на странице для оформления по названию тэга.
P
{
color:green;
}
h2
{
color:red;
}
Данный вид селекторов позволяет производить более точную выборку и используется, когда необходимо выбрать только один определенный элемент на странице, с предварительно заданным идентификатором.
Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).
#test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.
С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).
.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.
Например, Вы можете комбинировать селекторы тэгов с селекторами class:
h2.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Свойства будут применены только к тем элементам с class="test1", которые являются заголовками.
Также Вы можете комбинировать селекторы тэгов:
div p
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Свойства будут применены только к тем элементам p, которые находятся внутри элементов div
Символ "+" позволяет выбирать элементы, которые идут сразу после указанного.
div+p
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Свойства будут применены только к тем элементам p, которые идут сразу после элементов div
Следующие задания предлагаю выполнить самостоятельно
Оформите элементы согласно их описанию.
<h3>Покрасьте меня в розовый цвет (color:pink).</h3>
<p>Данный элемент должен остаться неоформленным.</p>
p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>
<div>Данный элемент должен остаться неоформленным.</div>
<div><p>Покрасьте меня в красный цвет (color:red).</p></div>
<h4>Данный элемент должен остаться неоформленным.</h4>
<p>Покрасьте меня в зеленый цвет (color:green).</p>
<p class='yellowcol'>Покрасьте меня в желтый цвет (color:yellow).</p>