| Kosten | Суббота, 24 Февраля 2018 | Сообщение 1 |
| В CSS вы можете многое сделать, чтобы создать фон за вашим контентом. Мы уже рассмотрели некоторые простые применения, такие как основные цвета фона и изображения, но в этой статье мы расскажем всю историю и рассмотрим некоторые дополнительные функции, такие как несколько фоновых изображений и цветовые градиенты. С помощью пользовательских стилей вы сможете добавить CSS, чтобы настроить отображение ваших блоков.
Всегда хотите добавить третий цвет или изменить количество отступов в отдельном блоке. Где не нужно исключать в еще один вариант, который становится популярным, как создание фона на градиенте, где также можно поставить красивый заголовок, но уже будет несколько оттенков, где на сайте отлично под дизайн можно настроить или взять под какой то основной элемент блока, который при заходе на сайт, то сразу бросается в глаза своей неординарностью в стилистике.
Что такое CSS?
CSS - это каскадные таблицы стилей, где код читаемый браузерами и позволяет создавать практически все, что вы видите в интернете. Он контролирует все, от размера шрифта, цветов и эффектов зависания. Без этого большая часть интернета будет выглядеть очень скучным текстовым файлом.
Как читать CSS
В отличие от многих других типов кода CSS довольно легко учиться, даже без абсолютно никакого опыта кодирования. Первым шагом является понимание трех основных компонентов CSS.
Селекторы: цель, которую вы хотите применить к стилям;
Свойства: определенный стиль, что хотите изменить, например размер шрифта или цвет;
Значения: конкретный эффект стиля, что хотите применить;
Что такое фон?
Фон элемента, это область, которая находится под содержимым элемента, также дополнением и границей. По умолчанию это так или иначе в новых браузерах вы можете изменить область, которую занимает фон, используя background-clip свойство.
Существует множество других свойств, которые вы можете использовать для управления фоном элемента. Из которых мы уже неоднократно видели в нашем курсе.
background-color: Устанавливает сплошной цвет фона;
background-image: Фоновое изображение, которое будет отображаться на фоне элемента. Это может быть статический файл или градиент;
background-position: Указывает позицию в которой фон должен появляться внутри фона элемента;
background-repeat: Указывает, должен ли фон повторяться или нет.
background-attachment: Определяет поведение фона элемента при его прокрутке содержимого;
background: Сокращение для указания пяти свойств в одной строке;
background-size: Позволяет динамически изменять фоновое изображение;
[info]Примечание: Большинство из этих функций имеют хорошую поддержку браузера, за исключением последних двух, из которых поддержка немного ограничена, это Internet Explorer 9, Safari 7, Android 4.4 и фоновые градиенты Internet Explorer 9.[/info]
Давайте рассмотрим как использовать эти функции в деталях:
Основы цвет и изображение на CSS
Давайте рассмотрим простой пример, чтобы показать как работают четыре основных свойства, где вы будете использовать фон.
Фоновый цвет:
1. Для начала цвет фона по умолчанию для большинства элементов не является white, где на установку цвет фона элемента на что-то интересное, но хотите, чтобы его дочерние элементы были белыми, вам придется установить заново.
2. Кроме того важно установить фоновый цвет как резерв. Фоновые цвета поддерживаются практически повсеместно, в то время как более экзотические функции, такие как фоновые градиенты, что поддерживаются только в новых браузерах, но по какой-то причине фоновое изображение может не загрузиться. Поэтому рекомендуется устанавливать базовый цвет фона, а также указывать такие функции, поэтому содержимое элемента читается независимым.
Начнем с простого HTML:
HTML
Код <p>ZorNet: Создание сайта на uCoz</p>
Добавим в CSS цвет фона:
Код p {
font-family: sans-serif;
padding: 20px;
/* background properties */
background-color: yellow;
}
Так получиться.
Демонстрация:
Изображение на заднем плане
Свойство background-image задает фоновое изображение для отображения на фоне элемента. Простейшее использование этого свойства включает использование url функции, которая берет путь к изображению в качестве параметра и для извлечения статического файла изображения для вставки. Давайте добавим фоновое изображение к приведенному выше примеру.
CSS
Код p {
font-family: sans-serif;
padding: 19px;
background-color: #5389fd;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/fire-ball-icon.png);
}
Результат следующий:
Демонстрация:
В настоящий момент это не выглядит великолепно, изображения по умолчанию повторяются по горизонтали и по вертикали. Мы можем исправить это использование background-repeat, которое мы рассмотрим далее.
[info]Примечание: Практически любой формат изображения, поддерживаемый поддержкой HTML изображений, также поддерживается в фоновых изображениях CSS, включая SVG.[/info]
Важно иметь в виду, что поскольку фоновые изображения устанавливаются с использованием CSS и появляются на фоне содержимого, они будут невидимы для вспомогательных технологий, таких как устройства чтения с экрана. Они не являются содержимым изображений, то они предназначены только для украшения, если вы хотите включить изображение на свою страницу, которая является частью содержимого, тогда вы должны сделать это с помощью img элемента.
Фоновая позиция:
Свойство background-position позволяет размещать фоновое изображение, где бы вы ни находились в фоновом режиме. Обычно свойство будет принимать два значения, разделенные пробелом, которые определяют горизонтальные и вертикальные координаты изображения. Верхний левый угол изображения для начало координат. Подумайте о фоне как о графике с координатой проходящей слева направо и координатой идущей сверху вниз.
Свойство background-position позволяет размещать фоновое изображение, где бы вы ни находились в фоновом режиме. Обычно свойство будет принимать два значения, разделенные пробелом, которые определяют горизонтальные и вертикальные координаты изображения. Верхний левый угол изображения для начало координат. Подумайте о фоне как о графике с координатой проходящей слева направо и координатой идущей сверху вниз.
[b]Свойство может принимать множество разных типов значений:[/b]
1.1. Абсолютные значения, например пиксели, например background-position: 200px 25px.
1.2. Например, относительные значения, например, ребра background-position: 20rem 2.5rem.
1.3. Процент - например background-position: 90% 25%.
1.4. Ключевые слова - например background-position: right center. Эти два значения являются интуитивными, и могут принимать значения left, center, rightи top, center, bottom соответственно.
Следует отметить, что вы можете смешивать и сопоставлять эти значения, например background-position: 99% center. Также обратите внимание, что если вы укажете только одно значение, это значение будет считаться горизонтальным значением, а значение по умолчанию будет по умолчанию center.
Давайте исправим наш пример:
CSS
Код p {
font-family: sans-serif;
padding: 20px;
background-color: #416ab1;
background-image: url(http://zornet.ru/Aben/ABGDA/zornet_ru/fire-ball-icon.png);
background-repeat: no-repeat;
background-position: 99% center;
color: #f7fafd;
border: 2px solid #344f82;
border-radius: 3px;
}
Результат следующий:
Демонстрация:
Как заметили, что с помощью стилей мы выставили фон, также разместили внутри его заголовок, но и безусловно вписали еще изображение. Здесь уже сам веб мастер может добавить разных элементов, чтоб украсить и сделать оригинальным.
| | Страна: (RU) |
| |
