Фон сайта css: background-image | htmlbook.ru

фоновых цветов и изображений

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

Цвет фона

Цвет фона можно добавить практически к любому элементу html с помощью свойства background-color , за которым следует допустимое определение цвета (см. руководство по определениям цветов CSS).

Цвета фона располагаются за любым текстом, изображениями или другим содержимым и распространяются на границы элемента, включая любые примененные отступы.

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

Фоновое изображение

Фоновое изображение можно применить с помощью свойства background-image и ссылки на путь к изображению.

По умолчанию фоновое изображение:

• Повторяется по обеим осям x и y.
• Выровнено по верхнему левому краю элемента.
• Размер соответствует фактическому масштабу файла изображения.

В приведенной выше демонстрации попробуйте заменить URL-адрес изображения другим изображением, найденным в Интернете. Обратите внимание на то, как размер изображения влияет на его поведение. Что происходит, когда вы используете очень маленькое изображение? А если очень большой?

Повтор фона

По умолчанию фоновые изображения повторяются в обоих направлениях, если они недостаточно велики, чтобы заполнить все доступное пространство. Свойство background-repeat может указать, что фоновое изображение должно повторяться только в одном или другом направлении или вообще не повторяться.

повтор-х

повтор-у

без повтора

Фоновое положение

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

Это можно изменить с помощью свойства background-position . Он будет принимать два значения: положение по оси X и положение по оси Y.

Ключевые слова

Самый простой способ указать значения для background-position — использовать доступные ключевые слова: слева , справа , сверху , снизу или по центру . Каждый ведет себя так, как вы ожидаете.

В приведенном выше примере попробуйте изменить значения свойства background-position . Что происходит, когда вы используете слева или центр для первого значения? Что происходит, когда вы используете нижние или верхние для второго значения? Что, если вы предоставите только одно значение?

Измерения

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

В приведенном выше примере попробуйте разные значения измерения для свойства background-position . Играйте с разными типами юнитов и разными числами.

Фоновое приложение

По умолчанию фоновое изображение перемещается вместе с элементом, к которому оно применяется. Если страница прокручивается и верхняя часть элемента перемещается, то же самое происходит и с верхней частью фонового изображения. Это поведение можно изменить с помощью background-attachment свойство. В сочетании со значением fixed фоновое изображение остается закрепленным на месте, когда элемент ускользает, что позволяет использовать эффекты параллакса.

Размер фона

По умолчанию фоновое изображение масштабируется в соответствии с фактическими размерами файла изображения в пикселях. Однако это можно изменить несколькими способами, используя свойство

background-size .

Ключевые слова

Существует ряд именованных ключевых слов для масштабирования фоновых изображений.

содержат

содержат Масштабирует изображение так, чтобы все изображение было видно внутри элемента.

крышка

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

Числовые измерения размера

Свойство background-size также можно использовать с любым подходящим числовым измерением размера. Значения читаются ширина затем высота .

Будьте осторожны при использовании числовых значений размера. Они могут привести к растяжению изображения при неправильном применении, как в примере ниже.

Видео урок

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

Практическое упражнение

• Инструмент фонового кодирования SVG
• Шаблоны героев | Фоны SVG
• Убрать брызги | Бесплатные стоковые изображения

Стиль полей и фона страницы в CSS

pageSUMMARY

Создайте первые два стиля CSS — стили Body и HTML. Настройте протокол изменения размера текста.

Настройка стилей Body и HTML

Чтобы подобрать цвет фона из Photoshop, при открытом многоуровневом визуальном элементе Photoshop щелкните квадрат «Установить цвет переднего плана» в нижней части палитры инструментов и щелкните серый цвет фона. Получите ссылочный номер веб-цвета в нижней части палитры цветов (в моем случае # 666666). Запишите это.

Сейчас самое время записать все другие соответствующие номера ссылок на цвета, такие как текст заголовка, текст абзаца и т. д. Также было бы полезно записать все размеры шрифта. Я считаю полезным распечатать документ Photoshop и разметить (вручную) все ссылки на цвета, размеры точек и ширину полей. Просто держите эту шпаргалку перед собой, чтобы сэкономить много времени ( рисунок 1 ).

Рис. 1. Шпаргалка руководства по стилю

Найдите панель стилей CSS

Когда перед вами будет шпаргалка, откройте палитру стилей CSS: ). Рисунок 2. Пустая палитра CSS размер ветерок позже. Это совет, который я почерпнул из книги Крейга Граннелла «9».0121 Основное руководство по веб-дизайну CSS и HTML . Существуют различные способы изменения размера текста на веб-странице — вы можете назначить что угодно, от пикселей до размеров точек, и все они будут иметь разные эффекты.

У меня есть две цели для текста на моем веб-сайте:

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

Проблема с размером в пикселях или пунктах заключается в том, что текст будет отображаться точно в требуемом размере, но (в Internet Explorer) пользователи не могут увеличивать или уменьшать размер текста, представленного таким образом, в соответствии со своим зрением.

Я хотел бы отметить как дизайн, так и юзабилити. Я нашел хороший компромисс на странице 81 книги Граннелла.

В сущности, если для «селекторов» BODY и HTML в файле CSS атрибут font-size установлен на 62,5% и 100% соответственно, становится возможным установить размеры шрифта, которые достаточно точно соответствуют размерам пунктов, используемым в графическом дизайне, используя « ems » вместо пунктов или пикселей . Например, если вы хотите, чтобы для шрифта был установлен размер 12 пунктов/пикселей, вы должны установить его как 1,2 ems в CSS. 10 пунктов становятся 1 em и так далее.

Я предоставлю книге заботу об объяснении «почему» и «почему» (ее стоит заполучить), а просто расскажу вам, как настроить селекторы.

Создать стиль HTML

Вы можете либо открыть окно стилей CSS, чтобы добавить их, либо просто вставить следующий код непосредственно в документ CSS:

html {
размер шрифта: 100%;
}

body {
семейство шрифтов: Georgia, «Times New Roman», Times, serif;
цвет фона: #666666; поле
: 0px;
размер шрифта: 62,5%;
цвет: #000;
}

Чтобы добавить стили через окно «Стили CSS», нажмите кнопку «Новое правило CSS» в нижней части палитры (это выглядит как страница с маленькими + на нем). Окно диалога откроется.

Под селектором Тип : выберите параметр « Тег
(переопределяет элемент HTML) » во всплывающем меню.

Под Имя селектора : выберите « html » в меню. Нажмите «ОК».

Откроется новое окно под названием « Определение правила CSS для html ». Единственный элемент, который мы здесь меняем, — это размер шрифта, который можно найти в категории «Тип» (которая уже выбрана в левом столбце).

В поле Размер шрифта введите 100 и выберите % в меню небольших приращений справа от поля значения.

Нажмите OK.

Как только вы это сделаете, взгляните на документ CSS, и вы увидите, что код CSS был автоматически записан в документ.

Создайте стиль BODY

Теперь повторите процесс для селектора «body» (на этот раз убедитесь, что вы выбрали « body » в меню «Имя селектора»). На этот раз, как только вы достигнете Определение правила CSS для тела ‘ window:

В категории Type выберите ‘ Georgia, «Times New Roman», Times, serif ‘ (или что вы предпочитаете) из меню Font-family , введите 62,5% в Размер шрифта и выберите черный (#000) в меню Цвет ( рисунок 3 ).

Выбор семейства шрифтов гарантирует, что шрифтом по умолчанию для всего текста, отображаемого на сайте, будет шрифт Georgia (если он доступен) или Times New Roman (если шрифт Georgia отсутствует) или Times в качестве третьего варианта, или при отсутствии всех в-третьих, любой шрифт с засечками, установленный на компьютере. Этот выбор шрифта можно переопределить, создав стили класса или назначив разные стили содержимому определенных тегов DIV.

Теперь выберите категорию фона и введите #666666 в поле Background-color . Это должен быть точно такой же цвет, который выбран из исходного фона документа Photoshop. Если это не так, фоновое изображение не будет плавно сливаться с фоном.

Затем выберите категорию ящика . Чтобы гарантировать, что фоновые изображения и элементы веб-сайта прилегают к краям и верхней части окна браузера, нам нужно «обнулить» поля. Введите 0px в поле Верх: поле и установите флажок « Одинаково для всех: ».

Нажмите OK — на этом мы закончили.

Рисунок 3

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

html {
размер шрифта: 100%;
}

body {
семейство шрифтов: Georgia, «Times New Roman», Times, serif;
цвет фона: #666666; поле
: 0px;
размер шрифта: 62,5%;
цвет: #000;
}

Это, безусловно, самый эффективный способ научиться правильно размечать документ CSS — учитесь в процессе создания. Теперь мы можем перейти к более наглядной структуре самого веб-сайта.

Стиль полей и фона страницы в CSS — конец статьи

Перейти к предыдущей статье | Перейти на главную страницу | Перейти к следующей статье

Требуется обратная связь!

Пожалуйста, присылайте любые вопросы или отзывы по адресу: feedback@using-dreamweaver.