HTML/CSS/Box Model/background color

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

Background color matching for different building blocks

 

<?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>
  <div class="myStyle">1</div>
  <p>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. </p>
</body>

</html>



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

 
<!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> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



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

 

<!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> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



background-color: white

 

<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>
<h1>Background Color Transparency</h1>
<p>default value<br />
&quot;transparent&quot; <br />
</body>
</html>



background-color:white; assigns the constant value white to the background-color property.

 
<!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 <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



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

 
<!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> 
<p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> 
</body> 
</html>



body background color

 
<!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>
<h1>header 1</h1>
<p>Do you now?</p>
<p><blockquote>block quote.</blockquote></p>
<p>Did you now?</p>
</body>
</html>



Set background to black

 
<!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>
  <p>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. </p>
</body>
</html>



Use background color as the divider

 
<!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;
}
#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;
}
#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>
<div id="content">
<p>this is a test. this is a test. this is a test. .</p>
<div class="innerBox">
<p>this is a test. this is a test. this is a test. this is a test. .</p>
</div>
<p>this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="navBar">
<p class=nav>&lt;back |home |next&gt;</p>
</div>
</body>
</html>



Use background color to highlight DIV section

 
<?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>
  <div class="myStyle">1</div>
  <div class="myStyle">2</div>
  <div class="myStyle">3</div>
  <div class="myStyle">4</div>
</body>
</html>



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

 
<!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>
  <div class="container"> 
    <div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> 
    <div class="box">this is a test</div> 
  </div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/background_color&oldid=5287»