Оформление тела сайта с помощью CSS

Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.

Требования

Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

На нашем тестовом сайте мы предлагаем вам использовать фоновое изображение, которое вы можете скачать по этой ссылке. Вы можете использовать другое изображение в качестве фона, но для начала убедитесь, что оно достаточно большое, чтобы заполнить экран, и не забудьте скорректировать все ссылки на это изображение в коде.

Примечание: Чтобы загрузить изображение, перейдите по указанной ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images как background-image.jpeg.

Добавление фонового изображения на сайт с помощью CSS

Чтобы объявить правила стиля для тела веб-страницы, вам необходимо создать правило CSS для тега body. Эти правила будут применяться ко всем элементам внутри тегов <html>, которые вы добавили в файл index.html в предыдущем мануале, Создание сайта на CSS и HTML: подготовка домашней страницы.

Чтобы добавить на свой сайт фоновое изображение, создайте CSS-правило с помощью селектора тега <body>. Сотрите все в файле styles.css (если вы следовали этой серии статей) и добавьте следующий набор правил:

/* General Website Style rules */

body {

  font-family: "Helvetica", Sans-Serif;

  background-image: url("../images/background-image.jpeg");

}

Обратите внимание на выделенный путь к файлу, который сообщает браузеру, где найти фоновое изображение. Если вы изменили имя или расположение этого файла, вам нужно будет соответствующим образом откорректировать этот путь.

Давайте подробно рассмотрим каждое из объявлений в этом наборе правил:

  • /* General Website Style rules */ — это комментарий CSS, который не отображается браузером. Как и HTML-комментарии, CSS-комментарии нужны для объяснения и организации вашего кода. Обратите внимание, что комментарии CSS открываются и закрываются тегами /* и */, а не <!— и —>, как в HTML.
  • Объявление font-family: «Helvetica», Sans-Serif; устанавливает семейство шрифтов (Helvetica) и общее семейство шрифтов (Sans-Serif) для всего текста на веб-странице. Обратите внимание: вы можете настроить разные семейства шрифтов на одной и той же веб-странице, добавив другие правила CSS. Общее семейство шрифтов – это запасное семейство, оно используется, если первое семейство шрифтов недоступно и браузеру необходимо найти резервный шрифт. Вы можете попробовать другие шрифты, заменив Helvetica другими названиями шрифтов (например, Times, Courier или Palatino).
  • Объявление background-image: url(«../images/background-image.jpeg;») добавит фоновое изображение, используя для этого найденный по указанному пути файл. Обратите внимание: в путь к файлу мы добавили ../, чтобы браузер мог найти папку images в каталоге, который в файловой системе находится над каталогом, содержащим файл styles.css.

Сохраните styles.css и загрузите страницу index.html в браузере.

Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему мануалу Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).

Вы должны получить пустую страницу – на ней не будет ничего, кроме фонового изображения

Если изображение не добавилось на страницу, убедитесь, что указали правильный путь к файлу и что в файлах index.html и styles.css нет ошибок.

Изменение цвета текста с гиперссылкой

Давайте теперь добавим CSS-правило, которое изменит цвет всего текста с гиперссылками на цвет, который лучше подходит цветовой палитре нашего веб-сайта.

В конец файла styles.css добавьте следующий набор правил:

a {

  color: #112d4e;

}

 Этот набор правил применит цветовой код HTML #112d4e к любому тексту, помеченному тегом <a>. Этот стиль не будет отображаться на вашей странице до тех пор, пока вы не добавите элементы <a> в файл index.html. Вы можете изменить цвет ссылок, если хотите – просто укажите код другого цвета в этом правиле.

Заключение

Теперь у вас есть пустая веб-страница с большим фоновым изображением. Кроме того, вы объявили семейство шрифтов, которое будет применяться к вашему текстовому контенту. Использование подобных наборов правил позволяет изменять шрифт и фоновое изображение веб-страницы, создавая наборы правил для селектора тегов. Также мы создали правило стиля, определяющее цвет любого текста с гиперссылками.

Tags: , ,

Добавить комментарий