HTML/CSS/Style Basics/color

Материал из Web эксперт
Перейти к: навигация, поиск

background: lightblue

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               span {
                 background: lightblue;
               }
               span.valign {
                 font-size: 16px;
                   color: white;
                   background: steelblue;
                   font-weight: bold;
               }
           </style>
       </head>
       <body>

If Peter Piper picked a peck of pickled peppers, 

       </body>
   </html>
</source>


Browser-Safe Color Chart

   <source lang="html4strict">

<html> <head> <title></title> <style>td {font-size:1.4em}</style> </head> <body bgcolor="#000000">

Browser-Safe Color Chart

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

</body> </html> 

</source>


Change color with Javascript

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

 <title>Fix Colors</title>
<script type="text/javascript" language="javascript">

</script> </head> <body>

Changing Color

This is a test. This is a test. This is a test. .

</body> </html> 

</source>


color: #333333

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Combination Style Sheet Example</title> <style type="text/css" media="all"> body { 

   color: #333333;
   background-color: #FFFFFF;

} </style> </head> <body>

Aftermath

this is a test.

this is a test. ,
this is a test.

</body> </html> 

</source>


color:black; assigns the constant value black to the color property.

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>CSS Syntax</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style><!- body { 

  color:black;

} </style> </head> <body>

CSS syntax is EASY!

</body> </html> 

</source>


color: blue;

   <source lang="html4strict">

<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

 <head>
   <style type="text/css" rel="stylesheet">
   p {color: blue;}
   </style>
   <title>My first web page</title>
 </head>
 <body>

It is easy to use HTML

 </body>

</html> 

</source>


color:red

   <source lang="html4strict">

<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

 <head>
   <style>
     p.left {
        color:red;
     }
   </style>
   <title>Chapter Two, XHTML and CSS</title>
 </head>
 <body>

It is easy to use XHTML

 </body>

</html> 

</source>


Colors

   <source lang="html4strict">

RGB values specify a color via a Red, Green, Blue representation. RGB Percentage is the same as RGB but uses percentages. RGBA (RGB with Alpha channel [available in CSS 3]): The RGB palette is used with the addition of an alpha channel to specify transparency. Hexadecimal: This enables you to specify a color by a special hexadecimal number. Shorthand Hexadecimal: This is a shortened representation of hexadecimal numbers; it is limited to a special 216-color, web-safe palette. 

</source>


CSS Color Chart

   <source lang="html4strict">

<html> <head> <title>CSS Color Chart</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> body { 

   background-color: rgb(60%,60%,60%); 
   color: rgb(0%,0%,0%);

} h1, h2{ 

    color: rgb(80%80%80%)

} th{ 

    background-color: rgb(65%65%65%)

} </style> </head> <body>

"Browser-Safe" Color Mixing Chart

Gray Scale

0% Red, Green, Blue 20% Red, Green, Blue 40% Red, Green, Blue 60% Red, Green, Blue 80% Red, Green, Blue 100% Red, Green, Blue
?/td> ?/td> ?/td> ?/td> ?/td> ?/td>


Pure Colors

Color 20% 40% 60% 80% 100%
Pure Red ?/td> ?/td> ?/td> ?/td> ?/td>
Pure Green ?/td> ?/td> ?/td> ?/td> ?/td>
Pure Blue ?/td> ?/td> ?/td> ?/td> ?/td>


Mixture of Red and Green


Color Mixture 0% Red 20% Red 40% Red 60% Red 80% Red 100% Red
0% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
20% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
40% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
60% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
80% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
100% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>



Mixtures of Blue and Red
Color Mixture 0% Red 20% Red 40% Red 60% Red 80% Red 100% Red
0% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
20% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
40% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
60% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
80% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
100% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
Mixtures of Blue and Green
Color Mixture 0% Green 20% Green 40% Green 60% Green 80% Green 100% Green
0% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
20% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
40% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
60% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
80% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
100%Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
Mixtures of Red, Blue, and Green
Color Mixture 0% Green 20% Green 40% Green 60% Green 80% Green 100% Green
20% Red + 20% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
40% Red + 40% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
60% Red + 60% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
80% Red + 80% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
100% Red + 100% Blue ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
Mixtures of Red, Blue, and Green
Color Mixture 0% Blue 20% Blue 40% Blue 60% Blue 80% Blue 100% Blue
0% Red + 0% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
20% Red + 20% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
40% Red + 40% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
60% Red + 60% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
80% Red + 80% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>
100% Red + 100% Green ?/td> ?/td> ?/td> ?/td> ?/td> ?/td>

</body> </html> 

</source>


Hexadecimal Colors

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Setting a Negative Margin</title>
       <style type="text/css">

div { 

   color: #000000;
   background-color: #FF0000;
   border: thin solid #FFA500;

} 

       </style>
   </head>
   <body>
a div
   </body>

</html> 

</source>


RGB Colors

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Setting a Negative Margin</title>
       <style type="text/css">

body { 

   background-color: rgb(128, 128, 128);

} 

       </style>
   </head>
   <body>
a div
   </body>

</html> 

</source>


RGB Colors with percentage

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Setting a Negative Margin</title>
       <style type="text/css">

body { 

   background-color: rgb(50%, 50%, 50%);

} 

       </style>
   </head>
   <body>
a div
   </body>

</html> 

</source>


The Sixteen Basic Colors

   <source lang="html4strict">

<html> <head> <title></title> </head> <body bgcolor="#000000">

The Sixteen Basic Colors

White Black Gray Silver
Navy Blue Teal Aqua
Lime Green Olive Yellow
Fuchsia Red Maroon Purple

</body> </html> 

</source>


Use #fff for #ffffff

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http: //www.w3.org/1999/xhtml"xml: lang="en"lang="en"> <head> <title></title> <style type="text/css">

body { 

 background: #fff;
 color: #000;

}

  1. MainText {
 padding: 10px;
 margin: 5px;
 background-color: #fff;

} </style> </head> <body>

this is a test. this is a test. this is a test. this is a test. .

</body> </html> 

</source>


User-Interface Color Keywords

   <source lang="html4strict">

Color Keyword Description ActiveBorder Border of the active window. ActiveCaption Caption of the active window. AppWorkspace Background color of multiple document interface. Background Desktop background. ButtonFace Face color of three-dimensional display elements. ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source). ButtonShadow Shadow color for three-dimensional display elements. ButtonText Text on push buttons. CaptionText Text in caption, size box, and scrollbar arrow box. GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. Highlight Item(s) selected in a control. HighlightText Text of item(s) selected in a control. InactiveBorder Inactive window border. InactiveCaption Inactive window caption. InactiveCaptionText Color of text in an inactive caption. InfoBackground Background color for tooltip controls. InfoText Text color for tooltip controls. Menu Menu background. MenuText Text in menus. Scrollbar Scrollbar gray area. ThreeDDarkShadow Dark shadow for three-dimensional display elements. ThreeDFace Face color for three-dimensional display elements. ThreeDHighlight Highlight color for three-dimensional display elements. ThreeDLightShadow Light color for three-dimensional display elements (for edges facing the light source). ThreeDShadow Dark shadow for three-dimensional display elements. Window Window background. WindowFrame Window frame. WindowText Text in windows. 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/color&oldid=5933»