使用CSS的方法之一

内联样式：

 

  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  3. <html> 
  4.   <head> 
  5.     <title>CSS学习系列一 CSS的使用(内联样式)</title> 
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  7.    </head> 
  8.   <body> 
  9.       <h1 style="font-family:宋体;color:Red">红色宋体</h1> 
  10.       <h1 style="font-family: 隶书;color: blue">绿色的隶书</h1> 
  11.   </body> 
  12. </html> 

 

内部样式

在HTML文件中使用<style>标签可以设置整个文档的样式,这种方式称为内部样式.

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>CSS学习系列一 CSS的使用(内联样式)</title> 
  5.     <style type="text/css"> 
  6.    <!--  
  7.       p{text-decoration: underline;}  
  8.       .i{font-style: italic;}  
  9.    --> 
  10.     </style> 
  11.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  12.    </head> 
  13.   <body> 
  14.      这是一个测试页面<br> 
  15.      <P>这里的字加上下划线</P> 
  16.      <a href="" class="i">这里的字是斜体</a> 
  17.      <tt class="i">这里的字也是斜体</tt> 
  18.   </body> 
  19. </html> 

外部样式

在HTML文件中引用外部CSS样式

  1. <link href="" type="text/css" rel="stylesheet"/> 

 

link元素的作用是引用外部文件,常用的属性是下面4中:

        1.  Rel:说明要关联的是文件,如果是css文件.则其值为"stylesheet"

        2.type:说明关联的是什么类型的文件,如果是css类型通常是"text/css"

        3.href:与<a>中的href属性一样的,用于指定要引入的文件的路径的.可以是绝对url也可以是相对url

        4.Title是引入样式文件的标题

 

使用@import引入外部样式

与<link>标签类似也可以引入外部css但是只能是在<Style>标签里面使用而且必须放在其他css样式之前的

 

  1. <style type="text/css"> 
  2. <!--  
  3.  @import url(a.css);  
  4.    
  5. --> 
  6.  </style> 

CSS注释：

 在CSS中注释和HTMl中的注释不一样在CSS中注释

 

  1. @import url(a.css);  
  2.    /* 这是CSS注释风格*/  
  3.    <!--  
  4.     这是HTML的注释风格  
  5.    -->