13,编写头部的css
因为要将css文件定义在HTML文件头部的方法为内部样式表方法,所以下面举例说明怎么应用内部样式表方法在HTML文件的头部编写css
(1)打开记事本,在记事本中输入如下一段普通的HTML代码,然后将代码文件以扩展名.html的形式保存
实例代码:
<html> <head> <title>编写头部css文件</title> </head> <body> <h3 align="center"> 编写头部css文件 </h3> <p> 在HTML文件的头部应用内部样式表方法添加css </p> </body> </html>
<style type="text/css"> <!-- h3{color:black; font-size:35px; font-family:黑体} p{background:yellow; color:red; font-family:宋体} --> </style>
14,编写主体的css
将css文件定义在HTML文件主体的方法为嵌入样式表方法,下面举例说明怎么应用嵌入样式表方法在HTML文件的主体编写css
实例代码:
<html> <head> <title>编写主体css文件</title> </head> <body> <center> <h1 style="color:green; font-size:35px; font-family:黑体"> 编写主体css文件 </h1> </center> <hr> <p style="backgrount:cyan; color:red; font-size:25; font-family:隶书"> 在HTML文件的主体应用嵌入样式表方法添加css </p> </body> </html>
(1)打开记事本,输入如下一段css文件的代码。
<style type="text/css"> <!-- h3{color:black; font-size:35px; font-family:黑体} p{backgroud:orange; color:blue; font-size:25; font-family:隶书} --> </style>
实例代码:
<html> <head> <title>编写外部css文件</title> <link rel=stylesheet type="text/css" href="1.css"> </head> <body> <h3 align="center"> 编写外部css文件 </h3> <p> 在HTML文件应用链入外部样式表方法调用外部的css </p> </body> </html>
16,编写外部的css----应用导入外部样式表方法在HTML文件内调用外部定义的css文件
(1)建立如下的HTML文件
实例代码:
<html> <head> <title>编写外部css文件</title> <style style="text/css"> @import url(1.css); </style> </head> <body> <h1 align="center"> 编写外部css文件 </h1> <hr> <p> 在HTML文件中应用导入外部样式表方法调用外部css </p> </body> </html>
在实际应用过程中,HTML文件和css文件编写的先后顺序是很灵活的,但较多人倡导先编写好css文件,然后在HTML文件中调用它
h1{color:blue; font-size:30px; font-family:黑体} p{background:pink; color:black; font-size:20; font-family:宋体}