Background color: background-color — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

html — В чём разница между color и background-color? Объясните, пожалуйста

1)Вот пример: в a.navig:after у меня применен background-color: red. a.navig:after отвечает за линию, которая будет появляться при наведении в a.navig:hover:after. Не пойму, типа потому, что я линию создал, как блок, у неё есть бэкграунд (задал ширину, высоту…)

body {
    margin: 0;
}
div.cover {
    width: 100vw;
    height: 100vh;
    background: url('../images/travel_bg.jpeg') center;
    background-size: cover;
    margin: 0;
}
div.container {
    padding: 20px;
    display: inline-flex;
}
a.navig {
    font-size: 25px;
    color: #000;
    font-family: 'Baloo Tamma 2', cursive;
    margin: 0 20px;
    text-decoration: none;
}
a.navig:hover {
    color: red;
    transition: 0.2s;
}
a.navig:after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: red;
    display: block;
    opacity: 0;
    transition: 0.3s;
}
a.navig:hover:after {
    opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="assets/css/style.
 
 css">
    <link href="https://fonts.googleapis.com/css2?family=Alata&family=Baloo+Tamma+2&display=swap" rel="stylesheet">
    <title>Traveler</title>
</head>
<body>
    <div>
        <div>
            <a href='#'>Air tickets</a>
            <a href='#'>R/w tickets</a>
            <a href='#'>Hotels</a>
            <a href='#'>Buses</a>
        </div>
    </div>
</body>
</html>

Также, объясните, если не трудно, почему в a.navig:after нужен display: block? Без него линия не отображается. Я предполагаю, что из-за того, что родитель(div.container) у a.navig:after имеет display: inline-flex. Подскажите, прав или нет?

  • html
  • css

Для начала разберёмся конкретно по вопросу, который указан в заголовке: «В чём разница между color

и background-color?»

Если в двух словах, то color используется для изменения цвета текста, а background-color для изменения цвета фона.

Пример:

.color {
  background-color: blue;
  color: red;
}
<span>Фон синий, а текст красный</span>

Подробнее о свойствах: background-color и color

Далее разберём вопросы уже в описание.

1)Вот пример: в a.navig:after у меня применен background-color: red. a.navig:after отвечает за линию, которая будет появляться при наведении в a.navig:hover:after. Не пойму, типа потому, что я линию создал, как блок, у неё есть бэкграунд (задал ширину, высоту…)

Не понял о чём вопрос..

Также, объясните, если не трудно, почему в a.navig:after нужен display: block? Без него линия не отображается. Я предполагаю, что из-за того, что родитель(div.container) у a.navig:after имеет display: inline-flex. Подскажите, прав или нет?

Скорее всего это связанно с спецификой псевдоэлементов

Для ::after характерны следующие особенности.

  1. При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
  2. При добавлении ::after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

Вырезка с Псевдоэлемент ::after | htmlbook.ru

  • псевдоэлементы :before и :after по дефолту инлайновые (имеют dispaly: inline).

  • background-color — устанавливает фоновый цвет для блока, color — цвет самого текста. но я думаю, что Вы не это хотели спросить, верно?

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Учебник CSS — Урок 3 — Свойства background-color, font-style, font-weight, text-align, text-decoration, text-transform.

За время существования HTML придумали много тегов и теперь с повсеместным применением css от некоторых придется отказаться, среди таких тегов <font>, <b>, <i>, <center>. Позже мы рассмотрим другие «запрещенные» теги. Также эти свойства помогут вам избежать лишнего кода в HTML-коде страницы и вынести его в css-файлы.

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

Итак, первое свойство в этом уроке background-color.

Background-color

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

span{
  background-color: yellow;
}

Или для ссылки:

a{
  background-color: blue;
}

Цвета как и в свойстве color можно задавать и цифрами, например так #ff0000 (что будет красным цветом).

Font-style

Возможно вам уже попадались теги <b> или <strong> (выделение жирным), <i> (курсив), font («злой» тег, делает что угодно с текстом). И что не использовать кучу этих и других тегов, придумали свойство css 

font-style. Среди распространенных значений этого свойства можно выделить следующие:

p{
  font-style: italic; /* курсив */
}

Тем самым мы заменяем тег <i> на свойство font-style со значением italic.

Font-weight

Среди устаревших тегов и <b>, делающий шрифт жирным. Сейчас достаточно использовать свойство font-weight:

body{
  font-weight: normal; /* обычный шрифт */
}
 
p{
 font-weight: 400; /* обычный шрифт */
}
 
span{
  font-weight: 700; /* жирный шрифт */
}
 
a{
  font-weight: bold; /* жирный шрифт */
}

Для свойства font-weight возможны следующие значения 400 или normal — это нормальный шрифт и 700 или bold жирный шрифт.

Text-align

Свойство text-align пришло на смену тегу <center> и HTML атрибуту align. Использовать text-align можно так:

body{
  text-align: left; /* по левому краю */
}
 
p{
  text-align: center; /* по ширине */
}
 
span{
  text-align: right; /* по правому краю */
}
 
div{
  text-align: center; /* по центру */
}

Что всем сразу понятно стало что именно делает это свойство, ответ в картинке ниже:

Text-decoration

Также вместо тегов <strike> (зачеркивание), <u> (подчеркивание) мы можем использовать теперь в css свойство text-decoration:

.underline{
  text-decoration: underline; /* подчеркивание */
}
 
.line-through{
  text-decoration: line-through; /* перечеркивание */
}

Text-transform

Еще одно иногда нужное CSS свойство text-transform. Оно позволяет написать все буквы прописными или наоборот все буквы маленькие.

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

CSS | Свойство background-color — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 01 Авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Свойство background-color в CSS используется для указания цвета фона элемента. Фон покрывает весь размер элемента с отступами и рамкой, но не включает поля. Это делает текст настолько легко читаемым для пользователя.

    Синтаксис: 

     элемент {
    свойство background-color
}

    Значение по умолчанию: Имеет значение по умолчанию, т.е. прозрачный.

    Значения свойств:

    цвет: Определяет значение цвета фона или коды цветов. Например: имя цвета может быть указано как: «зеленый» или значение HEX как «# 5570f0» или значение RGB как «rgb (25, 255, 2)».

    Синтаксис: 

     элемент {
    цвет фона: имя_цвета;
}

    Example:

     

    html

    < html >

         < head >

             < title >свойство background-color title >

             < style >

                 body {

                     text-align:center;

                     background-color:green;

    }

    H2 {

    Цвет: белый;

                     background-color:blue;

    }

    H3 {

    Цвет: белый;

                     background-color:black;

                 }

             style >

         head

    >

         < body >

             < h2 >Geeksforgeeks h2 >

             < h3 >background-color : color_name; h3 >    

         тело >

    HTML >

    Выход:

    Прозрачный: Это значение по умолчанию. Он определяет прозрачный фоновый цвет.

    Синтаксис: 

     элемент {
    цвет фона: прозрачный;
}

    Пример:  

    html

    < HTML >

    < HEAD >

    <

    . < style >

                 body {

                90       90       

                     text-align:center;

    }

    H2 {

    Фоно-колохол: прозрачный;

    }

    H3 {

    Фоно-колохол: прозрачный;

    }

             style >

         head >

         < body >

             < h2 >Гики для гиков h2 >

             < h3 >background-color: transparent; h3 >    

         body >

    html >                   

    Вывод:

     

    Исходное значение: Используется для установки значения по умолчанию. Он не устанавливает цвет фона.

    Синтаксис: 

     элемент {
    цвет фона: начальный;
}

    inherit: Он наследует цвет фона от своего родителя.

    Поддерживаемые браузеры: Браузеры, поддерживаемые css background-color Property, перечислены ниже:

    • Chrome 1.0 и выше
    • Edge 12.0 и выше
    • Internet Explorer 4.0 и выше
      • 3 3 9 0.08 и Firefox 9 0.0.0.0 и выше
    • Safari 1.0 и выше

    Похожие статьи

    Что нового

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

    Добавление цвета фона к тексту в Pages для iCloud

    Pages

    Искать в этом руководстве

    Руководство пользователя

    страниц для iCloud

    • Добро пожаловать
      • Введение в Pages для iCloud
      • Текстовый редактор или верстка?
      • Знакомство с изображениями и другими объектами
        • Создайте свой первый документ
        • Введение в создание книги
      • Загрузить документ
      • Синхронизировать документ
      • Распечатать документ
        • Изменить вид документа
        • Показать или скрыть линейку
        • Быстрая навигация
        • Если вы не можете найти документ
        • Разрешить конфликты документов
      • Добавить текст в документ
      • Скопируйте и вставьте текст
      • Добавляйте маркированные или нумерованные списки
        • Изменение шрифта, размера, стиля или цвета текста
        • Применение стилей абзаца
        • Добавить буквицы
        • Поднять и опустить текст
        • Добавьте тень к тексту
        • Изменить заглавные буквы текста
        • Добавить разрывы строк или страниц
        • Отрегулируйте выравнивание и интервал
        • Форматировать столбцы текста
        • Отрегулируйте расстояние между символами
      • Добавить фоновый цвет к тексту
      • Связать текстовые поля
      • Добавить и ссылку в закладки
      • Ссылка на веб-сайт, адрес электронной почты, номер телефона или страницу
        • Пишите на другом языке
        • Изменить направление текста
        • Создайте документ с форматированием другого языка
      • Установите размер и ориентацию бумаги
      • Установить поля документа
      • Настройка разворота страниц
        • Добавить страницы
        • Добавить разделы
        • Изменение порядка страниц или разделов
        • Дублирование страниц или разделов
        • Удалить страницы или разделы
      • Добавьте границы и правила (линии)
      • Добавить оглавление
      • Добавьте верхние и нижние колонтитулы и номера страниц
      • Добавить сноски
      • Изменить фон страницы
        • Добавить или заменить изображения
        • Добавить галерею изображений
        • Обрезать (маскировать) изображение
        • Добавляйте фигуры и линии
        • Редактировать фигуры и линии
        • Объединяйте или разбивайте фигуры
        • Добавить текст внутри фигуры
      • Добавить видео и аудио
        • Добавить или удалить таблицы
        • Выбор ячеек, строк, столбцов или таблиц
        • Добавление или изменение строк и столбцов
        • Объединение и разделение ячеек
          • Изменение внешнего вида текста таблицы
          • Изменение линий сетки и цветов таблицы
        • Форматирование таблиц для двунаправленного текста
        • Введите текст и цифры
        • Добавить формулы
        • Изменение существующей формулы
        • Очистить содержимое ячейки и форматирование
        • Форматировать как валюту или другие данные
        • Использование справки по формулам и функциям
      • Алфавитизация или сортировка данных
      • Создать или удалить диаграмму
      • Изменить данные диаграммы
      • Редактировать текст диаграммы и маркировку
      • Изменить способ отображения данных
      • Изменить фон диаграммы
      • Изменение типа диаграммы
        • Перемещение и выравнивание объектов
        • Изменение размера объектов
        • Поворачивать или отражать объекты
        • Размещайте объекты с текстом
        • Соединяйте предметы линией
        • Слой, группировка и блокировка объектов
      • Настройка внешнего вида объектов
      • Добавьте заголовок или подпись
      • Применение стилей объекта
      • Заливка объектов цветом или изображением
        • Введение в сотрудничество
        • Приглашайте других к сотрудничеству
        • Совместная работа над документом
        • Изменить настройки общего документа
        • Запретить обмен документами
        • Общие папки и совместная работа
        • Используйте Box для совместной работы
      • Отправить документ по электронной почте
      • Опубликовать в Apple Books
      • Сохранить, назвать или дублировать документы
      • Удалить или восстановить документы
      • Восстановить более ранние версии
      • Организация документов
      • Защищайте документы паролем
      • Скачать документы
      • Текст с проверкой орфографии
      • Найти и заменить текст
      • Добавляйте комментарии или отвечайте на них
      • Выделите текст
      • Установите имя автора и цвет
      • Показать количество слов и другую статистику
      • Просмотр аннотаций
    • Горячие клавиши
    • Юридические уведомления и подтверждения
    • Авторские права

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

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

    Добавить цвет фона за выделенным текстом

    1. Выберите текст, который хотите изменить.

    2. На боковой панели «Формат» нажмите кнопку «Стиль» вверху.

      Если текст находится в ячейке таблицы, щелкните вкладку «Ячейка» в верхней части боковой панели вместо кнопки «Стиль».

    3. В разделе «Шрифт» нажмите всплывающее меню «Действие» и установите флажок «Фон текста».

    4. Щелкните поле цвета справа от текстового поля (оно выглядит как прямоугольник), затем выберите цвет.

    Добавить цвет фона позади абзаца

    1. Щелкните абзац или выберите несколько абзацев.

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

    2. На боковой панели «Формат» справа нажмите кнопку «Макет» вверху.

    3. Установите флажок «Фон абзаца», затем щелкните область цвета (она выглядит как прямоугольник) и выберите цвет.

    Удаление цвета за выделенным текстом или абзацем

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

    2. На боковой панели «Формат» справа выполните одно из следующих действий:

      • Если цвет находится только за текстом (не на полях): Нажмите кнопку «Стиль» вверху, нажмите «Действие». всплывающем меню , затем снимите флажок «Фон текста».

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

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

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