首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css学习札记（二）

2012-10-24 
css学习笔记（二）13，编写头部的css因为要将css文件定义在HTML文件头部的方法为内部样式表方法，所以下面举例

css学习笔记（二）

13，编写头部的css

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

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

实例代码：

view plain
  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>之间插入如下代码view plain
  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

实例代码：

view plain
  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文件的代码。

view plain
  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文件上

实例代码：

view plain
  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文件

实例代码：

view plain
  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文件中调用它

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

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

?

读书人精选
热点排行