Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Для тегов
<h1>и<p>(не дописывайте новые селекторы, все уже есть) укажите два свойства:color: #FF0000иtext-align: center. Не забудьте точки с запятой (;) после свойств
В предыдущем уроке выяснили что такое язык CSS. В этом уроке разберемся с его основным структурным элементом - селектором.
Селектор в CSS – элемент (или группа элементов), для которого описываются стили. Например, в качестве селектора может быть имя тега. В дальнейшем мы разберём какие бывают селекторы. Рассмотрим пример:
h1 {
color: #F1F1F1;
}Селектором является имя тега h1, а color - его единственное свойство.
В общем виде это определение выглядит так:
селектор {
свойство: значение;
}Сначала указывается селектор, затем в фигурных скобках перечисляются его свойства через точку с запятой (;).
селектор_1 {
свойство_1: значение;
свойство_2: значение;
свойство_3: значение;
}
селектор_2 {
свойство_1: значение;
свойство_2: значение;
свойство_3: значение;
}Селектор может состоять из таких частей:
- Селектор тега, id-селектор или селектор класса;
- Селектор псевдокласса и (или) селектор атрибута.
Например, селектор может быть таким:
#header .block h1:hover {
color: #F1F1F1;
}Можно перечислять несколько разных селекторов и описывать для них одинаковые свойства. Проще показать на примере.
Допустимый, но избыточный способ:
h1 {
color: #000000;
}
p {
color: #000000;
}
.bold {
color: #000000;
}Более лаконичный вариант:
h1, p, .bold {
color: #000000;
}В этом уроке мы очень поверхностно прошлись по селекторам. В дальнейшем мы уделим внимание каждому.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
