Как установить фоновое изображение в CSS
Создание веб-сайта – отличный способ заявить о себе. Хотя существует множество инструментов для создания веб-сайтов, написание их самостоятельно – интересный способ узнать больше о том, как веб-сайты работают за кулисами. Хороший проект для начинающих – создать веб-сайт и добавить фоновое изображение с помощью CSS. Этот проект поможет вам начать работу с HTML и CSS.
Что такое CSS?
CSS расшифровывается как Cascading Style Sheet. Это язык программирования, позволяющий стилизовать языки разметки. Одним из таких языков разметки является HTML или язык гипертекстовой разметки. HTML используется для создания веб-сайтов. Хотя вы можете управлять некоторыми стилями веб-сайта с помощью HTML, CSS предлагает гораздо больше возможностей управления и дизайна.
Создание базового веб-сайта с помощью HTML
Поскольку CSS – это просто язык стилей, для его использования нам сначала нужно что-то стилизовать. Нам будет достаточно простого веб-сайта, чтобы начать играть с CSS. Наша страница отобразит «Hello World».
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>Если вы не знакомы с HTML, давайте быстро рассмотрим, что делают все элементы. Как уже упоминалось, HTML – это язык разметки, что означает, что он использует теги для обозначения текста. Всякий раз, когда вы видите слово, заключенное в <>, это тег. Есть два типа тегов: тег, который отмечает начало раздела с помощью <>, и один, который отмечает конец раздела с помощью </>. Текст внутри раздела также предназначен для того, чтобы сделать это различие более заметным.
В нашем примере у нас четыре тега. Тег html указывает, какие элементы являются частью веб-сайта. Глава тег содержит информацию заголовка , который не отображается на странице , но необходим для создания страницы. Все отображаемые элементы находятся между тегами тела . У нас есть только один отображаемый элемент, тег p . Он сообщает веб-браузеру, что текст является абзацем.
Добавление CSS в HTML
Теперь, когда у нас есть простая страница, мы можем настроить стиль с помощью CSS. Наша страница сейчас довольно проста, и мы мало что можем сделать, но давайте начнем с выделения абзаца, чтобы мы могли отличить его от фона, добавив границу.
<html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>
Теперь наш абзац будет окружен черной рамкой. Добавление описания стиля в CSS к нашему тегу абзаца сообщило веб-сайту, как оформить абзац. Мы можем добавить больше описаний. Давайте увеличим пустое пространство или отступ вокруг нашего абзаца и отцентрируем текст.
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>
Наш веб-сайт выглядит лучше, но наш HTML начинает выглядеть беспорядочно из-за всех этих описаний в теге абзаца. Мы можем переместить эту информацию в наш заголовок. Наш заголовок предназначен для информации, которая нам нужна для правильного отображения веб-сайта.
<html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Теперь наш HTML легче читать. Вы заметите, что нам пришлось кое-что изменить. Тег стиля сообщает информацию о стиле веб-браузера, а также о том, что нужно стилизовать. В нашем примере мы использовали два разных способа указать, что нужно стилизовать. Буква p в теге стиля указывает веб-браузеру применить этот стиль ко всем тегам абзаца. В разделе #ourParagraph указывается стиль только для элементов с идентификатором ourParagraph . Обратите внимание, что информация об идентификаторе была добавлена к тегу p в нашем теле.
Импорт файла CSS на ваш сайт
Добавление информации о стиле в заголовок упрощает чтение нашего кода. Однако, если мы хотим стилизовать много разных страниц одинаково, мы должны добавить этот текст в верхнюю часть каждой страницы. Это может показаться не таким уж большим трудом, вы все-таки можете скопировать и вставить его, но это создает много работы, если вы хотите изменить элемент позже.
Вместо этого мы собираемся сохранить информацию CSS в отдельном файле и импортировать файл для стилизации страницы. Скопируйте и вставьте информацию между тегами стиля в новый файл CSS ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Затем импортируйте файл в файл HTML.
<html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Добавление фонового изображения с помощью CSS
Теперь, когда у вас есть прочная база в HTML и CSS, добавить фоновое изображение будет проще простого. Во-первых, определите, какой элемент вы хотите сделать фоновым изображением. В нашем примере мы добавим фон на всю страницу. Это означает, что мы хотим изменить стиль тела . Помните, что теги тела содержат все видимые элементы.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Чтобы изменить стиль тела в CSS, сначала используйте ключевое слово body . Затем добавьте фигурные скобки, как мы делали до {}. Вся информация о стиле тела должна быть заключена в фигурные скобки. Атрибут стиля, который мы хотим изменить, – это фоновое изображение . Есть много атрибутов стиля. Не рассчитывайте запомнить их все. Добавьте в закладки шпаргалку свойств CSS с атрибутами, которые вы хотите запомнить.
После атрибута используйте двоеточие, чтобы указать, как вы измените атрибут. Чтобы импортировать изображение, используйте url () . это означает, что вы используете ссылку, чтобы указать на изображение. Поместите расположение файла в скобки между кавычками. Наконец, завершите строку точкой с запятой. Хотя пробелы не имеют значения в CSS, используйте отступы, чтобы облегчить чтение CSS.
Наш пример выглядит так:
Если ваше изображение отображается неправильно из-за размера изображения, вы можете изменить изображение напрямую. Однако в CSS есть атрибуты стиля фона, которые можно использовать для изменения фона. Изображения, размер которых меньше размера фона, будут автоматически повторяться в фоновом режиме. Чтобы отключить это, добавьте background-repeat : no-repeat ; к вашей стихии.
Также есть два способа заставить изображение покрывать весь фон. Во-первых, вы можете установить размер фона равным размеру экрана с помощью background-size: 100% 100%; , но это приведет к растяжению изображения и может слишком сильно исказить его. Если вы не хотите, чтобы пропорции изображения менялись, вы также можете установить размер фона для покрытия . Обложка заставит фоновое изображение закрывать фон, но не искажает изображение.
Изменение цвета фона
Давайте изменим еще кое-что. Теперь, когда у нас есть фон, наш абзац трудно читать. Сделаем фон белым. Процесс похожий. Элемент, который мы хотим изменить, – это #ourParagraph. Знак # указывает, что "ourParagraph" – это имя идентификатора. Затем мы хотим установить для атрибута background-color белый цвет.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}
Намного лучше.
Продолжаем создавать свой сайт с помощью CSS
Теперь, когда вы знаете, как изменить стиль различных HTML-элементов, нет предела! Основной метод изменения атрибутов стиля такой же. Определите элемент, который вы хотите изменить, и опишите, как изменить атрибут. Лучший способ узнать больше – поиграть с разными атрибутами. Испытайте себя следующим образом: измените цвет текста.