HTML/CSS/CSS Attributes and Javascript Style Properties/border bottom

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

border-bottom: 1px dotted black

 

<!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">
* .myStyle {
  border-bottom: 1px dotted black;
}
</style>
</head>
<body>
<p> 
    <code>border</code>: 
    <span class="myStyle">Under 5</span> &nbsp; 
</p> 
</body>
</html>



border-bottom: 1px solid black

 

<!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">
* .myStyle {
  border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p> 
    <code>border</code>: 
    <span class="myStyle">Under 4</span> &nbsp; 
</p> 
</body>
</html>



border-bottom: 2px dashed gray

 

<!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">
* .myStyle {
  border-bottom: 2px dashed gray;
}
</style>
</head>
<body>
<p> 
    <code>border</code>: 
    <span class="myStyle">Under 6</span> &nbsp; 
</p> 
</body>
</html>



"border-bottom" Example

    
<html>
<head>
<style>
.style1 { 
    border:5px solid #cccccc; 
    border-bottom:5px solid red; 
    font-family:verdana; 
    font-weight:bold
}
.style2 { 
    border:"none"; 
    border-bottom:15px solid blue; 
    font-family:verdana; 
    font-weight:bold 
}
</style>
</head>
<body>
<div id="myL" 
     style="width:500; 
     height:500; 
     background-color:yellow"
     onmouseover="this.className="style1""
     onmouseout="this.className="style2"">This is a div element.
</div>
</body>
</html>



Set border-bottom shortcut: 10px solid #666;

 
<!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">
h2 { 
 background-image: url(tall_grass.jpg);
 background-repeat: repeat-x;
 background-position: bottom;
 border-bottom: 10px solid #666;
 margin: 10px 0 0 0;
 padding: 0.5em 0 60px 0;
}
</style>
</head>
<body>
  <h2>This is a header</h2>
  <p>This is a text.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/border_bottom&oldid=4975»