HTML/CSS/HTML/style

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

Declaring a style sheet in the header section

   <source lang="html4strict">

<?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>Style Sheets</title>
     <style type = "text/css">
        em       { background-color: #8000ff;
                   color: white }   
        h1       { font-family: arial, sans-serif }
        p        { font-size: 14pt }
        .special { color: blue } 
     </style>
  </head>
  <body>

header 1.

this is a test. this is a test. this is a test.

Clients

this is a test. this is a test. this is a test.

  </body>

</html>

</source>
   
  


Embedded Style Sample

   <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> <title>Embedded Style Sample</title> <style type="text/css" media="screen"> h1 { font: Arial; } </style> </head> <body>

Welcome!

</body> </html>

</source>
   
  


Styling text with CSS

   <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" lang="en"> <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Styling text with CSS</title>
 
 <style type="text/css">
 body { 
       font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
       font-size: 12px; 
       line-height: 1.5em;
   }
   h1 {
       font-size: 160%;
   }
 </style>
 

</head> <body>

About Us

this is a text.

this is a text.

</body> </html>

</source>
   
  


The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon.

   <source lang="html4strict">

<?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>Inline Styles</title>
  </head>
  <body>

This text does not have any style applied to it.

This text has the font-size style applied to it, making it 20pt.

This text has the font-size and color styles applied to it, making it 20pt. and blue.

  </body>

</html>

</source>
   
  


Two Embedded Style

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

   <title>Embedded Style Sample</title>
   <style type="text/css" media="screen">
   
   h1 {
       font: Arial;
   }
   
   </style>
   
   <style type="text/css" media="print">
   
   h1 {
       font: Times;
   }
   
   </style>

</head> <body>

Welcome!

</body> </html>

</source>