HTML/CSS/Box Model/border

Материал из Web эксперт
Версия от 08:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add border for different columns together

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
  #leftcontent {
    position: absolute;
    left:1%;
    width:20%;
    top:50px;
    background:#eee;
  }
  #centerleftcontent {
    position: absolute;
    left:22%;
    width:28%;
    top:50px;
    background:#fff;
  }
  #centerrightcontent {
    position: absolute;
    left:51%;
    width:28%;
    top:50px;
    background:#ccc;
    }
  #rightcontent {
    position: absolute;
    left:80%;
    width:19%;
    top:50px;
    background:#ddd;
    }
  
  #rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {
    border:1px solid #000;
    }
    
  p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    
  
  
</style>
</head><body>
<div id="banner"><h1>4 columns, all fluid</div>
<div id="leftcontent">
  <h1>leftcontent</h1>
  <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. </p>
</div>
<div id="centerleftcontent">
  <h1>centerleftcontent</h1>
  <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. </p>
</div>
<div id="centerrightcontent">
  <h1>centerrightcontent</h1>
  <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. </p>
</div>
<div id="rightcontent">
  <h1>rightcontent</h1>
  <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. </p>
</div>
</body>
</html>



Body border: 50px #666 ridge

 
<!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">
body {
 margin: 0;
 padding: 1.5em;
 border: 50px #666 ridge;
}
</style>
</head>
<body>
  <h2>H</h2> 
  <h2>N</h2> 
  <h2>V</h2> 
  <p>Text Text</p>
  
</body>
</html>



border: 40px double black; creates a black, 40-pixel, double-line border.

 
<html>
<head>
<title></title>
<style type="text/css">
  #navigation {
   border: 40px double black;
  }
</style>
</head>
<body>
  <ul id="navigation">
    <li class="warning"><a href="http://www.wbex.ru">A</a></li>
    <li><a href="http://www.wbex.ru">B</a></li>
    <li><a href="http://www.wbex.ru">C</a></li>
  </ul>
</body>
</html>



Border cascade

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Property Inheritance </title>
        <style type="text/css">
      ul li {
          border: thin solid black;
      }
      li#navigation {
          border: thick solid black;
      }
        </style>
    </head>
  <body>
    <ul>
        <li> This list item has a thin border around it. </li>
        <li id="navigation"> This list item has a thick border around it. </li>
    </ul>
  </body>
</html>



Border direction

 
<!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>
h1 {
    border-style: solid;
    border-top-width: thin;
    border-right-width: medium;
    border-bottom-width: thick;
    border-left-width: 25px;
    border-right-color: #ffcc33;
    border-top-color: #33ff33;
}

</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>



border:none is the default.

 
<!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;
    background: yellow;  
}
</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>



border property, can be used to specify border-width, border-style, and border-color for all four sides at once.

 
<!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#shorthand {
    border: 1px solid crimson;
    padding: 5px;
}
        
        </style>
    </head>
    <body>
        <div id="shorthand">
            border
        </div>
    </body>
</html>



border sets the size, pattern, and color of the border surrounding the padding.

 
<!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">
* .box {
  display: static;
  overflow: visible;
  visibility: visible;
  width: 160px;
  height: 150px;
  padding: 30px;
  border-top: 30px solid gray;
  border-bottom: 30px solid black;
  border-left: 30px solid gray;
  border-right: 30px solid black;
  margin-left: 230px;
  margin-top: 80px;
  background-color: #ccc;
}
</style>
</head>
<body>

<h1>Box Model</h1> 
<div class="box"></div> 
</body> 
</html>



border shortcut property takes three space-delimited values that represent the border"s width, style, and color.

 

<html>
<head>
<title></title>
<style type="text/css">
  #navigation {
   border: 40px double black;
  }
</style>
</head>
<body>
  <ul id="navigation">
    <li class="warning"><a href="http://www.wbex.ru">Apples</a></li>
    <li><a href="http://www.wbex.ru">Bananas</a></li>
    <li><a href="http://www.wbex.ru">Cherries</a></li>
  </ul>
</body>
</html>



Border shortcut setting

 

<!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-top, border-right, border-bottom, border-left, border
        </title>
        <style rel="stylesheet" type="text/css">
div {
    margin: 5px;
    float: left;
    width: 56px;
    height: 56px;
}
div#border {
    border: 1px dashed darkkhaki;
}
     
        </style>
    </head>
    <body>
        <div id="border"></div>
       
    </body>
</html>



Border"s width cannot be negative because they are inside the margin.

 

<!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;
    border: -10px dotted black;
    background: yellow;  
}
</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>



border: thick 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: thick solid black;">
          border-width: thick;
      </div>
    </body>
  </html>



Border with specific setting for four directions

 

<!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-top, border-right, border-bottom, border-left, border
        </title>
        <style rel="stylesheet" type="text/css">
div {
    margin: 5px;
    float: left;
    width: 56px;
    height: 56px;
}
div#properties {
    border-top: 1px solid darkkhaki;
    border-right: 1px dashed darkkhaki;
    border-bottom: 1px solid darkkhaki;
    border-left: 1px dashed darkkhaki;
    background: lightyellow;
}
     
        </style>
    </head>
    <body>
        <div id="properties"></div>
       
    </body>
</html>



Combined style

 
<?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">
         div     { text-align: center;
                   margin-bottom: 1em;
                   padding: .5em }
         .thick  { border-width: thick }
 
         .medium { border-width: medium }
         .thin   { border-width: thin }
         .groove { border-style: groove }
         .inset  { border-style: inset }
         .outset { border-style: outset }
         .red    { border-color: red }
         .blue   { border-color: blue }
      </style>
   </head>
   <body>
      <div class = "thick groove">this is a test. </div>
      <div class = "medium groove">this is a test. </div>
      <div class = "thin groove">this is a test. </div>
      <p class = "thin red inset">this is a test. </p>
      <p class = "medium blue outset">this is a test. </p>
   </body>
</html>



Set border to "3px dotted #33333;"

 
<!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 {
 border: 3px dotted #33333;
}
p {
 margin: 0;
 padding: 10px 0 0 0;
}
</style>
</head>
<body>
  <h2>Designing Instant Gratification</h2>
  <p>This is a test.</p>
</body>
</html>



This paragraph has a 1 pixel thick, solid black border around it.

 
<!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 {
            border: 1px solid black;
        }
            </style>
        </head>
        <body>
      <p>
         This is a test.  
      </p>
        </body>
    </html>



Use nested border

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Telling Real from Counterfeit</title>
<style type="text/css">
body {
  margin: 3.5%;
  color: #030;
  background: #ffc;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.05em;
}
body div {
  border-style: groove;
  border-width: 8px;
  border-color: green;
}
body div div {
  margin: 0.25em;
  padding: 0 1em 0.5em;
  border-style: double;
  border-width: 8px;
  border-color: olive;
  background: transparent;
}
h1 {
  color: green;
  background-color: #ffc;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.75em;
  text-align: center;
  border-top: 0;
}
h2 {
  color: #606;
  background: #ffc;
  font-family: Arial, sans-serif;
}
address {
  font-family: Garamond, serif;
  text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<h1>Header</h1>
<hr>
<address>
A<br>
E-Mail: <a href="mailto:a@m.ru">a@m.ru</a><br>
Web Address: <a href="">http://www.m.ru</a>
</address>
</div>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border&oldid=5301»