Background style div: html — Use a DIV as a background for another element

Разное 

Содержание

css — Как установить цвет фона элемента в файле HTML?

спросил

Изменено 3 месяца назад

Просмотрено 29 тысяч раз

Можно ли установить цвет фона элемента без файла CSS? Просто используя файл HTML?

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

 тело {
    цвет фона: #6B6B6B;
    поле: 50 пикселей;
    
    семейство шрифтов: Arial;
    белый цвет;
    размер шрифта: 14px;
    вес шрифта: 100;
    высота строки: .2;
    межбуквенный интервал: 1px;
} 
 
текст
  • HTML
  • CSS

1

Вы используете два атрибута стиля в одном элементе div, что недопустимо:

 
text

Вместо этого используйте (если используете разные стили CSS, разделите их ; , как показано ниже)

 
text

Вы можете использовать встроенный CSS в HTML или с помощью атрибута bgColor .

Вы можете использовать атрибут bgColor , например bgColor="#6B6B6B" , в элементе body для изменения цвета фона .

HTML 9Атрибут 0033 bgcolor используется для установки цвета фона r элемента HTML. Bgcolor является одним из тех атрибутов, которые стали устаревшими

с внедрением каскадных таблиц стилей .

Поддерживает такие теги, как

, , , , , ,

ДЕМО С ИСПОЛЬЗОВАНИЕМ bgColor :

 
  
текст

ДЕМО БЕЗ ИСПОЛЬЗОВАНИЯ bgColor :

 
  
текст

ПРИМЕЧАНИЕ.

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

background и background-color в CSS

. 0

Рабочий код 

 тело {
    цвет фона: #6B6B6B;
    поле: 50 пикселей;
    
    семейство шрифтов: Arial;
    белый цвет;
    размер шрифта: 14px;
    вес шрифта: 100;
    высота строки: .2;
    межбуквенный интервал: 1px;
} 
 
text

Ваш синтаксис был нарушен для встроенных стилей. Вы указывали стили два раза.

Добавить это тело CSS

 {
    цвет фона: #6B6B6B;
    поле: 50 пикселей;
    семейство шрифтов: Arial;
    белый цвет;
    размер шрифта: 14px;
    вес шрифта: 100;
    высота строки: .2;
    межбуквенный интервал: 1px;
}
.мидив {
    фон:красный;
    отступ: 5px;
    белый цвет;
}

В HTML

 
текст

1

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как добавить фоновый цвет для ширины текста вместо ширины всего элемента ширина всего элемента.

Вам также понадобятся свойства CSS.

В следующем примере у нас есть заголовок в

, внутри которого мы добавляем встроенный элемент (

). Следующим шагом является установка цвета фона для элемента .

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

Пример установки цвета фона для ширины текста со встроенным элементом: 

 

  <голова>
    Название документа
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        цвет: #fff;
      }
      h2 диапазон {
        цвет фона: #43d9ср;
      }
    
  
  <тело>
    

      
 
Lorem Ipsum — это просто фиктивный текст

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

Результат

Lorem Ipsum — просто фиктивный текст

Другой способ решить проблему — использовать для свойства отображения значение «таблица». Обратите внимание, что родительский элемент не требуется.

Пример установки цвета фона для ширины текста с отображением, установленным на «таблицу»: 

 

  <голова>
    Название документа
    <стиль>
      ч2 {
        дисплей: таблица;
        поле: 0px авто 0px авто;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #30cf52;
        цвет: #fff;
      }
    
  

  

  <тело>
     
Lorem Ipsum — это просто фиктивный текст

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

В следующем примере требуется родительский элемент, поэтому мы используем элемент

в качестве контейнера. Здесь мы устанавливаем отображение на «inline-flex» для элемента

и выравнивание текста на «центр» для контейнера.

Пример установки цвета фона для ширины текста с отображением, установленным на «inline-flex»: 

 

  <голова>
    Название документа
    <стиль>
      .контейнер {
        выравнивание текста: по центру;
      }
      ч2 {
        дисплей: встроенный гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #4451b3;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст

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

В следующем примере для отображения как контейнера, так и текста установлено значение «flex».

Для контейнера мы также используем свойство justify-content со значением «центр».

Пример установки цвета фона для ширины текста при отображении, настроенном на «flex»: 

 

  <голова>
    Название документа
    <стиль>
      .контейнер {
        дисплей: гибкий;
        выравнивание содержимого: по центру;
      }
      ч2 {
        дисплей: гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #000;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст

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

Или вы также можете использовать значение «блок» свойства отображения. Здесь также требуется гибкий родительский контейнер.

Пример установки цвета фона для ширины текста с отображением, установленным на «блок»: 

  <голова>Название документа <стиль> .
No related posts.
 
     Автор записи 
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
,
9030033