ГринФам


ГринФам


Использование цвета на web странице с помощью CSS

Место для style CSS в HTML коде


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<STYLE TYPE="text/css">
Сюда вставляем нужный style CSS
</STYLE>
</HEAD>
<BODY>

</BODY>
</HTML>


Фоновый рисунок страницы


body {
background-image: url('picture.gif'); /* Путь к фоновому изображению */
}


Фоновый рисунок таблицы


table {
background-image: url('picture.gif'); /* Путь к фоновому изображению */
background-color: #3366CC; /* Цвет фона таблицы */
}


Фоновый рисунок ячейки


Если вам необходимо в какой то из ячеек использовать фоновый рисунок
в нужной ячейке пишем <TD CLASS="c1">

TD.c1 {
background-image: url('picture.gif'); /* Путь к фоновому изображению */
}

TD.c1 {
background-image: url('www.ваш-сайт.ru/папка/картинка.формат');
}

пример вставки разных фоновых рисунков в несколько ячеек

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Ячейки</TITLE>
<META content=russian name=Content-Language>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE TYPE="text/css">
TD.c1 {
background-image: url('image/01.gif');
}
TD.c2 {
background-image: url('image/02.gif');
}
TD.c3 {
background-image: url('image/03.gif');
}
TD.c4 {
background-image: url('image/04.gif');
}
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD CLASS="c1"></TD>
<TD CLASS="c2"></TD>
<TD CLASS="c3"></TD>
<TD CLASS="c4"></TD>
</TR>
</TABLE>
</BODY>
</html>




Названия web цветов и шестнадцатеричное значение


Ivory
#FFFFF0
LightYellow
#FFFFE0
Snow
#FFFAFA
FloralWhite
#FFFAF0
LemonChiffon
#FFFACD
Cornsilk
#FFF8DC
Seashell
#FFF5EE
LavenderBlush
#FFF0F5
NavajoWhite
#FFDEAD
PeachPuff
#FFDAB9
Gold
#FFD700
PapayaWhip
#FFEFD5
BlanchedAlmond
#FFEBCD
Moccasin
#FFE4B5
MistyRose
#FFE4E1
Bisque
#FFE4C4
Pink
#FFC0CB
LightPink
#FFB6C1
Orange
#FFA500
LightSalmon
#FFA07A
DarkOrange
#FF8C00
Coral
#FF7F50
HotPink
#FF69B4
Tomato
#FF6347
OrangeRed
#FF4500
DeepPink
#FF1493
OldLace
#FDF5E6
LightGoldenrodYellow
#FAFAD2
Linen
#FAF0E6
AntiqueWhite
#FAEBD7
Salmon
#FA8072
GhostWhite
#F8F8FF
MintCream
#F5FFFA
WhiteSmoke
#F5F5F5
Beige
#F5F5DC
Wheat
#F5DEB3
SandyBrown
#F4A460
Azure
#F0FFFF
Honeydew
#F0FFF0
AliceBlue
#F0F8FF
Khaki
#F0E68C
LightCoral
#F08080
PaleGoldenrod
#EEE8AA
Violet
#EE82EE
DarkSalmon
#E9967A
Lavender
#E6E6FA
LightCyan
#E0FFFF
BurlyWood
#DEB887
Plum
#DDA0DD
Gainsboro
#DCDCDC
Crimson
#DC143C
PaleVioletRed
#DB7093
Goldenrod
#DAA520
Orchid
#DA70D6
Thistle
#D8BFD8
Chocolate
#D2691E
LightGrey
#D3D3D3
Tan
#D2B48C
Peru
#CD853F
IndianRed
#CD5C5C
MediumVioletRed
#C71585
Silver
#C0C0C0
DarkKhaki
#BDB76B
RosyBrown
#BC8F8F
MediumOrchid
#BA55D3
DarkGoldenrod
#B8860B
FireBrick
#B22222
PowderBlue
#B0E0E6
LightSteelBlue
#B0C4DE
PaleTurquoise
#AFEEEE
GreenYellow
#ADFF2F
LightBlue
#ADD8E6
DarkGray
#A9A9A9
Brown
#A52A2A
Sienna
#A0522D
YellowGreen
#9ACD32
DarkOrchid
#9932CC
PaleGreen
#98FB98
DarkViolet
#9400D3
MediumPurple
#9370DB
LightGreen
#90EE90
DarkSeaGreen
#8FBC8F
SaddleBrown
#8B4513
DarkMagenta
#8B008B
DarkRed
#8B0000
BlueViolet
#8A2BE2
LightSkyBlue
#87CEFA
SkyBlue
#87CEEB
Gray
#808080
Olive
#808000
Purple
#800080
Maroon
#800000
Chartreuse
#7FFF00
Aquamarine
#7FFFD4
LawnGreen
#7CFC00
MediumSlateBlue
#7B68EE
LightSlateGray
#778899
SlateGray
#708090
OliveDrab
#6B8E23
SlateBlue
#6A5ACD
DimGray
#696969
MediumAquamarine
#66CDAA
CornflowerBlue
#6495ED
CadetBlue
#5F9EA0
DarkOliveGreen
#556B2F
Indigo
#4B0082
MediumTurquoise
#48D1CC
DarkSlateBlue
#483D8B
SteelBlue
#4682B4
RoyalBlue
#4169E1
Turquoise
#40E0D0
MediumSeaGreen
#3CB371
LimeGreen
#32CD32
DarkSlateGray
#2F4F4F
SeaGreen
#2E8B57
ForestGreen
#228B22
LightSeaGreen
#20B2AA
DodgerBlue
#1E90FF
MidnightBlue
#191970
SpringGreen
#00FF7F
MediumSpringGreen
#00FA9A
DarkTurquoise
#00CED1
DeepSkyBlue
#00BFFF
DarkCyan
#008B8B
Teal
#008080
Green
#008000
DarkGreen
#006400
MediumBlue
#0000CD
DarkBlue
#00008B
Navy
#000080
Black
#000000



Цвет фона и рамки DIV


DIV.outline2 {
border: 2px dotted #000080 ; /* Цвет и толщина рамки*/
background: #C0C0C0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */ }

Для изменения вида рамки меняйте значения параметра border

Вид рамки в зависимости от стиля и толщины границы DIV
1 пиксел 3 пиксела 5 пикселов 7 пикселов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset


Выделение части текста цветом


.colortext {
color: red; /* Красный цвет символов */
}

Камни-целители, хранители и защитники от скверны.

<span class="colortext">К ним относится весь род нефритов.</span> Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.


Цвет и размер заголовков <h1> - <h6>


h1{font:10pt Verdana;font-weight:bold;color: blue;}
h2{font:12pt Verdana;font-weight:bold;color: green;}
h3{font:14pt Verdana;font-weight:bold;color: red;}
h4{font:16pt Verdana;font-weight:bold;color: yellow;}
h5{font:18pt Verdana;font-weight:bold;color: brown;}

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Цвет, размер и гарнитура текста


SPAN.warning {font:10pt Verdana;font-weight:bold; color: teal ;}
SPAN.intro {font:10pt Verdana;font-weight:bold; color: red;}
SPAN.kon {font:10pt Verdana;font-weight:bold; color: green;}
SPAN.info {font:10pt Verdana;font-weight:bold; color: peru;}
SPAN.roor {font:10pt Verdana;font-weight:bold; color: navy;}

Цвет текста

Цвет текста

Цвет текста

Цвет текста

<P><SPAN id="msg1" class="intro" lang="ru">Цвет текста</SPAN></P>


Цвет фона под текстом


H6 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
P {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}

<h6>Цвет фона под заголовком</h6>
<p>Цвет фона под текстом параграфа</p>

Цвет фона под заголовком

Цвет фона под текстом параграфа




Страницы  1   2   3    4    5    6   7   8


Рейтинг@Mail.ru       

Сайт управляется системой uCoz