Цветовое оформление

CSS предлагает нам 3 способа назначения цвета:

  • шестнадцатеричный код (#RRGGBB)
  • rgb(R,G,B,)
  • по названию некторых цветов.

Шестнадцатеричный код

Вы наверняка уже знаете как выглядит цвет в шестнадцатеричном обозначении. Для каждого цвета (красный, зеленый, синий) есть две буквы или цифры, перед которыми надо вставить символ решетки #. Чем больше цифры, тем ярче цвет. Черный цвет - #000000, белый - #ffffff.

Шестнадцатеричный код использует систему из 16 единиц. Так как мы имеем только 10 цифр, то остальные 6 обозначаются буквами от A до F. В совокупности они образуют 256 оттенков на каждый цвет, что в целом дает около 16 млн. цветов.

rgb(R,G,B)

Вторым способом задания цвета является прямое назначение цветов в численном или процентном значении. Выглядит это так: rgb (255,0,0). 255 (100%) - красный, 0 (0%) - зеленый и 0 (0%) - синий. Как вы, возможно, уже догадались, такой вид записи также использует 256 оттенков для каждого из основных цветов.

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

Названия цветов

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. Ниже в таблице приведены 16 основных названий цветов, их интерпретация в шестнадцатеричном коде и примеры.

 

Цветовое оформление

Для цветового оформления используется следующие параметры:

  • color - задаёт цвет шрифта. Про значения цветов говорилось в предыдущих главах учебника.
  • background-image - задаёт путь к файлу, который будет служить в качестве фона текста. Его синтаксис следующий: p {background-image: url(имя файла, который находится в той же папке, что и HTML-документ, либо полный url-адрес);};
  • background-color - задаёт цвет фона текста.
      <HTML>
         <HEAD>
            <TITLE>Цветовое оформление</TITLE>
            <STYLE>
               .class1 {    color: red;
                             background-image: url(1.jpg);   }
               .class2 {    color: red;
                             background-color: yellow;       }
            </STYLE>
         </HEAD>
         <BODY>
            <p class="class1">Данный шрифт получился красным и имеет фон 
                              в качестве неба, взятого из файла 1.jpg</p>
            <p class="class2">Теперь в качестве фона задан жёлтый цвет</p>
         </BODY>
      </HTML>

 

© gruppa-43im2009

Конструктор сайтов - uCoz