HTML/CSS/CSS Attributes and Javascript Style Properties/border
Содержание
- 1 border: 1em solid black
- 2 "border" Example
- 3 border: medium solid black
- 4 border: thin solid black
- 5 border: thin solid rgb(
- 6 border width, border style shorthand four values
- 7 border width, border style shorthand one value
- 8 border width, border style shorthand, three values
- 9 border width, border style shorthand two values
border: 1em solid black
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> em measurement </title>
<style type="text/css" media="all">
body {
border: 1em solid black;
margin: 0;
padding: 10px;
}
div {
font-size: 24px;
height: 3em;
border: 1em solid black;
}
</style>
</head>
<body>
The body"s border is 1em thick.
<div>
This font is 24 pixels tall and this div is 3 ems tall,
</div>
</body>
</html>
"border" Example
<html>
<head>
<style>
.style1 { border:3px solid blue; }
.style2 { border:"none";}
</style>
</head>
<body>
<div id="myL"
style="width:500;
height:500;
background-color:beige"
onmouseover="this.className="style1""
onmouseout="this.className="style2"">
This is a div element.
</div>
</body>
</html>
border: medium solid black
<!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">
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div style="border: medium solid black;">
border-width: medium;
</div>
</body>
</html>
border: thin solid black
<!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">
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div style="border: thin solid black;">
border-width: thin;
</div>
</body>
</html>
border: thin solid rgb(
<!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>
border width, border style shorthand four values
<!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">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin medium 30px thick;
border-style: solid dashed double dotted;
}
</style>
</head>
<body>
<p>
I hear and I forget. I see and I remember. I do and I understand.
- Confucius
</p>
</body>
</html>
border width, border style shorthand one value
<!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">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thick;
border-style: dotted;
}
</style>
</head>
<body>
<p>
I hear and I forget. I see and I remember. I do and I understand.
- Confucius
</p>
</body>
</html>
border width, border style shorthand, three values
<!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">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin medium thick;
border-style: solid dashed dotted;
}
</style>
</head>
<body>
<p>
I hear and I forget. I see and I remember. I do and I understand.
- Confucius
</p>
</body>
</html>
border width, border style shorthand two values
<!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">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin thick;
border-style: solid dotted;
}
</style>
</head>
<body>
<p>
this is a test. this is a test.
</p>
</body>
</html>