Селекторы (базовые) онлайн урок.



Рассмотрим подробнее вопрос о селекторах.

Селектор (от англ. select - выбирать) - некоторое "название" набора стилевых правил. Фактически по селектору будут подобраны элементы на веб-странице, к которым необходимо применить правила. Селекторы могут иметь простую форму, либо более сложную. В этом уроке рассмотрим простые селекторы.

В случае простой формы селектора, он может принимать следующие значения:

1) Любой элемент на странице (универсальный селектор) - символ *. Стилевые правила будут применены ко всем элементам на веб-странице. Например,


* {
font-family: Arial;
}


2) Название тега написанное явно. Стилевые правила будут применены ко всем элементам указанного имени. Это было использовано в предыдущих занятиях.

3) Наименование класса элементов - с точкой между названием тега и наименованием класса, либо просто с точкой перед наименованием класса. Стилевые правила будут применены ко некоторой группе элементов веб-страницы - классу. Класс элемента определяется атрибутом class. Значение этого атрибута может быть произвольным, но не должно содержать пробелов и специальных символов. На веб странице может быть расположено произвольного количество тегов с одного класса. Например,

<div class='sidebar'> ... </div>
  ...  
<div class='sidebar'> ... </div>


В стилевом файле мы можем определить свойства этого класса тегов при помощи селектора

div.sidebar { 

}


или

.sidebar { 

}


div.sidebar означает, что правила будут применяться лишь к тегам <div> класса sidebar.
.sidebar это означает, что правила будут применяться к любым элементам класса sidebar.

4) Наименование идентификатора элемента - символом # между названием тега и наименованием идентификатора. Стилевые правила будут применены к ровно одному элементу, который имеет указанный идентификатор. Идентификаторы - это специальные атрибуты, которые дают возможность однозначно получить доступ к конкретному элементу на странице.

Аналогично классам, название тега можно не указывать и писать просто #header. В разметке, для того чтоб использовать этот стиль, необходим указать в теге данный идентификатор.



В этом уроке были использованы следующие стилевые свойства:

  • text-align - выравнивание содержимого элемента

  • border - настройки границы элемента: толщина границы, тип границы, цвет границы.

  • margin - внешние отступы от элемента



Проверьте свои знания
В рамках предыдущего задания, добавить в стилевой файл style.css следующие селекторы и правила: Универсальный селектор: Задать шрифт Tahoma. Селектор тега ссылок : Задать цвет ссылок как #0074A2. Селектор класса bar: Задать границу красного цвета. В документе index.html добавить контент с использованием соответствующих элементов.