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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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.

htmlbook.ru

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

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h2 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h2>Заголовок имеет свой собственный цвет текста</h2>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body.</p>
  </body>
</html>
Попробовать »

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
  4. цвет для тени
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h2 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

puzzleweb.ru

Изменение цвета шрифтов в DIV (CSS)

Я пытаюсь изменить цвет и размер шрифта h3 и шрифтов h3 link на основе div, в котором они находятся, но не были успешными. Что я делаю не так?

 <style>
h3 {
color:fff;
font-size: 20px;
}
social.h3 {
color:pink;
font-size: 14px;
}
social.h3.h3color {
color:purple;
font-size: 10px;
}
tv.h3 {
color:green;
font-size: 14px;
}
tv.h3.h3color {
color:orange;
font-size: 10px;
}
 </style>

 <h3>List of Companies </h3>
 <div>

 <h3>     <A href="http://www.facebook.com">Facebook     </a>
 <span>Found in 2004     </span>     </h3> 
 blah blah blah 

 <h3>     <A href="http://www.twitter.com">Twitter     </a>
 <span>Found in 2007     </span>     </h3>
 blah blah blah 

 </div>


 <div>

 <h3>     <A href="http://www.fox.com">Fox     </a>
 <span>Found in 2004     </span>     </h3> 
 blah blah blah 

 <h3>     <A href="http://www.nbc.com">NBC     </a>
 <span>Found in 2007     </span>     </h3>
 blah blah blah 
 </div>

Я пытаюсь сделать так, чтобы это выглядело так:

2 ответов

ваш первый селектор CSS —social.h3 — ищет» социальный «элемент в классе «h3», например:

<social>

селекторы классов выполняются с точкой (.). Кроме того, используйте пробел () to indicate that one element is inside of another. To find an <h3> потомком элемента social класс, попробуйте что-то вроде:

.social h3 {
  color: pink;
  font-size: 14px;
}

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

чтобы сделать ссылки, вы можете сделать

.social h3 a:link {
  color: pink;
  font-size: 14px;   
}

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