HTML/CSS/Box Model/background color

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

Background color matching for different building blocks

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

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

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

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">

body { 

 margin: 0px;
 padding: 0px;
 color: #000;
 background-color: #ccc;

} .myStyle { 

 float: left;
 padding: 10px;
 margin: 5px;
 background-color: #fff;
 border: 1px solid #000;
 width: 20%;

} p { 

 margin: 5px;
 padding: 10px;
 background-color: #fff;

} 

 </style>

</head> <body>

1

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

</body>

</html> 

</source>


background-color:rgb(100%,100%,100%); assigns the CSS function rgb() to background-color.

   <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 { 

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

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

CSS syntax is EASY!

</body> </html> 

</source>


background-color:rgb(255,255,255); assigns white to the background-color.

   <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; 
  background-color:rgb(255,255,255);

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

CSS syntax is EASY!

</body> </html> 

</source>


background-color: white

   <source lang="html4strict">

<html> <head> <title>The background-color Property</title> <style> body { 

 background-color: rgb(35%, 35%, 85%);

} h1 { 

 background-color: white;

} p { 

 font-size: 1.2em;
 background-color: white;

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

Background Color Transparency

default value
"transparent"
</body> </html> </source>

background-color:white; assigns the constant value white to the background-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; 
  background-color:white;

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

<p>CSS syntax is EASY!

</body> </html> 

</source>


background-color:WindowInfoBackground; assigns the operating system color WindowInfoBackground to background-color.

   <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; 
  background-color:WindowInfoBackground;

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

CSS syntax is EASY!

</body> </html> 

</source>


body background color

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <style> body { 

   font: 24px Verdana, Arial, Helvetica, sans-serif;
   color: #ffffff;
   background-color: #ff6633;

}

</style> </head> <body>

header 1

Do you now?

block quote.

Did you now?

</body> </html> 

</source>


Set background to black

   <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"> <head> <title>Set background to black</title> <style type="text/css"> p:first-letter { 

font-size: 1.2em;
background-color: black;
color: white;

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

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

</body> </html> 

</source>


Use background color as the divider

   <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 rel="stylesheet" type="text/css">

body, div, p { 

 font-family: verdana, arial, helvetica, sans-serif;
 color: #000;

} body { 

 margin: 0px;
 padding: 0px;
 background-color: #ccc;

} p { 

 font-size: 0.7em;
 line-height: 1.4em;

}

  1. content {
 padding: 10px;
 margin-top: 5px;
 margin-bottom: 0px;
 margin-right: auto;
 margin-left: auto;
 background-color: #fff;
 border: 1px solid #ccc;
 width: 90%;

} .innerBox { 

 padding: 0px 10px 0px 10px;
 margin: 0px;
 border: 1px solid #000;

}

  1. navBar {
 padding: 0px 10px 0px 10px;
 margin-top: 0px;
 margin-bottom: 5px;
 margin-right: auto;
 margin-left: auto;
 background-color: #fff;
 border: 1px solid #ccc;
 text-align: right;
 width: 90%;

} .nav { 

 margin-top: 0px;
 margin-bottom: 5px;

}

</style> <meta http-equiv="content-type"content="text/html;charset=iso-8859-1"/> </head> <body>

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

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

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

</body> </html> 

</source>


Use background color to highlight DIV section

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

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

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

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">

body { 

 margin: 0px;
 padding: 0px;
 color: #000;
 background-color: #ccc;

} .myStyle { 

 padding: 10px;
 margin: 5px;
 background-color: #fff;
 border: 1px solid #000;

} 

 </style>

</head> <body>

1
2
3
4

</body> </html> 

</source>


Use background-color:transparent for a transparent background color.

   <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"> <head> <title></title> <style type="text/css"> .container{ 

   position: relative;
   width: 800px;
   height: 800px;
   background: pink;

}

  • .box {
 float: right;
 overflow: auto;
 visibility: visible;
 width: auto;
 height: 100px;
 margin: 10px;
 padding: 10px;
 background: red;

}

  • .small {
   position: absolute;
   padding-left: 10px;
   background: transparent;

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

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

</body> </html> 

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