Знакомство / CSS в действии [2/14]
×

CSS в действии [2/14]

Как уже говорилось, при создании веб-страниц используются два языка: HTML и CSS. HTML отвечает за структуру и содержание, а CSS — за оформление. Браузер объединяет HTML- и CSS-код и формирует внешний вид страницы.

В прошлом задании вы изменяли код в HTML-редакторе и убедились, что при этом меняется содержание страницы.

В этом задании вы поработаете с CSS-редактором и увидите, как с помощью нескольких строк кода можно изменить оформление страницы.

Сейчас мы не будем углубляться в значение каждого CSS-свойства. А просто посмотрим на CSS в действии! Чтобы включить CSS-код, нужно будет удалить символы комментариев, которые «выключают» его.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>CSS в действии</title> </head> <body> <h1>CSS</h1> <p>CSS ещё проще, чем HTML. Он состоит из множества правил, примерно таких:</p> <pre> селектор{ свойство1: <em>значение1</em>; свойство2: <em>значение2</em>; }</pre> <p>Правила очень простые. Но есть одна проблема: свойств <em>очень</em> много.</p> <p>Большая часть курса будет посвящена именно CSS.</p> <p>А сейчас поработайте с нижним редактором.</p> </body> </html>
CSS
/* body { padding: 0 20px; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #618ad2; text-shadow: 2px 2px 0 #cccccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background: #f5f5f5; border: 1px solid #cccccc; border-radius: 3px; } em { color: #618ad2; }
HTML Academy
  1. Удалите символы /* в первой строке CSS-редактора и посмотрите, как преобразится текст страницы.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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