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

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

"background" Example

   <source lang="html4strict">

<html> <head> </head> <body> 

           background properties in a single line.

           










           background properties are not set in a single line, which is more readable 
           and easy to change.

</body> </html> 


     </source>


background: gray

   <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" media="all">
           body {
               font-size: 12px;
           }
           h1 {
               font-size: 2.1em;
               background: pink;
               padding: 1em;
               border: thin solid black;
           }
           p {
               font-size: 0.9em;
               padding: 1em;
               border: thin solid black;
               background: gray;
               color: white;
           }
       </style>
   </head>
   <body>

This is a heading

This is a paragraph of text. 

   </body>

</html> 

</source>


background: mistyrose

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

div { 

   width: 50px;
   height: 50px;
   border: 1px solid rgb(234, 234, 234);
   margin: 5px;
   cursor: wait;
   background: mistyrose;

} 

       </style>
   </head>
   <body>

   </body>

</html> 

</source>


background: rgb( 128)

   <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" media="all">
           body {
               font-size: 12px;
           }
           h1 {
               font-size: 25px;
               background: rgb(123, 123, 123);
               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>

This is a heading

This is a paragraph of text. 

   </body>

</html> 

</source>


The background-color value can be a hexadecimal 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>background-color</title>
       <style rel="stylesheet" type="text/css">

body { 

   background-color: pink;
   line-height: 32px;

} div { 

    border: 1px solid rgb(123, 123, 123);
   background-color: #000000;
   color: #ffffff;
    width: 200px;
    height: 300px;

} 

       </style>
   </head>
   <body>
asdf 
   </body>

</html> 

</source>


The background-color value can be a short hexadecimal 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>background-color</title>
       <style rel="stylesheet" type="text/css">

body { 

   background-color: pink;
   line-height: 32px;

} div { 

    border: 1px solid rgb(0, 0, 0);
   background-color: #fff;
   color: #000;
    width: 200px;
    height: 300px;

} 

       </style>
   </head>
   <body>
asdf 
   </body>

</html> 

</source>


The background-color value can be transparent keyword, which is also the default 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>background-color</title>
       <style rel="stylesheet" type="text/css">

body { 

   background-color: pink;
   line-height: 32px;

} div { 

    border: 1px solid rgb(123, 123, 123);
    background-color: transparent;
    color: #000;
    width: 200px;
    height: 300px;

} 

       </style>
   </head>
   <body>
asdf 
   </body>

</html> 

</source>


The background shorthand property provides for specifying all five separate background properties in one single 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>background</title>
        <style rel="stylesheet" type="text/css">

div { 

   border: 1px solid black;
   width: 100px;
   height: 100px;
   margin: 10px;
   float: left;

} div#background { 

   background: white url("http://www.wbex.ru/style/logo.png") no-repeat scroll center center;

} 

        </style>
    </head>
    <body>

    </body>

</html> 

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