Как в html задать фон: Как сделать фон в html и css. Описание всех возможностей


26.07.2018 Facebook Twitter LinkedIn Google+ Разное


Содержание

Как изменить цвет фона в html

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

<body bgcolor="blue">

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

<body>

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

<body bgcolor="#0000FF">

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет ключевое слово шестнадцатеричное обозначение
оранжевый orange#ffa500
синий blue#0000ff
белый white#ffffff
желтый yellow#ffff00
серый gray#808080
коричневый brown#a52a2a
черный black#000000
красный red#ff0000
зеленый green#008000
фиолетовый violet#ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

<td bgcolor="#ffffff">#ffffff</td>

Количество доступных цветов зависит от видеокарты.  Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).

HTML. Фон страницы

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

Тэг, который позволяет изменить фон вам уже знаком, - это тэг <BODY>. А с его атрибутами сейчас познакомимся.

Чтобы залить фон цветом

Для заливки фона у тэга BODY

есть атрибут BGCOLOR.

Для примера возьмем следующую практическую

 <HTML>
<HEAD>
<TITLE>
Виды облаков
</TITLE>
</HEAD>
<BODY>
<h2 ALIGN="CENTER">
Виды облаков
</h2>
<P ALIGN="JUSTIFY">
<B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров.
Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев, разделенных  просветами голубого неба, но могут сливаться и в сплошной покров.
Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь, снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель, редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные.
Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>

Результат:

Для того чтобы залить фон голубым фоном в тэге BODY нужно указать атрибут BGCOLOR.

И укажем, что мы хотели бы видеть текст белого цвета.

Это можно указать с помощью тэга <FONT COLOR=”FFFFFF”>. Но если нужно указать, чтобы текст всей страницы был одного цвета, это можно указать в тэге BODY

В результате получим код

 <HTML>
<HEAD>
<TITLE>
Виды облаков
</TITLE>
</HEAD>
<BODY BGCOLOR="#3399FF" TEXT="#FFFFFF">
<h2 ALIGN="CENTER">
Виды облаков
</h2>
<P ALIGN="JUSTIFY">
<B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров.
Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок. 
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных  просветами голубого неба,но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км.
</P>
<P ALIGN="JUSTIFY">
<B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров.
Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>

А в браузере увидим:

Чтобы установить фоновое изображение

При желании фон можно залить изображением. Для этого в папке сайта создаем папку images, в которую сохраним изображение фона fon. jpg. А для заливки воспользуемся атрибутом

BACKGRAUND тэга BODY .

Это будет выглядеть так:

 <HTML>
<HEAD>
<TITLE>
Виды облаков
</TITLE>
</HEAD>
<BODY BACKGROUND="images/fon.jpg">
<h2 ALIGN="CENTER">
Виды облаков
</h2>
<P ALIGN="JUSTIFY">
<B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров.
Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные.
</P>
<P ALIGN="JUSTIFY">
<B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров.
</P>
<P ALIGN="JUSTIFY">
<B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных  просветами голубого неба,но могут сливаться и в сплошной покров.
Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные.
Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>

Результат:

на весь экран в блокноте

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

Я также расскажу о некоторых нюансах, которые позволят сделать фон наиболее ровным и красивым. Ну что ж, начнем?

Выбор картинки

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

К сожалению, растянуть изображение в html на весь экран невозможно. Фото используется в натуральную величину. Если картинка маленькая, то она замостит всю площадь, как на скриншоте внизу. Чтобы растянуть картинку придется создать дополнительный css документ, без этого не получится.

Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и измените размер картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.

Намного лучшим вариантом, если вы не хотите использовать css, будет использование бесшовных текстур. У них никаких стыков не видно. Они, как обои или современная плитка в дизайне. Один сменяет другой и никаких стыков не видно.

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

Html

Теперь давайте поработаем с кодом. Должен отметить сразу, что сейчас мы работаем с html, то есть меняем изображение не для всего сайта, а только одной конкретной страницы, для которой пишется код. Если вас интересуют изменения всего ресурса, то вам нужно создавать код с помощью css, но об этом чуть позже.

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

Итак, в тег body вам необходимо добавить атрибут background и указать ссылку на изображение, откуда будет взята картинка. Вот как это выглядит в программе.

Можете просто открыть блокнот и скопировать вот этот код. В кавычках поставьте ссылку на ту картинку, которая вам нравится.

<html>
<head>
<title>Background-image</title>
</head>
<body background="https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png">
</body>
</html>

<html> <head> <title>Background-image</title> </head> <body background="https://pixabay. com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </body> </html>

Хотелось бы отметить для новичков, вот какой момент. Если вы берете изображение с pixabay, то ссылку вставлять нужно не на страницу с картинкой, а открыть рисунок в соседней вкладке.

Копируйте именно этот URL.

Сохраните документ. Не забывайте, что если вы используете блокнот, то нужно использовать расширение .html. Просто назовите документ, к примеру, back.html. В противном случае он сохраниться как текстовый документ и браузер просто не поймет, что ему нужно делать.

Далее откройте файл с помощью Google Chrome или любого другого браузера.

Готово, страница залита другим цветом.

Если вы хотите узнать больше о html, я советую вам скачать бесплатный курс Евгения Попова. Из него вы узнаете больше тегов, возможностей языка, попробуете кое-какие новые приемы и будете больше знать.

Не скажу, что курсы Евгения Попова пользуются бешеной популярностью. Многие специалисты ругают его и если вы натыкались на подобные высказывания, то вот вам мое мнение. Эти уроки предоставляются бесплатно и несмотря на это они замечательно справляются со своей основной задачей – показать новичку основы, ввести его в курс дела.

Как у каждого писателя свой взгляд на то, как нужно писать, так и программисты имеют свой почерк. Учиться создавать сайты можно всю жизнь, но начинать с чего-то нужно. С книг? Только не это. Да, в них больше достоверных сведений, актуальной информации, но их так сложно осилить.

Не согласны со мной? Могу предложить альтернативу. Книга Элизабет и Эрика Фримен «Изучаем HTML, XHTML и CSS». Не очень скучный бестселлер и выпустился не так давно, в 2016 году. Информация устареть еще не успела.

CSS

Если вам нужно, чтобы фон повторялся на всех страницах вашего сайта, то без CSS не обойтись. Конечно, можно каждый раз прописывать путь, как в предыдущей главе. Но представьте, если со временем вам будет нужно его заменить: ссылка устареет или просто захочется поменять дизайн. Заходить на каждую страничку и менять код? Так не пойдет.

CSS по

Установка бесшовного фона в HTML.

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

Также покажу отличный зарубежный сервис по подбору бесшовных фонов.
Сейчас настройки сайта делаются легче и удобнее через CMS консоли, таких как WordPress.
Бывает необходимо менять шаблоны продающих сайтов, в этом и поможет данная статья.

 

Установка фона в HTML.

Если вы не знаете, что такое ХТМЛ, то это обобщенно можно назвать языком сайтов или набором правил по которым генерируются сайты.

Например вы видите картинку на сайте, когда в HTML коде страницы это может выглядеть так:

[colorbl style=»green-bl»][/colorbl]

Установка сплошного цвета на фон страницы.

Для того, чтобы установить фон в виде сплошного цвета, нужно в тег <body> добавить атрибут bgcolor.

Пример:

[colorbl style=»green-bl»]

<html>
<head>
<title>Заголовок страницы.</title>
</head>
<body bgcolor="#ffcc00">Привет. Этом моя первая страница.</body>
</html>[/colorbl]

Вы можете данный код вставить в текстовый файл и сохранить с расширением .html. Далее открыть любым браузером и увидите результат.

Как вы наверное догадались, цвет фона появляется за счет кода цвета в атрибуте bgcolor= «значение» , который можно подобрать перейдя по этой ссылке.

 

Установка картинки на фон HTML страницы.

Для того, чтобы установить на фон изображение, можно использовать атрибут background в теге <body>.

Пример:

[colorbl style=»green-bl»]

<html>
<head>
<title>Заголовок страницы.</title>
</head>
<body background"https://metamlm.ru/images/mlmsecret.jpg" >Привет. Этом моя первая страница.</body>
</html>[/colorbl]

Вы можете заметить, что атрибут background равен пути файла, который используется в качестве фона.

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

Чтобы узнать прежний путь, необходимо на странице с картинкой, нажать по картинке правой кнопкой и кликнуть по «Копировать URL картинки.»  таким образом вы увидите название картинки/фона.  Затем вы можете просто заменить прежнюю картинку своей, используя то же название файла.

Это были простейшие основы по настройке фона в html, теперь самое интересное. 🙂

 

Сервис бесшовных фонов для сайтов.

Хочу показать свою находку.
Это сервис с качественными бесшовными фонами на любой вкус — Subtle Patterns.
Я на своем сайте использую фон взятый из этого сервиса.
Слева от каждого фона есть кнопка Download.

 

Думаю эта информация для вас оказалась полезной!
В знак благодарности жмите кнопки социальных сетей.
Желаю всем классных фонов и до новых статей! 🙂

HTML тег изменения цвета заднего фона текста: атрибут style background-color

 

Приветствую вас на «Планете Успеха»! На этом занятии вы узнаете как в своих статьях на блоге изменить цвет заднего фона части текста в абзаце, цитате, таблице, или в любом другом необходимом вам месте публикации.

Предыдущие занятия по ручной html верстке текста:

  1. Текстовый html редактор notepad++ Html теги для текста в один клик
  2. HTML теги пробела и красной строки для текста
  3. HTML теги таблицы: td, tr, table, для текста
  4. HTML теги для текста: жирный шрифт, курсивный шрифт и подчеркивание текста
  5. HTML тег изменения цвета текста: атрибут style

Тег html изменения цвета заднего фона текста через атрибут style background-color

Html атрибут style background-color может применяться в любых html тегах, связанных с версткой текста: абзацах <p>; цитатах <blockquote>; таблицах <table> и их составляющих <tr> и <td>.

Изменение цвета заднего фона текста абзаца <p>

В открытый тег абзаца <p> будем вставлять атрибут style background-color и html код самого цвета заднего фона, который нам нужен #00FFFF (я выбрал Aqua). Для этого заходим на сайт ColorScheme. Ru и копируем код необходимого цвета:

Теперь собираем атрибут изменения цвета заднего фона текста и вставляем в открытый тег абзаца:

<p> (кавычки должны быть именно такого вида — " ", иначе цвет не поменяется)

Верстаем сам абзац:

<p> В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.</p>

Смотрим как будет выглядеть на блоге:

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

Изменение цвета заднего фона текста цитаты <blockquote>

Верстаем цитату с изменением цвета заднего фона:

<blockquote>Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.</blockquote>

На сайте цитата будет выглядеть:

Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.

Изменение цвета заднего фона текста таблицы <table>

Верстаем таблицу с изменением цвета заднего фона текста всей таблицы:

<table><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr><td>ячейка 4</td>

<td>ячейка 5</td>

 

<td>ячейка 6</td></tr>

<tr><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

На блоге получаем таблицу в таком виде:

ячейка 1 ячейка 2 ячейка 3
ячейка 4 ячейка 5 ячейка 6
ячейка 7 ячейка 8 ячейка 9

Теперь изменим цвет заднего фона текста построчно:

<table><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr>

<tr><td>ячейка 4</td>

<td>ячейка 5</td>

<td>ячейка 6</td></tr>

<tr><td>ячейка 7</td>

<td>ячейка 8</td>

<td>ячейка 9</td></tr></table>

И на сайте увидим такую таблицу:

ячейка 1 ячейка 2 ячейка 3
ячейка 4 ячейка 5 ячейка 6
ячейка 7 ячейка 8 ячейка 9

В каждой ячейке таблицы, также можно изменить цвет заднего фона текста:

<table><tr><td>ячейка 1</td>

<td>ячейка 2</td>

<td>ячейка 3</td></tr></table>

На блоге увидим в таком варианте:

ячейка 1 ячейка 2 ячейка 3

По такому же принципу меняется цвет заднего фона текста в открытых тегах заголовков, жирного, курсивного или подчеркнутого шрифта.

Применяйте на своих сайтах атрибут style background-color для изменения цвета заднего фона текста в своих публикациях, там, где это действительно необходимо.

Успехов вам и до новых встреч!

Поделиться ссылкой:

Как установить цвет страницы HTML

Для того, чтобы изменить цветовой фон страницы применяется тег bgcolor="#цвет". Вместо слова цвет вставляются цвета HTML модели RGB, из 3 основных цветов - красный, зеленый, синий. Каждый цвет состоит из 2 знаков от 0 до 9или букв от A до F.

    Пример записи черного цвета - "#000000",
белого - "#FFFFFF",
красного - "#FF0000",
зеленого - "#33CC00",
желтого - "#FFFF00".

Что бы установить цвет фона всей страницы пишем : <body bgcolor="#??????"> (порядок: красный/ зеленый/ синий). Тег bgcolor также вставляется в тот тег, который вы хотите изменить. Например
<tr bgcolor="#0000FF"> или <td bgcolor="#58F786">.

Можно сделать фоном картинку или фото <body background="?"> Чтобы изменить цвет текста на всей странице применяется параметр - text. Его надо вставить в тег<body text="#FF0000">. Если вам надо изменить цвет определенного участка текста надо применить тег <font> </font>. Запись этого будет такая<font color="#FF0000"> текст </font>.

Если вы хотите изменить цвет гиперссылок, то этот параметр записывается так:
<body link="#FF0000">.Также вы можете задать цвет активной ссылки <body alink="#цвет"> и пройденной ссылки <body vlink="#цвет">

Таблица основных цветов в HTML

Имя
Значение
Цвет
aliceblue#F0F8FF&nbsp
antiquewhite#FAEBD7&nbsp
aquamarine#7FFFD4&nbsp
azure#F0FFFF&nbsp
beige#F5F5DC&nbsp
bisque#FFE4C4&nbsp
black#000000&nbsp
blanchedalmond#FFEBCD&nbsp
blue#0000FF&nbsp
blueviolet#8A2BE2&nbsp
brown#A52A2A&nbsp
burlywood#DEB887&nbsp
cadetblue#5F9EA0&nbsp
chartreuse#7FFF00&nbsp
chocolate#D2691E&nbsp
coral#FF7F50&nbsp
cornflowerblue#6495ED&nbsp
cornsilk#FFF8DC&nbsp
crimson#DC143C&nbsp
cyan#00FFFF&nbsp
darkblue#00008B&nbsp
darkcyan#008B8B&nbsp
darkgoldenrod#B8860B&nbsp
darkgray#A9A9A9&nbsp
darkgreen#006400&nbsp
darkkhaki#BDB76B&nbsp
darkmagenta#8B008B&nbsp
darkolivegreen#556B2F&nbsp
darkorange#FF8C00&nbsp
darkorchid#9932CC&nbsp
darkred#8B0000&nbsp
darksalmon#E9967A&nbsp
darkseagreen#8FBC8F&nbsp
darkslateblue#483D8B&nbsp
darkslategray#2F4F4F&nbsp
darkturquoise#00CED1&nbsp
darkviolet#9400D3&nbsp
deeppink#FF1493&nbsp
deepskyblue#00BFFF&nbsp
dimgray#696969&nbsp
dodgerblue#1E90FF&nbsp
firebrick#B22222&nbsp
floralwhite#FFFAF0&nbsp
forestgreen#228B22&nbsp
fuchsia#FF00FF&nbsp
gainsboro#DCDCDC&nbsp
ghostwhite#F8F8FF&nbsp
gold#FFD700&nbsp
goldenrod#DAA520&nbsp
gray#808080&nbsp
green#008000&nbsp
greenyellow#ADFF2F&nbsp
honeydew#F0FFF0&nbsp
hotpink#FF69B4&nbsp
indianred#CD5C5C&nbsp
indigo#4B0082&nbsp
ivory#FFFFF0&nbsp
khaki#F0E68C&nbsp
lavender#E6E6FA&nbsp
lavenderblush#FFF0F5&nbsp
lawngreen#7CFC00&nbsp
lemonchiffon#FFFACD&nbsp
lightblue#ADD8E6&nbsp
lightcoral#F08080&nbsp
lightcyan#E0FFFF&nbsp
lightgoldenrodyellow#FAFAD2&nbsp
lightgreen#90EE90&nbsp
lightgrey#D3D3D3&nbsp
lightpink#FFB6C1&nbsp
lightsalmon#FFA07A&nbsp
lightseagreen#20B2AA&nbsp
lightskyblue#87CEFA&nbsp
lightslategray#778899&nbsp
lightsteelblue#B0C4DE&nbsp
lightyellow#FFFFE0&nbsp
lime#00FF00&nbsp
limegreen#32CD32&nbsp
linen#FAF0E6&nbsp
magenta#FF00FF&nbsp
maroon#800000&nbsp
mediumaquamarine#66CDAA&nbsp
mediumblue#0000CD&nbsp
mediumorchid#BA55D3&nbsp
mediumpurple#9370DB&nbsp
mediumseagreen#3CB371&nbsp
mediumslateblue#7B68EE&nbsp
mediumspringgreen#00FA9A&nbsp
mediumturquoise#48D1CC&nbsp
mediumvioletred#C71585&nbsp
midnightblue#191970&nbsp
mintcream#F5FFFA&nbsp
mistyrose#FFE4E1&nbsp
moccasin#FFE4B5&nbsp
navajowhite#FFDEAD&nbsp
navy#000080&nbsp
oldlace#FDF5E6&nbsp
olive#808000&nbsp
olivedrab#6B8E23&nbsp
orange#FFA500&nbsp
orangered#FF4500&nbsp
orchid#DA70D6&nbsp
palegoldenrod#EEE8AA&nbsp
palegreen#98FB98&nbsp
paleturquoise#AFEEEE&nbsp
palevioletred#DB7093&nbsp
papayawhip#FFEFD5&nbsp
peachpuff#FFDAB9&nbsp
peru#CD853F&nbsp
pink#FFC0CB&nbsp
plum#DDA0DD&nbsp
powderblue#B0E0E6&nbsp
purple#800080&nbsp
red#FF0000&nbsp
rosybrown#BC8F8F&nbsp
royalblue#4169E1&nbsp
saddlebrown#8B4513&nbsp
salmon#FA8072&nbsp
sandybrown#F4A460&nbsp
seagreen#2E8B57&nbsp
seashell#FFF5EE&nbsp
sienna#A0522D&nbsp
silver#C0C0C0&nbsp
skyblue#87CEEB&nbsp
slateblue#6A5ACD&nbsp
slategray#708090&nbsp
snow#FFFAFA&nbsp
springgreen#00FF7F&nbsp
steelblue#4682B4&nbsp
tan#D2B48C&nbsp
teal#008080&nbsp
thistle#D8BFD8&nbsp
tomato#FF6347&nbsp
turquoise#40E0D0&nbsp
violet#EE82EE&nbsp
wheat#F5DEB3&nbsp
white#FFFFFF&nbsp
whitesmoke#F5F5F5&nbsp
yellow#FFFF00&nbsp
yellowgreen#9ACD32&nbsp

CSS-фонов


Свойства фона CSS используются для определения фоновых эффектов. для элементов.

В этих главах вы узнаете о следующих свойствах фона CSS:

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • фон-позиция

Цвет фона CSS

Свойство background-color определяет цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

тело {
background-color: светло-голубой;
}

Попробуй сам "

В CSS цвет чаще всего определяется следующим образом:

  • допустимое название цвета - например, «красный»
  • шестнадцатеричное значение, например "# ff0000"
  • значение RGB - например, «rgb (255,0,0)»

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


Прочие элементы

Вы можете установить цвет фона для любых HTML-элементов:

Пример

Здесь элементы

,

и

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
background-color: светло-голубой;
}

p {
background-color: желтый;
}

Попробуй сам "

Непрозрачность / прозрачность

Свойство непрозрачности определяет непрозрачность / прозрачность элемента. Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

Примечание: При использовании свойства непрозрачности для добавления прозрачности фону элемента все его дочерние элементы наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.


Прозрачность с использованием RGBA

Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере устанавливается непрозрачность цвета фона, а не текста:

Из нашей главы о цветах CSS вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB, вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр - это число от 0. 0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}

Попробуй сам "

Цвет фона HTML - установка и изменение

Цвет фона HTML

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

Мы используем свойства HTML и CSS для стилизации всех этих элементов. Но даже если все элементы выглядят красиво, для страницы должен быть надлежащий фон. Это может быть изображение или просто цвет.

Для этого вам нужно указать цвет, который вы хотите использовать для тега стиля HTML. Или вы можете добавить желаемый цвет фона в таблицу стилей CSS.

В этой статье мы обсудим различные аспекты установки цвета фона веб-страницы и ее различных элементов.

Добавление цвета фона в тело страницы с помощью атрибута стиля

Вы можете установить цвет фона для тела HTML-страницы двумя способами. Вы можете использовать свойство bgcolor в теге body. Другой метод - использование атрибута style. В этом процессе используется атрибут style тега body. Этот атрибут стиля имеет свойство background-color, которое вы будете использовать для установки цвета фона веб-страницы.

Свойство bgcolor использовалось ранее, но теперь оно удалено из HTML 5.

Установка цвета фона тела с помощью свойства bgcolor (без использования CSS):

  



 Stechies.com 


Цвет фона в HTML

Примечание: свойство bgcolor удалено в HTML 5

Установка цвета фона тела с помощью свойства стиля (встроенный CSS):

  


 Цвет фона HTML 


Цвет фона HTML

Использование стиля CSS.

Выход:

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

Добавление цвета фона для элементов HTML

Теперь мы рассмотрим различные способы добавления цвета фона к элементам HTML:

Установка цвета фона на текст

Чтобы установить требуемый цвет фона для текста на странице, вы должны использовать свойство цвета.Вы можете указать желаемый цвет в

СТЕЧИ.com

Установка цвета фона для тегов ,
,

Ранее атрибут bgcolor использовался для

Добавление фонового изображения в пользовательский шаблон HTML

Прочтите эту страницу в

английский Español Français Português Deutsch

Для дальнейшего улучшения дизайна ваших маркетинговых кампаний вы можете добавить фоновое изображение в собственный шаблон Code your own в конструкторе шаблонов Mailchimp.

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

Из этой статьи вы узнаете, как добавить фоновое изображение в свой собственный HTML-шаблон.

Перед тем как начать

Перед тем, как начать этот процесс, необходимо знать следующее.

  • Фоновые изображения могут отображаться не во всех почтовых клиентах, поэтому убедитесь, что вы знаете, какие почтовые клиенты поддерживают фоновые изображения, ознакомившись с нашей статьей поддержки CSS для почтового клиента.
  • Большие изображения могут привести к неправильному отображению кампаний в почтовых ящиках получателей. Для получения наилучших результатов установите разрешение 920 x 1080 пикселей или меньше и сожмите изображение.
  • Разместите свои изображения на общедоступном сервере или воспользуйтесь бесплатным сервисом, например Imgur или Flickr, и используйте абсолютный путь к файлу, который указывает непосредственно на расположение файла в коде. Имейте в виду, что если вы размещаете свои собственные изображения на частном сервере, получатели, не имеющие доступа к серверу, не смогут увидеть изображение.
  • Mailchimp также может разместить ваши изображения для вас в Content Studio, если они меньше 10 МБ.
  • Вы также можете добавить фоновое изображение в обычную кампанию. Чтобы узнать больше, ознакомьтесь с нашей статьей «Добавление фонового изображения в кампанию».

Добавьте фоновое изображение в свой собственный HTML-шаблон

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

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

    1. Щелкните значок Кампании .
  1. Щелкните Шаблоны электронной почты .
  2. Щелкните Создать шаблон .
  3. Щелкните вкладку Кодируйте свой собственный и выберите Вставить в код .
  4. В редакторе кода вставьте следующий код сразу после открывающего тега , чтобы добавить фоновое изображение и цвет заполнителя.
      

    Этот код отображает URL-адреса изображений-заполнителей и цвета. На следующем шаге вы замените их своим изображением и информацией о цвете.

  5. Замените два URL-адреса фонового изображения-заполнителя и значения цвета фона-заполнителя в этом примере кода на выбранный вами шестнадцатеричный цветовой код и абсолютный путь к файлу для URL-адреса изображения.
  6. Вставьте следующий код непосредственно перед закрывающим тегом .

      
  7. Замените или отредактируйте оставшийся код кампании своим собственным HTML.

  8. Когда вы закончите редактировать код, нажмите Сохранить .
  9. Нажмите Сохранить и выйти из .
  10. В модальном всплывающем окне Сохранить шаблон назовите свой шаблон.
  11. Щелкните Сохранить.

Вы можете получить доступ к своему новому шаблону в конструкторе кампании или на странице Шаблоны.

Тестирование и устранение неисправностей

Прежде чем отправлять рассылку по электронной почте, тщательно просмотрите и протестируйте свой шаблон и отправьте себе несколько тестовых писем. Чтобы увидеть, как определенные почтовые клиенты будут отображать ваше фоновое изображение, используйте инструмент предварительного просмотра папки «Входящие».

Предварительный просмотр и проверка своей кампании по электронной почте
Тест с предварительным просмотром папки «Входящие»

Вот еще несколько советов по работе с фоновыми изображениями.

  • Фоновое изображение не будет отображаться, если изображения в папке входящих сообщений вашего получателя отключены. По этой причине убедитесь, что вы выбрали цвет фона, который будет правильно отображать ваш текст, если фоновое изображение не загружается.

  • При редактировании CSS убедитесь, что у вас нет других свойств фона в вашем коде, потому что они могут переопределить фоновое изображение.

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

51 CSS Background Patterns

Коллекция вручную подобранных HTML и фоновых шаблонов CSS примеров кода. Обновление коллекции за февраль 2019 г. 11 новинок.

  1. Анимированные фоны CSS
  2. Фиксированные фоны CSS
  3. CSS-фоны частиц
  4. Фон треугольников CSS
  5. Плагины фона jQuery
О коде

Текстура

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Ана Тудор
О коде

Карты с простым полосатым фоном

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Ана Тудор
О коде

Полутоновый узор на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Фланель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Беннетт Фили
О коде

Без названия

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Линн Фишер
О коде

CSS Single DIV Геометрический узор

Радужный геометрический повторяющийся фон для вашего любимого элемента HTML.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Ана Тудор
О коде

1-элементные фоновые рисунки карточек

Чистый CSS, простой и компактный метод, без SVG, без изображений, кроме градиентов CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • CodeMeNatalie
О коде

Стрелка фоновый узор

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Дизайн пользовательского интерфейса eZ
О коде

Фоновый узор

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: css-doodle.js

Автор
  • Михаэль ван ден Берг
О коде

Синие квадраты

Простая страница с градиентным фоном CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Карлита Сентено
О коде

Простые выкройки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: -

Автор
  • Ана Тудор
О коде

1-элементные фоновые рисунки карточек

Полнофункциональный, только если conic-gradient () имеет встроенную поддержку.

Совместимые браузеры: Chrome, Firefox (частично), Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Сандра Дэвис
О коде

100 шаблонов CSS

Коллекция из 100 фоновых узоров на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Фоновые узоры

Сетка, гибкость и фоновые узоры.

Демонстрационное изображение: CSS Fruit Background - Pineapple

CSS Fruit Background - Pineapple

Сделано Анжелой Веласкес
18 апреля 2017 г.

Автор
  • Крис Джонсон
О коде

SVG и CSS Волнистый узор

Аккуратный небольшой волновой узор с SVG и CSS.

Демонстрационное изображение: точечный узор CSS / фон сетки

Точечный узор CSS / фон сетки

Простая техника создания точечного рисунка или фона точечной сетки.Поддержка: все современные браузеры и IE9 +.
Сделано Эдмундо Сантосом
2 ноября 2016 г.

Демонстрационное изображение: CSS3 Gradient Pattern

CSS3 Gradient Pattern

Автор fox_hover
6 сентября 2016 г.

Демо-изображение: Подводный шаблон CSS

Подводный шаблон CSS

Сделано Лаурой Сейдж
12 августа 2016

Автор
  • амперсанд_xyz
О коде

Шаблон решетки CSS

Фон решетки на чистом CSS.

Сделано с
  • HTML (мопс) / CSS (SCSS) / JavaScript
О коде

CSS-фоны

Игра с градиентами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Демонстрационное изображение: CSS Background Patterns - Boxes

CSS Background Patterns - Boxes

Сделано Praveen Puglia
23 мая 2016 г.

Демо-изображение: Выкройка рубашки с 6 ступенями

Выкройка с 6 ступенями

Сделано Аной Тудор
18 мая 2016 г.

Автор
  • Марка Deutsch
О коде

Рисунок плетения корзины

CSS шаблон: плетение корзины.

Демо-изображение: Simple Pattern

Simple Pattern

Сделано Габриэлем R
27 октября 2015 г.

Автор
  • Правин Апулия
О коде

Шаблон CSS

CSS современный образец кирпича.

Демонстрационное изображение: Серебряный узор

Серебряный узор

Производитель yoksel
17 октября 2015 г.

Демо-изображение: Образец кругов

Образец кругов

Производитель yoksel
17 октября 2015 г.

Демо-изображение: Волновой узор

Волновой узор

Производитель yoksel
17 октября 2015 г.

Демо-изображение: Образец капель

Образец капель

Производитель yoksel
17 октября 2015 г.

Демо-изображение: Образец сердечек

Образец сердец

Производитель yoksel
17 октября 2015 г.

Демо-изображение: узор из кругов и точек

Узор из кругов и точек

Производитель yoksel
17 октября 2015 г.

Демонстрационное изображение: Шаблон углов

Шаблон углов

Производитель yoksel
17 октября 2015 г.

Демонстрационное изображение: Узор из квадратов

Узор из квадратов

Производитель yoksel
17 октября 2015 г.

Демонстрационное изображение: Шаблон углов

Шаблон углов

Производитель yoksel
17 октября 2015 г.

Демо-изображение: Argyle Pattern

Argyle Pattern

Попытка создать узор «аргайл» с использованием нескольких фонов CSS (linear-gradient).
Сделано Carpe Numidium
1 октября 2015 г.

Демо-изображение: Шаблон Jason Quote Bg

Шаблон Jason Quote Bg

Сделано Джорджем Олару
25 августа 2015 г.

Автор
  • Кэти ДеКора
О коде

Выкройка платка

Выкройка платка CSS.

Автор
  • Амелия Беллами-Ройдс
О коде

Узор из шестиугольников

Анимированные неоновые шестиугольники с SVG и CSS.

Демонстрационное изображение: CSS Pattern

CSS Pattern

Сделано И Венн Сох
2 ноября 2014 г.

Автор
  • Джино Фариас
О коде

Шаблон CSS3

Простой шаблон в HTML и CSS.

Демонстрационное изображение: шаблон CSS с режимом наложения CSS

Шаблон CSS с режимом наложения CSS

Сделано marinda
23 июня 2014 г.

Демонстрационное изображение: полосатый фон

Полосатый фон

Производитель yoksel
12 июня 2014 г.

Демонстрационное изображение: Узор «Морозные спирали»

Узор «Морозные спирали»

Производитель yoksel
11 февраля 2014 г.

Демонстрационное изображение: CSS Pattern

CSS Pattern

Только

CSS.Слишком сложно использовать в реальном коде.
Производитель yoksel
10 февраля 2014 г.

Демонстрационное изображение: Выкройка скатерти

Выкройка скатерти

Производитель yoksel
6 февраля 2014 г.

Демо-изображение: узор с бриллиантами

узор с бриллиантами

Производитель yoksel
6 февраля 2014 г.

Демонстрационное изображение: диагональные полосы

Диагональные полосы

Производитель yoksel
6 февраля 2014 г.

Автор
  • Хорхе Эпунья
О коде

Простой узор

Градиенты, формы, rgba...

Демо-изображение: несколько градиентов для необычных узоров

Несколько градиентов для необычных узоров

Сделано Марком Ли
30 ноября 2013 г.

Демо-изображение: шаблон чертежа (CSS3)

шаблон чертежа (CSS3)

Шаблон чертежа на чистом CSS с использованием линейных градиентов CSS3.
Сделано Дином
23 ноября 2013 г.

Автор
  • Крис Койер
О коде

Фон треугольник

Дрянное воссоздание книжной обложки "Пламенного алфавита".

Совместимые браузеры: Chrome, Edge (частично), Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

CSS · Bootstrap

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

HTML5 doctype

Bootstrap использует определенные элементы HTML и свойства CSS, которые требуют использования типа документа HTML5.Включите его в начало всех ваших проектов.

  

  ...
  

Первый мобильный

В Bootstrap 2 мы добавили дополнительные стили, удобные для мобильных устройств, для ключевых аспектов платформы. В Bootstrap 3 мы с самого начала переписали проект, чтобы он был удобен для мобильных устройств. Вместо добавления необязательных мобильных стилей они встроены прямо в ядро. Фактически, Bootstrap сначала является мобильным . Стили Mobile first можно найти во всей библиотеке, а не в отдельных файлах.

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

    

Вы можете отключить возможности масштабирования на мобильных устройствах, добавив user-scalable = no в метатег области просмотра . Это отключает масштабирование, что означает, что пользователи могут только прокручивать, и в результате ваш сайт будет больше похож на собственное приложение.В целом, мы не рекомендуем это на всех сайтах, поэтому будьте осторожны!

    

Типографика и ссылки

Bootstrap устанавливает базовые глобальные стили отображения, оформления и ссылок. В частности, мы:

  • Установить цвет фона: #fff; на корпусе
  • Используйте атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве нашей типографской базы
  • Установите глобальный цвет ссылки через @ link-color и примените подчеркивание ссылок только на : hover

Эти стили можно найти в строительных лесах .менее .

Normalize.css

Для улучшенного кроссбраузерного рендеринга мы используем Normalize.css, проект Николаса Галлахера и Джонатана Нила.

Контейнеры

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

Используйте .container для адаптивного контейнера фиксированной ширины.

  
...

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

  
...

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

Введение

Системы

Grid используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает сетка Bootstrap:

  • Строки должны быть размещены в контейнере .container (фиксированной ширины) или .container-fluid (во всю ширину) для надлежащего выравнивания и заполнения.
  • Используйте строки для создания горизонтальных групп столбцов.
  • Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. Меньше миксинов также можно использовать для более семантических макетов.
  • Столбцы создают промежутки (промежутки между содержимым столбца) посредством заполнения . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
  • Отрицательная маржа - вот почему приведенные ниже примеры неактуальны. Это значит, что содержимое столбцов сетки совмещается с содержимым вне сетки.
  • Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4 .
  • Если более 12 столбцов помещаются в одну строку, каждая группа дополнительных столбцов будет как одно целое переноситься на новую строку.
  • Классы сетки применяются к устройствам с шириной экрана, большей или равной размерам точки останова, и переопределяют классы сетки, нацеленные на устройства меньшего размера. Следовательно, e.г. Применение любого класса .col-md- * к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .col-lg- * отсутствует.

Посмотрите на примеры применения этих принципов к вашему коду.

Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек останова в нашей сеточной системе.

  / * Очень маленькие устройства (телефоны, менее 768 пикселей) * /
/ * Нет медиа-запроса, так как это значение по умолчанию в Bootstrap * /

/ * Маленькие устройства (планшеты, 768 пикселей и выше) * /
@media (min-width: @ screen-sm-min) {...}

/ * Средние устройства (настольные компьютеры, 992 пикселей и выше) * /
@media (min-width: @ screen-md-min) {...}

/ * Большие устройства (большие рабочие столы, 1200 пикселей и выше) * /
@media (min-width: @ screen-lg-min) {...}  

Мы иногда расширяем эти медиа-запросы, добавляя max-width , чтобы ограничить CSS для более узкого набора устройств.

  @media (max-width: @ screen-xs-max) {...}
@media (min-width: @ screen-sm-min) и (max-width: @ screen-sm-max) {...}
@media (min-width: @ screen-md-min) и (max-width: @ screen-md-max) {...}
@media (min-width: @ screen-lg-min) {...}  

Параметры сетки

Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах, с помощью удобной таблицы.

Очень маленькие устройства Телефоны (<768 пикселей) Маленькие устройства Таблетки (≥768 пикселей) Средние устройства Настольные компьютеры (≥992px) Большие устройства Настольные компьютеры (≥1200 пикселей)
Поведение сети Всегда горизонтально Свернут, чтобы начать, горизонтально над контрольными точками
Ширина контейнера Нет (авто) 750px 970px 1170px
Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
Кол-во столбцов 12
Ширина колонны Авто ~ 62 пикс. ~ 81 пикс. ~ 97 пикселей
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Нестабильный Есть
Смещения Есть
Заказ колонки Есть

Пример: с накоплением по горизонтали

Используя один набор .col-md- * , вы можете создать базовую сеточную систему, которая начинается с накопления на мобильных устройствах и планшетных устройствах (от очень малого до небольшого диапазона), а затем становится горизонтальной на настольных (средних) устройствах. Поместите столбцы сетки в любой .row .

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

Фоны: Фоновое изображение - Учебное пособие по HTML

Если вы хотите добавить фоновое изображение вместо простого цвета, вам следует учесть некоторые соображения, прежде чем это делать:
  • Достаточно ли дискретное фоновое изображение, чтобы не убрать фокус с того, что на нем написано?
  • Будет ли фоновое изображение работать с цветами текста и цветами ссылок, которые я настроил для страницы?
  • Будет ли фоновое изображение работать с другими изображениями, которые я хочу разместить на странице?
  • Сколько времени потребуется странице для загрузки фонового изображения
    ? Он просто слишком большой?
  • Будет ли работать фоновое изображение, когда оно копируется на всю страницу? Во всех разрешениях экрана?


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

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

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


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

Comments