Изменить цвет текста в списке - «Списки» » Новости мира Интернет
OpenAI опубликовала короткометражки, созданные в ИИ-генераторе Sora - «Новости мира Интернет»
OpenAI опубликовала короткометражки, созданные в ИИ-генераторе Sora - «Новости мира Интернет»
На ежегодной конференции для разработчиков Apple может раскрыть свои планы по внедрению ИИ - «Новости мира Интернет»
На ежегодной конференции для разработчиков Apple может раскрыть свои планы по внедрению ИИ - «Новости мира Интернет»
Тренды дизайна корпоративных сайтов: что актуально в 2024 году
Тренды дизайна корпоративных сайтов: что актуально в 2024 году
В новой бета-версии Android 15 можно отключить ограничение частоты кадров 60 FPS для игр - «Новости мира Интернет»
В новой бета-версии Android 15 можно отключить ограничение частоты кадров 60 FPS для игр - «Новости мира Интернет»
Asus представила беспроводные наушники для геймеров ROG Cetra SpeedNova - «Новости мира Интернет»
Asus представила беспроводные наушники для геймеров ROG Cetra SpeedNova - «Новости мира Интернет»
Xiaomi представила умные очки Mijia с технологией воздушной проводимости - «Новости мира Интернет»
Xiaomi представила умные очки Mijia с технологией воздушной проводимости - «Новости мира Интернет»
В Microsoft 30 лет «забывали» обновить функцию «Форматирование» для Windows - «Новости мира Интернет»
В Microsoft 30 лет «забывали» обновить функцию «Форматирование» для Windows - «Новости мира Интернет»
CD Projekt RED выпустит бесплатную пробную версию Cyberpunk 2077, но есть нюанс - «Новости сети»
CD Projekt RED выпустит бесплатную пробную версию Cyberpunk 2077, но есть нюанс - «Новости сети»
США отстали: большинство ведущих специалистов в сфере ИИ в мире — китайцы - «Новости сети»
США отстали: большинство ведущих специалистов в сфере ИИ в мире — китайцы - «Новости сети»
Intel, Google, Arm и другие объединились для борьбы с гегемонией Nvidia с помощью открытого ПО - «Новости сети»
Intel, Google, Arm и другие объединились для борьбы с гегемонией Nvidia с помощью открытого ПО - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Списки » Изменить цвет текста в списке - «Списки»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Изменить цвет фона списка и цвет текста в нём.

Решение

Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL, как показано в примере.;1.

Пример 1. Цвет фона в списке

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Цвет списка</title>  
  <style>
   ul {
    color: navy; /* Цвет текста */
    background: #fc0; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    margin-left: 20px; /* Отступ слева */
   
  </style>
 </head> 
 <body> 
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
 </body>
</html>

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

.;


Рис. 1. Выделение цветом текста списка

При таком раскладе маркеры оказываются вынесенными за пределы цветной фоновой области. Поэтому для изменения вида фона следует использовать тег <div>, внутрь которого и добавить список. Все необходимые цвета при этом указываются для селектора DIV (пример.;2).

Пример2. Цвет фона в списке

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html">
<html>
 <head>
  <meta charset="utf-8" />
  <title>Цвет списка</title> 
  <style type="text/css">
   div {
    color: navy; /* Цвет текста */
    background: #fc0; /* Цвет фона */
    padding: 2px; /* Поля вокруг текста */
   
  </style>
 </head> 
 <body> 
  <div>
    <ul>
     <li>Чебурашка</li>
     <li>Крокодил Гена</li>
     <li>Шапокляк</li>
    </ul>
  </div>
 </body>
</html>

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

.;


Рис. 2. Выделение цветом всей области списка

Расстояние от края цветового прямоугольника до текста регулируется свойствами margin и padding, добавляемые к селектору UL.


Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Изменить цвет фона списка и цвет текста в нём. Решение Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL, как показано в примере.;1. Пример 1. Цвет фона в списке HTML5 CSS 2.1 IE Cr Op Sa Fx

Смотрите также

А что там на главной? )))



Комментарии )))



Комментарии для сайта Cackle