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

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

"border-width" Example

   <source lang="html4strict">

<html> <head> <style> .style1 { 

   border:5px solid #cccccc; 
   border-width:6px;

} .style2 { 

   border:"none"; 
   font-family:verdana; 
   font-weight:bold

} </style> </head> <body> Move mouse in and out to see the style change.

This is a div element.

</body> </html> 


     </source>


border-width: medium

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: black;
   border-style: solid;
   background: mistyrose;
   margin: 5px;

} div#medium { 

   border-width: medium;

} 

       </style>
   </head>
   <body>
medium
   </body>

</html> 

</source>


border width: medium solid black

   <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;
       }
     </style>
   </head>
   <body>

         border-width: medium;

   </body>
 </html>
</source>


border width shorthand with three values

   <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: thin medium thick;
           border-style: solid dashed dotted;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


border width shorthand with two values

   <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: thin thick;
           border-style: solid dotted;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


border-width: thick

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: black;
   border-style: solid;
   background: mistyrose;
   margin: 5px;

} div#thick { 

   border-width: thick;

} 

       </style>
   </head>
   <body>
thick
   </body>

</html> 

</source>


border width: thick solid black

   <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;
       }
     </style>
   </head>
   <body>

         border-width: thick;

   </body>
 </html>
</source>


border-width: thin

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: black;
   border-style: solid;
   background: mistyrose;
   margin: 5px;

} div#thin { 

   border-width: thin;

} 

       </style>
   </head>
   <body>
thin
   </body>

</html> 

</source>


border-width: thin medium 30px thick;

   <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: thin medium 30px thick;
                   border-style: solid dashed double dotted;
               }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


border-width: thin medium thick;

   <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: thin medium thick;
           border-style: solid dashed dotted;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


border width: thin solid black

   <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;
       }
     </style>
   </head>
   <body>

         border-width: thin;

   </body>
 </html>
</source>


border-width: thin thick;

   <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: thin thick;
           border-style: solid dotted;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>


Border width with four values

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: khaki;
   border-style: solid;
   background: lightyellow;
   margin: 5px;
   float: left;
   width: 50px;
   height: 50px;

} div#four { 

   border-width: 2px 4px 8px 10px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Border width with one value

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: khaki;
   border-style: solid;
   background: lightyellow;
   margin: 5px;
   float: left;
   width: 50px;
   height: 50px;

} div#one { 

   border-width: 4px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Border width with three values

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: khaki;
   border-style: solid;
   background: lightyellow;
   margin: 5px;
   float: left;
   width: 50px;
   height: 50px;

} div#three { 

   border-width: 2px 4px 8px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


Border width with two values

   <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-width</title>
       <style rel="stylesheet" type="text/css">

div { 

   padding: 3px;
   border-color: khaki;
   border-style: solid;
   background: lightyellow;
   margin: 5px;
   float: left;
   width: 50px;
   height: 50px;

} div#two { 

   border-width: 8px 4px;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/border_width&oldid=4853»