В уроке по HTML мы описали структуру нашего сайта. Теперь мы изучим, как можно использовать CSS, чтобы менять внешний вид различных элементов.
Существуют различные способы подключения CSS к документу. Во-первых, правила CSS могут задаваться для каждого конкретного элемента посредством атрибута style. Минус такого подхода в том, что правила придётся повторно прописывать даже для тех элементов, у которых они одинаковы.
Во-вторых, таблица стилей (то есть список правил CSS) может располагаться между тегами <style>, в свою очередь располагающихся между тегами <head>. Правила этой таблицы действуют на протяжении всего документа, но в других документах таблицу будет нужно приводить повторно.
В-третьих, таблица стилей может находиться в отдельном файле с разрешением .css и подключаться к документу посредством тега <link>. Таким образом один и тот же файл может подключаться к нескольким документам. Мы будем использовать именно этот способ.
Итак, давайте создадим текстовый файл с именем style и сохраним его с разрешением .css. В файле с кодом html добавим тег <link>, ссылающийся на таблицу стилей.
Теперь вернёмся к файлу style.css. Каждое правило CSS содержит в себе селектор и блок объявлений. Селектор определяет, к какой части документа будет применяться правило, а блок объявлений состоит из списка свойств и их значений. Каждый элемент может быть селектором. Давайте изменим шрифт заголовка на Verdana. Для этого напишем следующее:
Здесь h2 - селектор, font-family - свойство, задающее семейство шрифтов, а Verdana - его значение.
С помощью селектора img добавим изображению рамку. В данном случае значения свойства border (граница) задают соответственно толщину границы, её вид (сплошная) и цвет (зелёный). Изменяя свойство border-radius мы делаем уголки рамки закругленными. Попробуйте задать другие значения этого свойства и посмотрите, что получится.
Если нам нужно применить одни и те же правила к разным элементам, можно воспользоваться селекторами класса. Присвоим списку и заголовку класс blue и сделаем их синего цвета. Обратите внимание - это второй способ задания цвета в CSS, с помощью шестнадцатеричного кода.
В обратном случае - для применения правил к одному конкретному элементу - используются селекторы идентификатора. У нас есть два элемента <div> - давайте присвоим им разные идентификаторы и для каждого зададим свой цвет фона.
Селекторы могут задаваться не только одиночными элементами, но и различными их связками. Так, селектор дочернего элемента определяет, что правила распространяются на элемент, находящийся непосредственно внутри другого, а селектор сестринских элементов - на элементы, имеющие общего родителя. Зададим с помощью селектора дочернего элемента правила для абзаца внутри div1.
Для доступа к элементам, не являющимся частью иерархии HTML-документа, служат селекторы псевдо-класса. К примеру, мы можем использовать селектор элемента, чтобы задать стиль для ссылки, но не для ссылки в момент наведения на неё курсора мыши. Это возможно с помощью селектора псевдо-класса.
Последний селектор, который мы рассмотрим - универсальный. Задаваемые им правила применяются ко всем элементам на странице.
Мы использовали универсальный селектор, чтобы применить ко всем элементам свойство color со значением #09E73. Почему цвет изменился только у второго абзаца и элементов списка? Причиной такого поведения служит принцип каскадирования. Он применяется, когда элементу оказывается поставлено в соответствие более одного правила CSS. В итоге происходит конфликт значений, для разрешения которого вводятся специальные правила приоритета. Таким образом, заданные универсальным селектором правила применились только к тем элементам, для которых нет более приоритетных правил.
