Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- Две одинаковые ошибки в CSS коде, найди их
- Первая ошибка найдена
- Вторая ошибка найдена
В предыдущем уроке мы слишком кратко познакомились с селектора в CSS. Начиная с этого урока начнем разбираться с ними более детально.
Наличие селекторов – это преимущество CSS. Например, если бы не было CSS и вам нужно было бы поменять цвет абзаца, вы бы писали так:
<p><font color = "#FF0000">Красный абзац</font></p>Что если на веб-странице сотня абзацев и каждый красного цвета. Вам вдруг понадобилось заменить цвета всех абзацев на зеленый. Рутина. Вам придется исправлять каждый тег.
Благодаря языку CSS вы можете создавать правила для определенной группы элементов. Теперь приведу пример. Изменим цвет всех абзацев на красный.
<p>Красный абзац, благодаря CSS</p>p {
color: red;
}Что такое правило в CSS. Структура правила CSS
Каждое правило в CSS обязательно должно состоять из селектора и блока объявлений. В каждом блоке есть как минимум одно объявление, которое состоит из свойства и значения.
Каждое объявление заканчивается точкой с запятой. Свойство от значения отделяется двоеточием. Например:
h1 {
color: #000000; /* цвет текста */
font-size: 40px; /* размер текста */
text-align: center; /* текст по центру */
}Разберём предыдущий пример. Селектором в данном примере является тег h1 (заголовок первого уровня).
Цвет всех заголовков первого уровня будет черным:
...
color: #000000;
...Размер шрифта 40 пикселей:
...
font-size: 40px;
...Текст будет выровнен по центру.
...
text-align: center;
...В этом примере мы применили три свойства для селектора h1. В этом уроке получили базовые навыки написания CSS-правил. В следующем научимся группировать селекторы.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
