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

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

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/border&oldid=4953»