Справочник css: background | htmlbook.ru

Leave a Comment / Css / By /

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.0+1.0+10.5+1.3+3.6+2.1+1.0+

Краткая информация

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/colors.html#propdef-background

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

CSS2.1
background: [background-attachment || background-color || background-image 
  || background-position || background-repeat] | inherit
CSS3
background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <div>
   Duis te feugifacilisi.
  Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

[window. ]document.getElementById(«elementID»).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Цвет и фон

border | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Учебник CSS

❮ Главная Далее ❯

Примеры в каждой главе

Это руководство по CSS содержит сотни примеров CSS.

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

Пример CSS

тело {
  фоновый цвет: голубой;
}

h2 {
  цвет: белый;
  выравнивание текста: по центру;
}

р {
семейство шрифтов: verdana;
  размер шрифта: 20 пикселей;
}

Попробуйте сами »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Примеры CSS

Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на кнопку для просмотра результата.

Перейти к примерам CSS!

Использование меню

Мы рекомендуем читать это руководство в последовательности, указанной в меню.

Если у вас большой экран, меню всегда будет слева.

Если у вас маленький экран, откройте меню, щелкнув значок меню вверху ☰.

Шаблоны CSS

Мы создали для вас несколько адаптивных шаблонов W3.CSS.

Вы можете изменять, сохранять, делиться и использовать их во всех своих проектах.

Бесплатные шаблоны CSS!

Упражнения CSS

Проверьте себя с помощью упражнений

Упражнение:

Установите красный цвет для всех элементов

.

<стиль>
 {
   красный;
}

Начать упражнение

Тест CSS

Проверьте свои навыки CSS с помощью теста.

Начать викторину CSS!

Мое обучение

Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.

Войдите в свою учетную запись и начните зарабатывать баллы!

Это дополнительная функция. Вы можете учиться в W3Schools без использования My Learning.


Справочник по CSS

В W3Schools вы найдете полные справочники по CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.

CSS Properties

CSS Selectors

CSS Browser Support

CSS Functions

CSS Animatable

CSS Aural

CSS Web Safe Fonts

CSS Units

Px to Em Conversion

CSS Colors

CSS Default Values

CSS Entities


Начните свою карьеру

Получите сертификат, пройдя курс

Получите сертификат

w3schoolsCERTIFIED.2022

❮ Главная Далее ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003 135 Основные ссылки HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


3 Top6s Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Введение в CSS

❮ Предыдущий Далее ❯

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

Что такое CSS?

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

Демонстрация CSS — одна HTML-страница — несколько стилей!

Здесь мы покажем одну HTML-страницу, отображаемую с четырьмя разными таблицами стилей. Нажмите «Таблица стилей 1», «Таблица стилей 2», «Таблица стилей 3», «Таблица стилей 4». ссылки ниже, чтобы увидеть различные стили:

Зачем использовать CSS?

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

Пример CSS

тело {
  фоновый цвет: голубой;
}

h2 {
  цвет: белый;
  выравнивание текста: по центру;
}

р {
семейство шрифтов: verdana;
  размер шрифта: 20 пикселей;
}

Попробуйте сами »

CSS решил большую проблему

HTML НИКОГДА не предназначался для содержания тегов для форматирования веб-страницы!

HTML был создан для описания содержимого веб-страницы, например:

Это заголовок

Это абзац.

Когда в HTML 3.2 были добавлены такие теги, как и атрибуты цвета. спецификация, это стало кошмаром для веб-разработчиков. Развитие крупных веб-сайты, где информация о шрифтах и ​​цветах добавлялась к каждому отдельному страницы, стал долгим и дорогостоящим процессом.

Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.

CSS удалил форматирование стилей со страницы HTML!

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

CSS экономит много работы!

Определения стилей обычно сохраняются во внешних файлах .css.

С помощью внешнего файла таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
63 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *