HTML/CSS/CSS Attributes and Javascript Style Properties/background
Содержание
- 1 "background" Example
- 2 background: gray
- 3 background: mistyrose
- 4 background: rgb( 128)
- 5 The background-color value can be a hexadecimal value
- 6 The background-color value can be a short hexadecimal value
- 7 The background-color value can be transparent keyword, which is also the default value.
- 8 The background shorthand property provides for specifying all five separate background properties in one single property.
"background" Example
<html>
<head>
</head>
<body>
<div style="background:blue url(http://www.wbex.ru/style/logo.png) repeat top left;
width:200;
border:3;
height:150; font-size:14">
background properties in a single line.
</div>
<br><br><br><br><br><br><br><br><br>
<div style="background-color:red;
background-attachment:fixed;
background-image:url(http://www.wbex.ru/style/logo.png);
background-repeat:repeat;
background-position-x:top;
background-position-y:left;
width:200;
border:3;
height:150;
font-size:14">
background properties are not set in a single line, which is more readable
and easy to change.
</div>
</body>
</html>
background: gray
<!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: 2.1em;
background: pink;
padding: 1em;
border: thin solid black;
}
p {
font-size: 0.9em;
padding: 1em;
border: thin solid black;
background: gray;
color: white;
}
</style>
</head>
<body>
<h1>
This is a heading
</h1>
<p>
This is a paragraph of text.
</p>
</body>
</html>
background: mistyrose
<!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>
<title>cursor</title>
<style rel="stylesheet" type="text/css">
div {
width: 50px;
height: 50px;
border: 1px solid rgb(234, 234, 234);
margin: 5px;
cursor: wait;
background: mistyrose;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background: rgb( 128)
<!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(123, 123, 123);
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>
The background-color value can be a hexadecimal value
<!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>
<title>background-color</title>
<style rel="stylesheet" type="text/css">
body {
background-color: pink;
line-height: 32px;
}
div {
border: 1px solid rgb(123, 123, 123);
background-color: #000000;
color: #ffffff;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div>asdf
</div>
</body>
</html>
The background-color value can be a short hexadecimal value
<!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>
<title>background-color</title>
<style rel="stylesheet" type="text/css">
body {
background-color: pink;
line-height: 32px;
}
div {
border: 1px solid rgb(0, 0, 0);
background-color: #fff;
color: #000;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div>asdf
</div>
</body>
</html>
The background-color value can be transparent keyword, which is also the default value.
<!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>
<title>background-color</title>
<style rel="stylesheet" type="text/css">
body {
background-color: pink;
line-height: 32px;
}
div {
border: 1px solid rgb(123, 123, 123);
background-color: transparent;
color: #000;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div>asdf
</div>
</body>
</html>
The background shorthand property provides for specifying all five separate background properties in one single property.
<!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>
<title>background</title>
<style rel="stylesheet" type="text/css">
div {
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
div#background {
background: white url("http://www.wbex.ru/style/logo.png") no-repeat scroll center center;
}
</style>
</head>
<body>
<div id="background">
</div>
</body>
</html>