Знакомство / Свойства и значения CSS [12/14]
×

Свойства и значения CSS [12/14]

Итак, язык CSS состоит из селекторов и свойств. Селекторы указывают на то, к каким элементам применять стили, а свойства — на то, как именно отображать элементы.

Существует огромное количество CSS-свойств, которые влияют практически на все аспекты отображения элементов. Причём каждому свойству соответствует определённый набор значений.

Некоторые значения задаются с помощью текстовых констант, например red, bold, другие с помощью цифровых значений: 12px, 120% и так далее.

Мощь стилей заключается в том, что вы можете быстро и гибко менять внешний вид нужных элементов, особенно когда используете классы. Например, чтобы зачеркнуть текст всех изученных пунктов конспекта, нужно добавить всего лишь одну строчку в CSS:

.learned-ok {
  color: green;
  text-decoration: line-through;
}

И все теги с классом .learned-ok будут отображаться с перечёркнутым текстом. Теперь представьте, как долго делать то же самое через инлайновые стили, когда в конспекте больше сотни пунктов.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Свойства и значения CSS</title> </head> <body> <h1>Конспект курса</h1> <p class="learned-ok">Парные теги.</p> <p class="learned-ok">Одиночные теги.</p> <p class="learned-ok">Атрибуты тегов.</p> <p class="learned-ok">Инлайновые (встроенные) стили.</p> <p class="learning-in-progress">Внешние стили.</p> <p class="not-learned">Стилизация по классам.</p> </body> </html>
CSS
body { font-family: Tahoma, serif; } h1 { color: #999999; } .learned-ok { color: green; } .learning-in-progress { color: orange; } .not-learned { color: red; }
HTML Academy
  1. Добавьте в правило .learned-ok свойство text-decoration со значением line-through,
  2. в правило .learning-in-progress свойство padding-left со значением 15px,
  3. в правило .not-learned свойство background-color со значением #FFF0F0.
  4. И напоследок отметьте последние два пункта конспекта как пройденные, заменив их класс на learned-ok.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.