в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:40Z

1 версия

Новая страница

==All border styles==



<source lang="html4strict">

<!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;
border: thick black;
}
</style>
</head>
<body>
<div style="border-style: hidden;">
border-style: hidden;
</div>
<div style="border-style: dotted;">
border-style: dotted;
</div>
<div style="border-style: dashed;">
border-style: dashed;
</div>
<div style="border-style: solid;">
border-style: solid;
</div>
<div style="border-style: double;">
border-style: double;
</div>
<div style="border-style: groove;">
border-style: groove;
</div>
<div style="border-style: ridge;">
border-style: ridge;
</div>
<div style="border-style: inset;">
border-style: inset;
</div>
<div style="border-style: outset;">
border-style: outset;
</div>
<div style="border-style: none;">
border-style: none;
</div>
</body>
</html>
</source>

==border-style: dashed==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#dashed {border-style: dashed;}

</style>
</head>
<body>
<div id="dashed">dashed</div>
</body>
</html>
</source>

==border-style: dotted==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#dotted {border-style: dotted;}

</style>
</head>
<body>
<div id="dotted">dotted</div>
</body>
</html>
</source>

==border-style: double==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#double {border-style: double;}

</style>
</head>
<body>
<div id="double">double</div>
</body>
</html>
</source>

==border-style: groove==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#groove {border-style: groove;}

</style>
</head>
<body>
<div id="groove">groove</div>
</body>
</html>
</source>

==border-style: hidden;==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;

background: red;
}
div#hidden {border-style: hidden;}

</style>
</head>
<body>
<div id="hidden">hidden</div>
</body>
</html>
</source>

==border-style: inset==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#inset {border-style: inset; }

</style>
</head>
<body>

<div id="inset">inset</div>
</body>
</html>
</source>

==border-style: none==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#none {border-style: none; }

</style>
</head>
<body>

<div id="none">none</div>
</body>
</html>
</source>

==border-style: outset==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#outset {border-style: outset;}

</style>
</head>
<body>

<div id="outset">outset</div>
</body>
</html>
</source>

==border-style: ridge==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#ridge {border-style: ridge; }

</style>
</head>
<body>
<div id="ridge">ridge</div>
</body>
</html>
</source>

==Border styles, color and size==



<source lang="html4strict">

<html>
<head>
<title>Border Samples</title>
<style>
body {
background-color: rgb(50%, 50%, 50%);
font-size: 1.1em;
color: yellow;
}
.dotted {
border-color: yellow;
border-width: medium;
border-style: dotted;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.dashed {
border-color: yellow;
border-width: medium;
border-style: dashed;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.solid {
border-color: yellow;
border-width: medium;
border-style: solid;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.double {
border-color: yellow;
border-width: medium;
border-style: double;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.groove {
border-color: yellow;
border-width: medium;
border-style: groove;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.ridge {
border-color: yellow;
border-width: medium;
border-style: ridge;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.inset {
border-color: yellow;
border-width: medium;
border-style: inset;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
.outset {
border-color: yellow;
border-width: medium;
border-style: outset;
margin-right: 75%;
text-align: center;
margin-left: 10%;
}
</style>
</head>
<body>
<p class="dotted">Dotted</p>
<p class="dashed">Dashed</p>
<p class="solid">Solid</p>
<p class="double">Double</p>
<p class="groove">Groove</p>
<p class="ridge">Ridge</p>
<p class="inset">Inset</p>
<p class="outset">Outset</p>
<hr />
</body>
</html>
</source>

==border-style: solid==



<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" xml:lang="en">
<head>
<title>border-style</title>
<style rel="stylesheet" type="text/css">
div {
padding: 3px;
border-color: crimson;
border-width: 3px;
margin: 5px;
float: left;
width: 50px;
height: 50px;
}
div#solid {border-style: solid; }

</style>
</head>
<body>
<div id="solid">solid</div>
</body>
</html>
</source>

==border-style: solid dashed double dotted==



<source lang="html4strict">

<!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: 5px 6px 7px 8px;
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>
</source>

==Individual border-style properties can be combined into a single property.==



<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" xml:lang="en">
<head>
<title>border</title>
<style rel="stylesheet" type="text/css">
div#border-style {
border-style: solid dashed double inset;
}

</style>
</head>
<body>
<div id="border-style">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
</source>

==Shading border for paragraph==



<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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
div {
padding: 10px;
margin-bottom: 15px;
border: 2px solid black;
}
p {
margin-top: 0px;
margin-bottom: 10px;
padding-right: 5px;
background-color: gold;
padding-top: 5px;
padding-bottom: 5px;
border-left: 1px solid gray;
border-right: 2px solid black;
border-top: 1px solid gray;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<div>
<p>Normal Paragraph</p>
</body>
</html>
</source>

==Use different border style to highlight==



<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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>A Web page</title>
<style type="text/css" media="Screen">
body {
background-color: black;
font-family: Georgia, serif;
}
p {
font-family: Georgia, serif;
font-size: 13px;
color: white;
padding-left: 25px;
}
.large {
font-size: 130%;
border: 1px dotted white;
padding: 5px;
}
.small {
font-size: 90%;
border: 2px dashed #555;
padding: 10px;
}
</style>
</head>
<body>
<p>Another paragraph, with <span class="large"><em>large italic</em></span> and <span class="small"><strong>small bold</strong></span> text, also in Verdana.</p>
</body>
</html>
</source>

==Various border-styles==



<source lang="html4strict">

<?xml version = "1.0"?>
<!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>Borders</title>
<style type = "text/css">
body { background-color: #ccffcc }
div { text-align: center;
margin-bottom: .3em;
width: 50%;
position: relative;
left: 25%;
padding: .3em }
</style>
</head>
<body>
<div style = "border-style: solid">Solid border</div>
<div style = "border-style: double">Double border</div>
<div style = "border-style: groove">Groove border</div>
<div style = "border-style: ridge">Ridge border</div>
<div style = "border-style: inset">Inset border</div>
<div style = "border-style: outset">Outset border</div>
</body>
</html>
</source>

==When no border-color is specified, the border color is the value of the color property.==



<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" xml:lang="en">
<head>
<title>border</title>
<style rel="stylesheet" type="text/css">
div#color-default {
color: crimson;
border-style: solid dotted;
}

</style>
</head>
<body>
<div id="color-default">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Box Model/border style - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия