标签样式

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style type="text/css">
  5.             /*标签样式*/
  6.             p{
  7.             color:red
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <p>这是段落一</p>
  13.         <p >这是段落一</p>
  14.         <p >这是段落一</p>
  15.     </body>
  16. </html>

类样式

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style type="text/css">
  5.             /*类样式*/
  6.             .f20{
  7.                 font-size:20px;
  8.             }
  10.         </style>
  12.     </head>
  13.     <body>
  14.         <p class="f20">这是段落一</p>
  15.     </body>
  16. </html>

ID样式

  1.     <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style type="text/css">
  5.              /*ID样式*/
  6.             #f30{
  7.                 background-color:pink;
  8.                 font-size:24px;
  9.                 font-weight:bolder;
  10.                 font-style:italic;
  11.                 font-family:"华文彩云";
  12.             }
  14.         </style>
  15.     </head>
  17.     <body>
  18.         <p id="f30">这是段落一</p>
  19.     </body>
  21. </html>

组合样式

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style type="text/css">
  5.       /*组合样式*/
  6.             div p{
  7.                 color:yellow;
  8.             }
  10.             div .f32{
  11.                 font-size:32px;
  12.                 font-family:"黑体";
  13.             }
  14.         </style>
  16.     </head>
  17.     <body>
  18.         <div>
  19.             <p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
  20.             <span calss="f32">World</span>
  21.             <p class="f32">!!!</p>
  22.         </div>
  23.     </body>
  25. </html>

嵌入式样式表

上述四种样式表均为嵌入式样式表

内部样式表

  1.     <p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>

外部样式表

将样式写在css文件内，在html文件中导入css文件

  1.       /*ID样式*/
  2.             #f30{
  3.                 background-color:pink;
  4.                 font-size:24px;
  5.                 font-weight:bolder;
  6.                 font-style:italic;
  7.                 font-family:"华文彩云";
  8.             }
  9.             /*组合样式*/
  10.             div p{
  11.                 color:yellow;
  12.             }
  14.             div .f32{
  15.                 font-size:32px;
  16.                 font-family:"黑体";
  17.             }
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <link rel="stylesheet" href="css/demo01.css">
  6.     </head>
  8.     <body>
  9.         <p>这是段落一</p>
  10.         <p class="f20">这是段落一</p>
  11.         <p id="f30">这是段落一</p>
  13.         <div>
  14.             <p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
  15.             <span calss="f32">World</span>
  16.             <p class="f32">!!!</p>
  17.         </div>
  18.     </body>
  20. </html>