Как изменить цвет background css

background — color

Свойство, раскрашивающее фон элемента в яркие краски!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Светлана Коробцева ,
Антон Капустинский

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи свойства background — color можно задать цвет фона элемента. Задать фоновый цвет можно любому элементу — строчному (inline), блочному (block) или строчно-блочному (inline-block).

Пример

Скопировать ссылку «Пример» Скопировано

 Розовый — цвет, образующийся.
  Жёлтый — самый лёгкий и яркий цвет.  Английское слово blue.
  p class="block">Розовый — цвет, образующийся. p> span class="inline">Жёлтый — самый лёгкий и яркий цвет. span> div class="inline-block">Английское слово blue. div>

 .block  background-color: rgb(244, 152, 173);> .inline  background-color: yellow;> .inline-block  background-color: #2E9AFF;> .block  background-color: rgb(244, 152, 173); > .inline  background-color: yellow; > .inline-block  background-color: #2E9AFF; >

В примере выше показаны блоки всех трёх типов отображения. С фоном для блочных и строчно-блочных элементов проблем не возникает, а вот со строчными элементами всё не так просто.

Если высота строки ( line — height ) у строчного элемента будет больше 1, то между строками будут пробелы.

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

Помимо этой особенности, в CSS-коде видно, что в качестве значения для background — color можно использовать любое доступное обозначение цвета в вебе.

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство background — color меняет цвет фона любого элемента.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для нужного селектора указываем свойства background — color и после двоеточия указываем цвет фона в любом доступном для веба формате.

 .element  background-color: black;> .element  background-color: black; >

 .element  background-color: #ffffff;> .element  background-color: #ffffff; >

 .element  background-color: #ffffff80;> .element  background-color: #ffffff80; >

 .element  background-color: rgb(255 255 0 / 0.5);> .element  background-color: rgb(255 255 0 / 0.5); >

Помимо цвета можно задать прозрачный фон при помощи ключевого слова transparent .

Это бывает полезно для изменения цвета при наведении курсора.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство фона не наследуется.

�� Значение по умолчанию — прозрачный фон: transparent .

�� Фон нельзя задать частично. Блок заливается указанным цветом полностью.

�� В качестве значения можно указать только один цвет.

�� Изменение цвета фона можно анимировать при помощи свойства transition ��

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если нужна красивая кнопка ( ), то не забудьте сбросить фон: укажите для неё background — color : transparent . Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых.

�� Аналогичным способом можно сделать красивые прозрачные поля ввода ( input ) в формах.

    Email:   form class="form"> label> span class="label">Email:span> input class="input" type="text" placeholder="Введите ваш email"> label> button class="button">Подписатьсяbutton> form>

 .form  /* Фон для всей формы */ background-color: #18191C;> .input  /* Прозрачное поле ввода */ background-color: transparent;> .button  /* Чёрный фон для кнопки */ background-color: #2E9AFF;> .button:hover  /* Белый фон при наведении курсора */ background-color: #FFFFFF;> .form  /* Фон для всей формы */ background-color: #18191C; > .input  /* Прозрачное поле ввода */ background-color: transparent; > .button  /* Чёрный фон для кнопки */ background-color: #2E9AFF; > .button:hover  /* Белый фон при наведении курсора */ background-color: #FFFFFF; >

�� Если вам нужен градиент, то background — color вам не подойдёт. Градиенты можно задать только при помощи background — image .

�� Если нужен блок с «рваным» краем, но без пробела между строками, то для этого есть множество трюков. Один из них:

   Чем отличается маркер от текстовыделителя?  Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе.   p> Чем отличается маркер от текстовыделителя? span class="bkg"> Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе. span> p>

 .bkg  background-color: #F498AD; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 4px 0 #F498AD;> .bkg  background-color: #F498AD; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 4px 0 #F498AD; >

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

   The best site all over the world!  header> h1>The best site all over the world!h1> header>

 header  /* Чтобы псевдоэлемент считал своё положение от этого блока */ position: relative; z-index: 0; /* Фоновое изображение на всю ширину и высоту блока */ background: url("background.png") no-repeat center / cover;> header:before  content: ""; position: absolute; z-index: -1; display: block; top: 0; left: 0; width: 100%; height: 100%; /* Оверлей поверх картинки с прозрачностью 50% */ background-color: rgba(0, 79, 130, 0.5);> header  /* Чтобы псевдоэлемент считал своё положение от этого блока */ position: relative; z-index: 0; /* Фоновое изображение на всю ширину и высоту блока */ background: url("background.png") no-repeat center / cover; > header:before  content: ""; position: absolute; z-index: -1; display: block; top: 0; left: 0; width: 100%; height: 100%; /* Оверлей поверх картинки с прозрачностью 50% */ background-color: rgba(0, 79, 130, 0.5); >

Для .header можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей ��‍♀️

Как изменить цвет фона в HTML? Примеры С#

В этой статье мы будем использовать примеры C#, чтобы показать различные способы изменения цвета фона в файлах HTML с помощью библиотеки классов Aspose.HTML.

Изменить цвет фона на веб-странице легко с помощью свойства CSS background-color. Есть несколько способов установить значение этого свойства. Вы можете использовать встроенный, внутренний или внешний CSS, а значения цвета HTML могут быть указаны как стандартные имена цветов или со значениями HEX, RGB, RGBA, HSL и HSLA. В приведенных ниже примерах мы будем использовать цветовые коды HEX и RGB, поскольку они используются чаще всего.

Дополнительные сведения об использовании цветовых кодов HTML вы найдете в статье Цветовые коды HTML. В разделе Background Color вы найдете примеры кода HTML о том, как изменить цвет фона.

Изменить цвет фона определенного элемента

Чтобы изменить цвет фона для HTML-элемента с помощью Aspose.HTML API, выполните несколько шагов:

Загрузите существующий файл HTML.
Определите, для какого элемента вы хотите изменить цвет фона, и найдите этот элемент, чтобы установить для него атрибут стиля. Используйте метод GetElementsByTagName( name ) элемента Element, который возвращает HTML-элемент с заданным именем тега.
Установите атрибут style со свойством background-color : используйте свойство Style элемента HTMLElement класс.
Сохраните измененный HTML-документ.

Вы можете установить или изменить цвет фона для различных элементов HTML, таких как

, … , или . В следующем примере C# показано изменение цвета фона для первого элемента

C# example

 1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for document saving  6 string savePath = Path.Combine(OutputDir, "change-background-color-p-inline-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the first paragraph element to set a style attribute 15 var paragraph = (HTMLElement)document.GetElementsByTagName("p").First(); 16 17 // Set the style attribute with background-color property 18 paragraph.Style.BackgroundColor = "#e5f3fd"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));

JavaScript code

1script> 2 // Find the paragraph element to set a style attribute 3 var paragraph = document.getElementsByTagName("p")[0]; 4 5 // Set the style attribute with background-color property 6 paragraph.style.backgroundColor = "#e5f3fd"; 7script>

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

Изменить цвет фона всей веб-страницы

Вы можете изменить цвет фона с помощью встроенного атрибута style или с помощью внутреннего CSS.

Изменить цвет фона с помощью встроенного CSS

Если вы хотите изменить цвет всего HTML-документа, вы должны использовать свойство background-color атрибута style в открывающем теге раздела .

C# example

 1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for document saving  6 string savePath = Path.Combine(OutputDir, "change-background-color-inline-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the body element to set a style attribute 15 var body = (HTMLElement)document.GetElementsByTagName("body").First(); 16 17 // Set the style attribute with background-color property 18 body.Style.BackgroundColor = "#e5f3fd"; 19 20 // Save the HTML document to a file 21 document.Save(Path.Combine(savePath));

JavaScript code

1script> 2 // Find the body element to set a style attribute 3 var body = document.getElementsByTagName("body")[0]; 4 5 // Set style attribute with background-color property 6 body.style.backgroundColor = "#e5f3fd"; 7script>

You can download the complete examples and data files from GitHub.

Изменить цвет фона с помощью внутреннего CSS

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

1head> 2style> 3 body  4 background-color: rgb(229, 243, 253); 5 > 6style> 7head>

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

В следующем примере C# показано, как реализовать внутренний CSS для изменения цвета фона для всего HTML-файла. Сделайте несколько шагов:

Загрузите существующий файл HTML.
Найдите элемент и удалите свойство background-color из атрибута style. Примечание. Если цвет фона задается с помощью встроенного атрибута style , этот шаг обязателен, поскольку использование атрибута style переопределяет как внутренний, так и внешний CSS.
Создайте элемент и назначьте значение background-color для элемента .
Найдите в документе элемент и добавьте в него элемент .
Сохраните измененный HTML-документ.

C# example

 1using Aspose.Html;  2using System.IO;  3.  4  5 // Prepare output path for document saving  6 string savePath = Path.Combine(OutputDir, "change-background-color-internal-css.html");  7  8 // Prepare path to source HTML file  9 string documentPath = Path.Combine(DataDir, "file.html"); 10 11 // Create an instance of an HTML document 12 var document = new HTMLDocument(documentPath); 13 14 // Find the body element 15 var body = (HTMLElement)document.GetElementsByTagName("body").First(); 16 17 // Remove the background-color property from the style attribute 18 body.Style.RemoveProperty("background-color"); 19 20 // Create a style element and assign the background-color value for body element 21 var style = document.CreateElement("style"); 22 style.TextContent = "body < background-color: rgb(229, 243, 253) >"; 23 24 // Find the document head element and append style element to the head 25 var head = document.GetElementsByTagName("head").First(); 26 head.AppendChild(style); 27 28 // Save the HTML document 29 document.Save(Path.Combine(savePath));

JavaScript code

 1script>  2 // Find the body element  3 var body = document.getElementsByTagName("body")[0];  4  5 // Remove the background-color property from style attribute  6 body.style.removeProperty("background-color");  7  8 // Create a style element and assign the background-color value for body element  9 var style = document.createElement("style"); 10 style.textContent = "body < background-color: rgb(229, 243, 253) >"; 11 12 // Find the document head element and append style element to the head 13 var head = document.getElementsByTagName("head")[0]; 14 head.appendChild(style); 15script>

На рисунке показаны два фрагмента HTML-файла до (а) и после (б) изменения цвета фона для всего документа:

Text “Два фрагмента HTML-документа до и после изменения цвета фона.”

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

CSS-club – настройка внешнего вида сайта

Сделать это можно с помощью свойства background-color , значением которого выступает . Указав цвет с прозрачностью вы сделаете фон элемента прозрачным. Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».

Свойство: background-color.
Значение: .

/* Светлая полупрозрачная центральная область */ .l-page

/* Тёмные полупрозрачные подзаголовки блоков */ .subheadline

/* Тёмно-фиолетовое верхнее меню без прозрачности */ .l-top_menu-v2 < background: rgba(46, 33, 84, 1); >/* Прозрачные кнопки сабменю */ .l-top_menu-v2 .menu-dropdown > span

Как установить фоновое изображение для элемента?

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

Свойство: background-image.
Значение: url(ссылка на изображение).

/* Фон сайта (фиксированный, на полный экран) */ body < background: url(/system/images/original/83668.jpg) center top / cover fixed; >

Подробное описание

background – универсальное свойство объединяющее в себе несколько свойств отвечающих за настройки фона элемента. Среди них: уже известное вам из первого вопроса свойство background-color (фоновый цвет), background-image (фоновое изображение), background-position (позиционирование фона), background-size (размер фона), background-repeat (повторение фона) и background-attachment (закрепление фона).

В универсальном свойстве background их принято указывать в следующем порядке:

background: -color -image -position / -size -repeat -attachment;

Значения по умолчанию

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

selector < background: transparent none left top / auto repeat scroll; >

Что равняется такой записи:

selector < /* Прозрачный фоновый цвет */ background-color: transparent; /* Фонового изображения нет */ background-image: none; /* Изображение прикрепляется к левому верхнему углу элемента */ background-position: left top; /* Размер изображения не меняется */ background-size: auto; /* Изображение повторяется, чтобы замостить весь элемент */ background-repeat: repeat; /* Изображение не закреплено и прокручивается вместе с элементом */ background-attachment: scroll; >

Позиционирование фона

background-position совмещает в себе два свойства: background-position-x – позиционирование фона по горизонтали и background-position-y, задающее положение фона по вертикали.

Значение может указываться в виде как ключевых слов:

selector < background-position: right center; /* по центру правого края */ >

так и процентов:

selector < background-position: 100% 50%; /* по центру правого края */ >

При этом 0% 0% – это левый верхний угол, а 100% 100% – правый нижний.

Кроме того, можно указать и значения в пикселях (px), чтобы настроить отступ от левого верхнего угла.

При указании значения «по центру» (как по горизонтали, так и по вертикали) можно не указывать повторяющиеся center center или 50% 50% , а указать значение только один раз.

Размер фона

auto – размер фонового изображения не изменяется.

cover – фоновое изображение заполняет собой элемент.

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

Повторение фона

no-repeat – изображение не повторяется.

repeat – изображение повторяется, полностью заполняя элемент.

Закрепление фона

scroll – изображение не закреплено, оно будет прокручиваться вместе с элементом.

fixed – изображение закреплено, оно будет неподвижно при прокрутке.

Несколько фоновых изображений

У всех описанных свойств, кроме background-color, в том числе и у универсального свойства background , значения могут быть написаны через запятую, чтобы указать свойства для нескольких фоновых изображений:

body < background: url(/system/clubs/main/811.png) left 50px no-repeat, #0a306f url(/system/images/original/83668.jpg) center / cover fixed; >

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

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

Как установить градиент для фона элемента?

Градиент — вид заливки в компьютерной графике, которая по заданным параметрам цвета в ключевых точках рассчитывает промежуточные цвета остальных точек. При этом создаются плавные переходы из одного цвета в другой. [wiki]

/* Градиент Alice Blue */ body

/* Мягкое свечение на тёмном фоне */ body

/* Горизонтальный градиент на подзаголовках блоков */ .subheadline

/* Градиент синего в верхнем меню */ .l-top_menu-v2

※ Как сделать прозрачными кнопки сабменю написано в вопросе «Как изменить цвет и прозрачность элемента?».

Линейный – за него отвечает функция linear-gradient() .

Круговой – за него отвечает функция radial-gradient() .

cssgradient.io

www.colorzilla.com

Рекомендуется всегда указывать фоновый цвет, так как поддержка свойства даже у последних версий браузеров не полная: caniuse.com

Подробное описание
Разберём синтаксис линейного градиента:

/* Шаблон использования */ selector < background-image: linear-gradient(, ); >

– угол, который указан в градусах (deg), но может быть указан и в градах (grad), радианах (rad) и оборотах (turn). К примеру, направление «Слева направо» или 90deg можно указать как 100grad или 0.25turn или примерно 1.57rad . Значения 0deg или направление «Сверху вниз» можно опустить.
Если этот вариант сложен для понимания, то можно использовать «направления»:

to bottom 0deg Сверху вниз (значение по умолчанию) to right 90deg Слева направо to top 180deg Снизу вверх. to left 270deg Справа налево.

/* Плавный переход фонового цвета */ body

Теперь о круговом градиенте:

/* Шаблон использования */ selector < background-image: radial-gradient(at , ); >

– форма и размер (радиус) градиента, если используется круговая форма circle . Есть еще ellipse , но используется он редко и рассматривать его смысла нет, можете поэкспериментировать сами. Если опустить радиус градиента, то он будет равняться большей стороне элемента. Если опустить at , то градиент приобретёт ту самую форму эллипса ( ellipse ), а его ширина и высота будут равняться ширине и высоте элемента.

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

– список цветов перечисленных через запятую.

/* Градиент в виде эллипса */ body

Но красивее получиться, если указывать форму, размер и позицию градиента:

/* Голубое свечение на розовом фоне */ body

Как изменить цвет текста?

Цвет текста задаётся с помощью свойства color , значением которого выступает . Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».

Свойство: color.
Значение: .

/* Цвет текста на сайте */ body

/* Цвет ссылок в текстах */ .b-link

/* Цвет текста в подзаголовках */ .subheadline < color: rgba(238, 238, 238, 0.9); >/* Цвет ссылок в подзаголовках */ .subheadline > a

ВАЖНО
Цвета ссылок проще всего изменить с помощью встроенных переменных:

html[data-color-mode=light]

Как скрыть элемент?

Чтобы просто скрыть элемент можно использовать свойство display со значением none .

Свойство: display
Значение: none.

/* Скрываем кнопку "Сообщить об ошибке" в профиле */ .p-profiles-show .b-feedback

Однако в некоторых ситуациях вам потребуется не просто скрыть элемент, но и оставить его место пустым, например, чтобы не сломать вёрстку сайта. В таком случае вам нужно использовать свойство visibility со значением hidden . Самое крутое в этом свойстве то, что потомков этого элемента можно снова сделать видимыми тем же свойством, но указав в значении visible .

Свойство: visibility
Значение: hidden

/* Скрываем историю */ .p-profiles .profile-head .c-history < visibility: hidden; >/* Устанавливаем картинку на место истории */ .p-profiles .profile-head .c-history::after < content: ''; visibility: visible; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/system/clubs/main/811.png) center / contain no-repeat; >

Как изменить шрифт и иконки?

Чтобы использовать стандартные (надёжные) шрифты можно использовать свойство font-family указав в значении свойства семейство шрифтов, либо один из девяти надёжных шрифтов.

Для удобства, можно заменить шрифт, используемый на сайте, с помощью css-переменных —font-main , использующийся для основного текста, и —font-alt , использующийся для заголовков, тегов и некоторых других элементов. Эти переменные принимают точно такие же значения, как и свойство font-family . О использовании css-переменных можно прочитать тут.

Свойство: font-family
Значение:

/* Устанавливаем шрифт Times New Roman для всех элементов на сайте */ :root

Обратите внимание, что —font-alt не обязательно должен повторять значение —font-main и может содержать другой шрифт. Если вы хотите оставить шрифт заголовков и тегов и некоторых других элементов без изменений, просто не копируйте это правило в свои настройки.

Кроме названия самого шрифта, стоит также подумать о тех, у кого по какой-либо причине может не оказаться этого шрифта и указать либо другой более распространённый шрифт, либо семейство шрифтов – serif (с засечками), либо sans-serif (без засечек), соответствующее выбранному вами шрифту.

Нестандартные шрифты

Чтобы использовать нестандартные шрифты вы должны сперва подключить их с помощью правила @font-face, указав в этом правиле свойства шрифта, а также расположение файлов в интернете, чтобы посетители страницы также могли видеть ваш шрифт. Используйте fonts.google.com, чтобы найти нестандартные шрифты.

Правило: @font-face

/* Подключение русской и английской версий шрифтов из fonts.google.com */ @font-face < font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2'); >@font-face < font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); >/* Устанавливаем шрифт Source Sans Pro для всех элементов на сайте */ :root

Установка шрифта из Google Fonts
Инструкция

Для начала нужно указать в CSS откуда следует грузить шрифт.

① Выберите шрифт

② Нажмите на черную полоску внизу экрана

③ Выделите ссылку и перейдите по ней

④ Скопируйте настройки для русского и английского языков

/* Устанавливаем шрифт Comfortaa */ :root

Обратите внимание, что это значения для переменной —font-main лучше всего скопировать из предложенных настроек выбранного вами шрифта:

Замена иконок на примере Font Awesome
Стили иконок и шрифт подключается с помощью @import -правила:

/* Подключение иконок Font Awesome 6.2.0 */ @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css);

Сами иконки добавляются с помощью BBCode [span] :

[span=fa-solid fa-user][/span]

Классы копируются со страницы иконки. Список доступных иконок: fontawesome.com.
Информация о дополнительной кастомизации (размер, анимация и т.д.) доступна на сайте шрифта: fontawesome.com.

Старые методы

Статья: /comments/3340339

/comments/3816739

/comments/7503200

Как закруглить углы?

Закруглить углы элемента можно с помощью свойства border-radius , значением которого выступают пиксели (px), либо проценты (%), обозначающие радиус скругления. Для квадратных элементов радиус в половину стороны (50%) превратит их в круг.

Свойство: border-radius

/* Круглая аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar img

/* Круглые аватарки везде! (почти) */ .avatar img

/* Небольшое скругление постеров аниме/манги/персонажей/людей */ .b-catalog_entry .image-cutter

Как сделать изменения при наведении/нажатии на элемент?

Для изменений свойств при наведении нужно добавить к селектору псевдокласс :hover , а для изменений при нажатии – псевдокласс :active .

/* Шаблон использования */ selector < color: white; /* обычное состояние */ >selector:hover < color: red; /* состояние при наведении */ >selector:active < color: black; /* состояние при нажатии */ >

Кроме того, можно менять свойства потомков при наведении на родителя:

/* Шаблон использования */ parent children < opacity: 1; /* обычное состояние */ >parent:hover children < opacity: 0; /* состояние при наведении */ >

Для плавного перехода между состояниями используйте свойство transition.

/* Аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar > img < border-radius: 0%; /* обычное состояние */ transition: 0.5s ease-out; >.p-profiles .profile-head .c-brief .avatar > img:hover < border-radius: 50%; /* состояние при наведении */ >

/* Аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar > img < border-radius: 0%; /* обычное состояние */ transition: .2s ease; >.p-profiles .profile-head:hover .c-brief .avatar > img < border-radius: 50%; /* состояние при наведении */ >

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

Как сделать так, чтобы изменения отображались и на телефоне?

По умолчанию сайт отключает ваш стиль на экранах меньше 1024px. Если быть точным, то ваш стиль оборачивается в такой медиа-запрос:

@media (min-width: 1024px) < /* Ваш стиль */ >

Этот медиа-запрос означает, что все правила внутри него будут работать только при выполнении условий в скобках. В нашем случае этим условием является минимальная ширина: 1024px.

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

@media < /* Отключение защиты от дурака */ >

Это названо защитой от дурака не просто так: чтобы ничего не сломать и делать осмысленные изменения для мобильной версии от вас потребуются хорошие базовые знания CSS и понимание основ адаптивной верстки.

htmlacademy.ru/courses

codecademy.com/learn/learn-css

Самый простой способ ничего не сломать — обернуть свой код в @media -запрос:

@media (min-width: 1024px) < /* Добавьте эту строку в начало кода */ /* Ваш CSS тут */ >/* Добавьте эту строку в конец кода. Это конец @media-запроса. */

После этого можно переносить правила, которые должны работать на мобильной версии в конец CSS стиля (или начало, как вам удобнее):

/* Ваш CSS, который работает на любых экранах */ @media (min-width: 1024px) < /* Ваш CSS, который работает только на больших экранах */ >

@media (min-width: 1024px) < /* Ваш CSS, который работает только на больших экранах */ >@media (max-width: 1023px) < /* Ваш CSS, который работает только на НЕбольших экранах */ >

Простой пример – разный цвет меню в мобильной и настольной версиях:

/* Настройки mobile-версии */ /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >/* Настройки desktop-версии */ @media (min-width: 1024px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>

Однако это не совсем точно – правила указанные без медиа-запроса будут работать как для мобильной, так и для настольной версии. То есть, свойства, указанные без медиа-запроса и не перезаписанные в дальнейшем из настроек настольной версии, будут продолжать работать. Это очень полезно, чтобы не писать одни и те же свойства для мобильной и настольной версий, но иногда требуется этого избежать. Чтобы указать правила исключительно для мобильной версии нужно использовать другие условия в медиа-запросе:

/* Настройки mobile-версии */ @media (max-width: 1024px) < /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >> /* Настройки desktop-версии */ @media (min-width: 1025px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>

Условия в медиа-запросах могут быть разные, но основные это (min-width: ) и (max-width: ) , означающие что правила внутри медиа-запроса с такими условиями будут работать после определённой минимальной ширины и до определённой максимальной ширины соответственно.

Условия можно объединять:

/* Настройки mobile-версии */ @media (min-width: 360px) and (max-width: 599px) < /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >> /* Настройки tablet-версии */ @media (min-width: 600px) and (max-width: 1024px) < /* Тёмно-красное верхнее меню */ .l-top_menu-v2 < background: #722424; >> /* Настройки desktop-версии */ @media (min-width: 1025px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>

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

Полезно знать, что по умолчанию фоновая картинка на мобильных экранах отключается следующим медиа-запросом:

@media screen and (max-width: 1024px) < body < background: none !important; >>

Подробнее о медиа-запросах можно прочитать на сайте webref.ru.

Как найти селектор элемента и менять его свойства?

Возможно необходимый селектор есть на странице «Список селекторов». Если нет, то следуйте инструкции:

1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем «Просмотреть код».
Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.

2) В открывшейся панели 2 области: левая — HTML, правая — CSS. В левой мы видим все элементы страницы, а в правой — свойства, которые отвечают за их внешний вид.

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

Что делать если нужного свойства нет?

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

Что делать если нужного свойства все равно нет?

Некоторые свойства, такие как background-color , не наследуются по умолчанию, поэтому если у выделенного вами элемента (п. 1) нет свойства, которое вы ищите, взгляните на область HTML, и двигайтесь по дереву элементов вверх, чтобы найти нужный. Если вы ищите фон, поглядывайте на сайт — там подсвечивается выделенный элемент: подсветка должна совпадать с закрашенным элементом.

Работа с динамическими элементами

Динамические элементы — это элементы, которые появляются на странице или меняются по заданному JS-скриптами сценарию. Самый простой пример — всплывающее окно с комментарием или информацией о аниме. Чтобы редактировать CSS-свойства таких элементов было проще, можно остановить их изменения с помощью функции «Pause script execution» или «Поставить на паузу сценарий». Функция вызывается клавишей F8 или комбинацией — Ctrl + / . Вызов функции останавливает всё, что происходит на странице.
Этого вполне достаточно, чтобы примерить любые свойства на все выше перечисленные элементы.

К примеру, мы хотим изменить стили всплывающего окно с комментарием. Для этого мы должны открыть инспектор ( F12 ), навести курсор на упоминание или имя в цитате, а после появления всплывающего окна остановить выполнение сценариев ( F8 ). Страница остановится, а всплывающее окно перестанет пропадать при движении курсора с упоминания.

Этим способом можно редактировать правила не только для динамических элементов, но и состояний любых других элементов. Например, при наведении курсором на ссылку, она меняет цвет, потому что в момент наведения на элемент накладывается псевдокласс :hover , которому заданы дополнительные свойства. При обычных условиях, когда вы уберёте курсор — элемент вернёт свой изначальный цвет. Чтобы этого не происходило нам нужно остановить страницу в момент наведения: наводим курсором на элемент и нажимаем F8 , чтобы остановить страницу, а сам элемент в положении наведенного — теперь можно редактировать нужные свойства.

На вкладке «Элементы» нажмите правой кнопкой на нужный элемент, выберите в выпадающем меню пункт «Установить состояние», а затем необходимое состояние. При этом напротив изменённого элемента в инспекторе появится круглый индикатор.

На вкладке «Стили» рядом с поиском нажмите на кнопку :hov , чтобы открыть список состояний и выберите необходимые. На вкладке «Элементы» также появится индикатор.

4) После изменения свойства, двигайтесь вверх по списку свойств, пока не наткнетесь на открывающуюся фигурную скобку < . Перед ней находится "селектор", та самая штука, которая определяет к какому именно элементу страницы будет применяться ваши правила.

На примере Microsoft EDGE (в картинках)
1920×964 1920×964 1920×964

Что делать, если свойство не работает?

Если не работает только отдельное свойство, а не всё правило целиком, то к значению свойства нужно добавить !important .

/* Изменение цвета даты в истории пользователя (не работает) */ .p-profiles .profile-head .c-history .entry .misc.date < color: #acb1b4; >/* Изменение цвета даты в истории пользователя (работает!) */ .p-profiles .profile-head .c-history .entry .misc.date

css-validator.org (на русском)

csstree.github.io/docs/validator.html (eng без лишних настроек)

csslint.net

Проверка кода в CSSLint
Чтобы быстро проверить свой код (проверять готовые стили не нужно!) в CSSLint, вставьте свой код на сайт, нажмите на стрелочку рядом с надписью «Lint» и в конце первой строчки нажмите на «(None)», чтобы отключить все лишние проверки. Затем нажмите на «Lint».

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

Самая распространённая ошибка: незакрытые/лишние фигурные скобки вызовут ошибку на следующей строке, поэтому если вы видите «красный» селектор, то обратите внимание на строку выше: скорее всего, ошибка кроется именно там.

Более подробные описания свойств и их значений можно найти на сайтах htmlbook.ru/css/ или webref.ru/css

Цвет

В версии 5.3.0 цветовая палитра Bootstrap продолжает расширяться и становится более нюансированной. Мы добавили новые переменные для secondary и tertiary цвета текста и фона, а также -bg-subtle , -border-subtle и -text-emphasis для нашего цвета темы. Эти новые цвета доступны через переменные Sass и CSS (но не наши карты цветов или служебные классы) с явной целью упростить настройку нескольких цветовых режимов, таких как светлый и темный. Эти новые переменные глобально установлены в :root и адаптированы для нашего нового темного цветового режима, в то время как исходные цвета темы остаются неизменными.

Цвета, оканчивающиеся на -rgb , предоставляют значения red, green, blue для использования в цветовых режимах rgb() и rgba() . Например, rgba(var(—bs-secondary-bg-rgb), .5) .

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

Использование новых цветов

Эти новые цвета доступны через переменные CSS и служебные классы, такие как —bs-primary-bg-subtle и .bg-primary-subtle , что позволяет вам создавать собственные правила CSS с помощью переменных или быстро применять их. стили через классы. Утилиты построены с переменными CSS, связанными с цветом, и, поскольку мы настраиваем эти переменные CSS для темного режима, они также адаптируются к цветовому режиму по умолчанию.

Пример элемента с утилитами

div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3"> Пример элемента с утилитами div>

Цвета темы

Мы используем подмножество всех цветов, чтобы создать меньшую цветовую палитру для создания цветовых схем, также доступных в виде переменных Sass и карты Sass в файле scss/_variables.scss .

Все эти цвета доступны в виде карты Sass, $theme-colors .

$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );

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

Все цвета

Все цвета Bootstrap доступны как переменные Sass и карта Sass в файле scss/_variables.scss . Чтобы избежать увеличения размеров файлов, мы не создаем классы цвета текста или фона для каждой из этих переменных. Вместо этого мы выбираем подмножество этих цветов для палитры темы.

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

$blue #0d6efd
$indigo #6610f2
$purple #6f42c1
$pink #d63384
$red #dc3545
$orange #fd7e14
$yellow #ffc107
$green #198754
$teal #20c997
$cyan #0dcaf0
$gray-500 #adb5bd
$black #000
$white #fff

Примечания к Sass

Sass не может программно генерировать переменные, поэтому мы вручную создали переменные для каждого оттенка и оттенка сами. Мы указываем значение средней точки (например, $blue-500 ) и используем пользовательские цветовые функции для придания оттенка (осветления) или затенения (затемнения) наших цветов с помощью цветовой функции Sass mix() .

Использование mix() — это не то же самое, что lighten() и darken() — первый смешивает указанный цвет с белым или черным, а последний только регулирует значение яркости каждого цвета. В результате получается гораздо более полный набор цветов, как показано в этой демонстрации CodePen.

Наши функции tint-color() и shade-color() используют mix() вместе с нашей переменной $theme-color-interval , которая определяет ступенчатое процентное значение для каждого смешанного цвета, который мы производим. См. полный исходный код в файлах scss/_functions.scss и scss/_variables.scss .

Карты sass цвета

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

$colors список всех наших доступных базовых цветов ( 500 )

$theme-colors список всех цветов темы с семантическими именами (показано ниже)

$grays список всех оттенков и теней серого

В scss/_variables.scss Вы найдете цветовые переменные Bootstrap и карту Sass. Вот пример Sass-карты $colors :

$colors: ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "black": $black, "white": $white, "gray": $gray-600, "gray-dark": $gray-800 );

Добавляйте, удаляйте или изменяйте значения на карте, чтобы обновить, как они используются во многих других компонентах. К сожалению, в настоящее время не каждый компонент использует эту карту Sass. В будущих обновлениях мы постараемся улучшить это. А пока планируйте использовать переменные $ и эту карту Sass.

Пример

Вот как Вы можете использовать их в своем Sass:

.alpha color: $purple; > .beta color: $yellow-300; background-color: $indigo-900; >

Утилиты Цвета и фона также доступны для установки color и background-color с использованием значений цвета 500 .

Генерация утилит

Добавлено в версии 5.1.0

Bootstrap не включает утилиты color и background-color для каждой цветовой переменной, но вы можете создать их самостоятельно с помощью нашего служебного API и нашего расширенного Карты Sass добавлены в v5.1.0.

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

Используйте нашу функцию map-merge-multiple() , чтобы быстро объединить несколько карт Sass в новую карту.

Объедините эту новую комбинированную карту, чтобы дополнить любую утилиту именем класса — .

Вот пример, который генерирует утилиты цвета текста (например, .text-purple-500 ) используя вышеуказанные шаги.

@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans); $utilities: map-merge( $utilities, ( "color": map-merge( map-get($utilities, "color"), ( values: map-merge( map-get(map-get($utilities, "color"), "values"), ( $all-colors ), ), ), ), ) ); @import "bootstrap/scss/utilities/api";

Это создаст новые утилиты .text— для каждого цвета и уровня. То же самое можно сделать и с любыми другими коммунальными предприятиями и объектами недвижимости.

Разработано и создано со всей любовью командой Bootstrap с помощью наших участников.

Код под лицензией MIT, документация CC BY 3.0.

Текущая версия 5.3.2.

Читать:
Как отсканировать прозрачную печать