HTML/CSS/CSS Attributes and Javascript Style Properties/border top — различия между версиями

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

Версия 12:20, 26 мая 2010

border-top: 3px double red

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

  • .myStyle {
 border-top: 3px double red;

} </style> </head> <body>

border: Over 7  

</body> </html> 

</source>


border-top: 4px groove blue

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

  • .myStyle {
 border-top: 4px groove blue;

} </style> </head> <body>

border: Over 8  

</body> </html> 

</source>


border-top: 6px ridge green

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

  • .myStyle {
 border-top: 6px ridge green;

} </style> </head> <body>

border: Over 9  

</body> </html> 

</source>


"border-top" Example

   <source lang="html4strict">

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

   border:5px solid #cccccc; 
   border-top:5px solid red; 
   font-family:verdana; 
   font-weight:bold

} .style2 { 

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

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

This is a div element.

</body> </html> 


     </source>


Four shorthand properties can be used to specify border-width,border-style, and border-color in just one 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#shorthand-sides { 

   border-top: 1px solid pink;
   border-right: 1px solid crimson;
   border-bottom: 1px solid pink;
   border-left: 1px solid crimson;
   padding: 5px;

} 

       </style>
   </head>
   <body>

           border-top, border-right, border-bottom, border-left

   </body>

</html> 

</source>


The top border of this paragraph has a medium width and the color specified for text.

   <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 {
           border-top: solid;
       }
           </style>
       </head>
       <body>

This is a test. 

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


The top border of this paragraph has is 1 pixel width, solid and 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">
       p {
           border-top: 1px solid black;
       }
           </style>
       </head>
       <body>

This is a test. 

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


The top border of this paragraph is of medium thickness.

   <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 {
           border-top: solid black;
       }
           </style>
       </head>
       <body>

This is a test. 

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


The top border of this paragraph is the same color as the text color.

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

This is a test. 

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