С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.
Примечание: Если у вас не получается, попросите о помощи — читайте раздел Помощь с кодом ниже.
В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.
Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.
Измените значения свойств CSS, чтобы поменять внешний вид биографии.
hotpink.border-bottom сделайте пунктирным (10px dotted) и добавьте цвет purple.<h2> курсив.#eeeeee для фона background-color маркированного списка с контактными данными и значение 5px solid purple для border. Используйте padding, чтобы отделить содержимое блока от границы.зелёными при наведении.У вас должно получиться примерно как-то так:
После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!
Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!
Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:
Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, Как устроен CSS, мы глубже разберёмся в некоторых аспектах языка.