Оформление тела сайта с помощью 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: CSS, CSS-practice, HTML
