HTML/CSS/CSS Attributes and Javascript Style Properties/color
Версия от 09:20, 26 мая 2010; (обсуждение)
color:black
<html>
<head>
<style>
p.center {text-align:center;color:black;}
</style>
<title>Chapter Two, XHTML and CSS</title>
</head>
<body>
<p class="center">It is easy to use XHTML</p>
</body>
</html>
"color" Example
<html>
<head>
<style>
.style1 {
font-family:verdana;
color:purple
}
</style>
</head>
<body>
<p class="style1">A color text.</p>
</body>
</html>
color: lime
<html>
<head>
<title></title>
<style type="text/css">
h1 {font-family: arial; color: navy;
background-color: yellow;}
h1.red {font-family: "Times New Roman";
color: red;
background-color: black;}
h1.white {font-family: "Times New Roman";
color: white;
background-color: green}
h1.lime {font-family: arial;
font-style: italic;
color: lime;
background-color: olive}
p.blackback {font-family: arial;
font-style: italic;
font-weight: bold;
color: powderblue;
background-color: black;}
p.yellowbk {background-color: yellow;
font-size: 16pt}
p.red {font-weight: light;
color: #ff0000;
text-align: center;
font-size: 32pt;}
</style>
</head>
<body>
<p><h1>basic headline.</h1></p>
<p><h1 class="red">red headline.</h1></p>
<p><h1 class="white">my white headline.</h1></p>
<p><h1 class="lime">my lime headline.</h1></p>
<p class="blackback">a sample of the blackback style.</p>
<p class="yellowbk">how yellowbk looks.</p>
<p class="red">red, centered font.</p>
<p>An unmodified paragraph.</p>
</body>
</html>
color: rgb( 255)
<!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" media="all">
body {
font-size: 12px;
}
h1 {
font-size: 25px;
background: rgb(255, 192, 203);
padding: 25px;
border: thin solid rgb(0, 0, 0);
}
p {
font-size: 11px;
padding: 11px;
border: thin solid rgb(0, 0, 0);
background: rgb(128, 128, 128);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>
This is a heading
</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
Named colors
<HTML>
<HEAD>
<TITLE>A Chart of the Named Colors</TITLE>
<STYLE TYPE="text/css">
td {
font-size:1.2em; font-weight:500;
}
table {
Text-Align : Center
}
td.wt {
Color : white ;
Font-Weight : 500
}
</STYLE>
</HEAD>
<BODY BGCOLOR="black">
<P ALIGN="CENTER"><FONT SIZE="5" COLOR="silver">The Netscape Named Colors</FONT>
<DIV ALIGN="CENTER">
<P>
<TABLE BORDER="1" WIDTH="80%" cellpadding="5">
<TR>
<TD WIDTH="25%" BGCOLOR="aliceblue">aliceblue</TD>
<TD WIDTH="25%" BGCOLOR="antiquewhite">antiquewhite</TD>
<TD WIDTH="25%" BGCOLOR="aqua">aqua</TD>
<TD WIDTH="25%" BGCOLOR="aquamarine">aquamarine</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="azure">azure</TD>
<TD WIDTH="25%" BGCOLOR="beige">beige</TD>
<TD WIDTH="25%" BGCOLOR="bisque">bisque</TD>
<TD WIDTH="25%" BGCOLOR="blanchedalmond">blanchedalmond</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="blue" class="wt">blue</TD>
<TD WIDTH="25%" BGCOLOR="blueviolet">blueviolet</TD>
<TD WIDTH="25%" BGCOLOR="brown">brown</TD>
<TD WIDTH="25%" BGCOLOR="burlywood">burlywood</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="cadetblue">cadetblue</TD>
<TD WIDTH="25%" BGCOLOR="chartreuse">chartreuse</TD>
<TD WIDTH="25%" BGCOLOR="chocolate">chocolate</TD>
<TD WIDTH="25%" BGCOLOR="coral">coral</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="cornflowerblue">cornflowerblue</TD>
<TD WIDTH="25%" BGCOLOR="cornsilk">cornsilk</TD>
<TD WIDTH="25%" BGCOLOR="crimson">crimson</TD>
<TD WIDTH="25%" BGCOLOR="aqua">cyan</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="darkblue" class="wt">darkblue</TD>
<TD WIDTH="25%" BGCOLOR="darkcyan">darkcyan</TD>
<TD WIDTH="25%" BGCOLOR="darkgoldenrod">darkgoldenrod</TD>
<TD WIDTH="25%" BGCOLOR="darkgray">darkgray</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="darkgreen" class="wt">darkgreen</TD>
<TD WIDTH="25%" BGCOLOR="darkkhaki">darkkhaki</TD>
<TD WIDTH="25%" BGCOLOR="darkmagenta">darkmagenta</TD>
<TD WIDTH="25%" BGCOLOR="darkolivegreen" class="wt">darkolivegreen</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="darkorange">darkorange</TD>
<TD WIDTH="25%" BGCOLOR="darkorchid">darkorchid</TD>
<TD WIDTH="25%" BGCOLOR="darkred">darkred</TD>
<TD WIDTH="25%" BGCOLOR="darksalmon">darksalmon</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="darkseagreen">darkseagreen</TD>
<TD WIDTH="25%" BGCOLOR="darkslateblue" class="wt">darkslateblue</TD>
<TD WIDTH="25%" BGCOLOR="darkslategray" class="wt">darkslategray</TD>
<TD WIDTH="25%" BGCOLOR="darkturquoise">darkturquoise</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="darkviolet">darkviolet</TD>
<TD WIDTH="25%" BGCOLOR="deeppink">deeppink</TD>
<TD WIDTH="25%" BGCOLOR="deepskyblue">deepskyblue</TD>
<TD WIDTH="25%" BGCOLOR="dimgray" class="wt">dimgray</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="dodgerblue">dodgerblue</TD>
<TD WIDTH="25%" BGCOLOR="firebrick">firebrick</TD>
<TD WIDTH="25%" BGCOLOR="floralwhite">floralwhite</TD>
<TD WIDTH="25%" BGCOLOR="forestgreen">forestgreen</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="fuchsia">fuchsia</TD>
<TD WIDTH="25%" BGCOLOR="gainsboro">gainsboro</TD>
<TD WIDTH="25%" BGCOLOR="ghostwhite">ghostwhite</TD>
<TD WIDTH="25%" BGCOLOR="gold">gold</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="goldenrod">goldenrod</TD>
<TD WIDTH="25%" BGCOLOR="gray">gray</TD>
<TD WIDTH="25%" BGCOLOR="green">green</TD>
<TD WIDTH="25%" BGCOLOR="greenyellow">greenyellow</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="honeydew">honeydew</TD>
<TD WIDTH="25%" BGCOLOR="hotpink">hotpink</TD>
<TD WIDTH="25%" BGCOLOR="indianred">indianred</TD>
<TD WIDTH="25%" BGCOLOR="indigo" class="wt">indigo</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="ivory">ivory</TD>
<TD WIDTH="25%" BGCOLOR="khaki">khaki</TD>
<TD WIDTH="25%" BGCOLOR="lavender">lavender</TD>
<TD WIDTH="25%" BGCOLOR="lavenderblush">lavenderblush</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="lawngreen">lawngreen</TD>
<TD WIDTH="25%" BGCOLOR="lemonchiffon">lemonchiffon</TD>
<TD WIDTH="25%" BGCOLOR="lightblue">lightblue</TD>
<TD WIDTH="25%" BGCOLOR="lightcoral">lightcoral</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="lightcyan">lightcyan</TD>
<TD WIDTH="25%" BGCOLOR="lightgoldenrodyellow">lightgoldenrodyellow</TD>
<TD WIDTH="25%" BGCOLOR="lightgreen">lightgreen</TD>
<TD WIDTH="25%" BGCOLOR="lightgrey">lightgrey</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="lightpink">lightpink</TD>
<TD WIDTH="25%" BGCOLOR="lightsalmon">lightsalmon</TD>
<TD WIDTH="25%" BGCOLOR="lightseagreen">lightseagreen</TD>
<TD WIDTH="25%" BGCOLOR="lightskyblue">lightskyblue</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="lightslategray">lightslategray</TD>
<TD WIDTH="25%" BGCOLOR="lightsteelblue">lightsteelblue</TD>
<TD WIDTH="25%" BGCOLOR="lightyellow">lightyellow</TD>
<TD WIDTH="25%" BGCOLOR="lime">lime</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="limegreen">limegreen</TD>
<TD WIDTH="25%" BGCOLOR="linen">linen</TD>
<TD WIDTH="25%" BGCOLOR="fuchsia">magenta</TD>
<TD WIDTH="25%" BGCOLOR="maroon" class="wt">maroon</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="mediumaquamarine">mediaumaquamarine</TD>
<TD WIDTH="25%" BGCOLOR="mediumblue" class="wt">mediumblue</TD>
<TD WIDTH="25%" BGCOLOR="mediumorchid">mediumorchid</TD>
<TD WIDTH="25%" BGCOLOR="mediumpurple">mediumpurple</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="mediumseagreen">mediumseagreen</TD>
<TD WIDTH="25%" BGCOLOR="mediumslateblue">mediumslateblue</TD>
<TD WIDTH="25%" BGCOLOR="mediumvioletred">mediumvioletred</TD>
<TD WIDTH="25%" BGCOLOR="midnightblue" class="wt">midnightblue</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="mintcream">mintcream</TD>
<TD WIDTH="25%" BGCOLOR="mistyrose">mistyrose</TD>
<TD WIDTH="25%" BGCOLOR="moccasin">moccasin</TD>
<TD WIDTH="25%" BGCOLOR="navajowhite">navajowhite</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="navy" class="wt">navy</TD>
<TD WIDTH="25%" BGCOLOR="oldlace">oldlace</TD>
<TD WIDTH="25%" BGCOLOR="olive">olive</TD>
<TD WIDTH="25%" BGCOLOR="olivedrab">olivedrab</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="orange">orange</TD>
<TD WIDTH="25%" BGCOLOR="orangered">orangered</TD>
<TD WIDTH="25%" BGCOLOR="orchid">orchid</TD>
<TD WIDTH="25%" BGCOLOR="palegoldenrod">palegoldenrod</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="palegreen">palegreen</TD>
<TD WIDTH="25%" BGCOLOR="paleturquoise">paleturquoise</TD>
<TD WIDTH="25%" BGCOLOR="palevioletred">palevioletred</TD>
<TD WIDTH="25%" BGCOLOR="papayawhip">papayawhip</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="peachpuff">peachpuff</TD>
<TD WIDTH="25%" BGCOLOR="peru">peru</TD>
<TD WIDTH="25%" BGCOLOR="pink">pink</TD>
<TD WIDTH="25%" BGCOLOR="plum">plum</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="powderblue">powderblue</TD>
<TD WIDTH="25%" BGCOLOR="red">red</TD>
<TD WIDTH="25%" BGCOLOR="rosybrown">rosybrown</TD>
<TD WIDTH="25%" BGCOLOR="royalblue">royalblue</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="saddlebrown">saddlebrown</TD>
<TD WIDTH="25%" BGCOLOR="salmon">salmon</TD>
<TD WIDTH="25%" BGCOLOR="sandybrown">sandybrown</TD>
<TD WIDTH="25%" BGCOLOR="seagreen">seagreen</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="seashell">seashell</TD>
<TD WIDTH="25%" BGCOLOR="sienna">sienna</TD>
<TD WIDTH="25%" BGCOLOR="silver">sliver</TD>
<TD WIDTH="25%" BGCOLOR="skyblue">skyblue</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="slateblue">slateblue</TD>
<TD WIDTH="25%" BGCOLOR="slategray">slategray</TD>
<TD WIDTH="25%" BGCOLOR="snow">snow</TD>
<TD WIDTH="25%" BGCOLOR="springgreen">springgreen</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="steelblue">steelblue</TD>
<TD WIDTH="25%" BGCOLOR="tan">tan</TD>
<TD WIDTH="25%" BGCOLOR="teal">teal</TD>
<TD WIDTH="25%" BGCOLOR="thistle">thistle</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="tomato">tomato</TD>
<TD WIDTH="25%" BGCOLOR="turquoise">turquoise</TD>
<TD WIDTH="25%" BGCOLOR="violet">violet</TD>
<TD WIDTH="25%" BGCOLOR="wheat">wheat</TD>
</TR>
<TR>
<TD WIDTH="25%" BGCOLOR="white">white</TD>
<TD WIDTH="25%" BGCOLOR="whitesmoke">whitesmoke</TD>
<TD WIDTH="25%" BGCOLOR="yellow">yellow</TD>
<TD WIDTH="25%" BGCOLOR="yellowgreen">yellowgreen</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>