css学习笔记(二)

13,编写头部的css

因为要将css文件定义在HTML文件头部的方法为内部样式表方法,所以下面举例说明怎么应用内部样式表方法在HTML文件的头部编写css

(1)打开记事本,在记事本中输入如下一段普通的HTML代码,然后将代码文件以扩展名.html的形式保存

实例代码:

  1. < html >   
  2. < head >   
  3.     < title > 编写头部css文件 </ title >   
  4. </ head >   
  5. < body >   
  6.     < h3   align = "center" >   
  7.     编写头部css文件  
  8.     </ h3 >   
  9.     < p >   
  10.     在HTML文件的头部应用内部样式表方法添加css  
  11.     </ p >   
  12. </ body >   
  13. </ html >   

(2)在上面代码中的<head>与</head>之间插入如下代码
  1. < style   type = "text/css" >   
  2. <!--  
  3.     h3{color:black; font-size:35px; font-family:黑体}  
  4.     p{background:yellow; color:red; font-family:宋体}  
  5. -->   
  6. </ style >   

(3)保存后在浏览器中打开文件,需要注意的是文件的扩展名必须保存为.html格式

 

14,编写主体的css

将css文件定义在HTML文件主体的方法为嵌入样式表方法,下面举例说明怎么应用嵌入样式表方法在HTML文件的主体编写css

实例代码:

  1. < html >   
  2. < head >   
  3.     < title > 编写主体css文件 </ title >   
  4. </ head >   
  5. < body >   
  6.     < center >   
  7.         < h1   style = "color:green; font-size:35px; font-family:黑体" >   
  8.         编写主体css文件  
  9.         </ h1 >   
  10.     </ center >   
  11.     < hr >   
  12.     < p   style = "backgrount:cyan; color:red; font-size:25; font-family:隶书" >   
  13.     在HTML文件的主体应用嵌入样式表方法添加css  
  14.     </ p >   
  15. </ body >   
  16. </ html >   

15,编写外部的css---应用链入外部样式表方法在HTML文件内调用外部定义的css文件

(1)打开记事本,输入如下一段css文件的代码。

  1. < style   type = "text/css" >   
  2. <!--  
  3.     h3{color:black; font-size:35px; font-family:黑体}  
  4.     p{backgroud:orange; color:blue; font-size:25; font-family:隶书}  
  5. -->   
  6. </ style >   

(2)建立一个新的HTML文件,并连接到上面定义的css文件上

实例代码:

  1. < html >   
  2. < head >   
  3.     < title > 编写外部css文件 </ title >   
  4.     < link   rel = stylesheet   type = "text/css"   href = "1.css" >   
  5. </ head >   
  6. < body >   
  7.     < h3   align = "center" >   
  8.     编写外部css文件  
  9.     </ h3 >   
  10.     < p >   
  11.     在HTML文件应用链入外部样式表方法调用外部的css  
  12.     </ p >   
  13. </ body >   
  14. </ html >   

(3)打开网页显示效果

 

16,编写外部的css----应用导入外部样式表方法在HTML文件内调用外部定义的css文件

(1)建立如下的HTML文件

实例代码:

  1. < html >   
  2. < head >   
  3.     < title > 编写外部css文件 </ title >   
  4.     < style   style = "text/css" >   
  5.         @import url(1.css);  
  6.     </ style >   
  7. </ head >   
  8. < body >   
  9.     < h1   align = "center" >   
  10.     编写外部css文件  
  11.     </ h1 >   
  12.     < hr >   
  13.     < p >   
  14.     在HTML文件中应用导入外部样式表方法调用外部css  
  15.     </ p >   
  16. </ body >   
  17. </ html >   

(2)再建立单独的css文件,代码如下

在实际应用过程中,HTML文件和css文件编写的先后顺序是很灵活的,但较多人倡导先编写好css文件,然后在HTML文件中调用它

  1. h1{color:blue; font-size:30px; font-family:黑体}  
  2. p{background:pink; color:black; font-size:20; font-family:宋体}  

(3)在浏览器中天打开上面建立的HTML文件,查看代码的显示效果

 

你可能感兴趣的:(学习笔记)