CSS初级教程(一) - 应用CSS

有三种方法应用CSS

In-line 行内

行内样式是在html标签里直接使用style属性

html代码
  1. <p style="color: red">textp>  

设定段落文字红色。

但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免。

Internal 内部

使用于整个页面的植入内部样式在head标签里面,style标签包围样式。

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5. <title>CSS Example</title>  
  6. <style type="text/css">  
  7.  p {   
  8.   color: red;   
  9.  }   
  10.  a {   
  11.   color: blue;   
  12.  }   
  13. </style>  
  14. ...   

所有段落文字红色,链接蓝色。

像行内样式一样,你应该保持HTML和CSS分离,所以我们只剩下救星。

外部

外部样式使用在整个多样页面网站。它是一个独立的CSS文件,像下面一样:

css 代码
  1. p {   
  2.  colorred;   
  3. }   
  4. a {   
  5.  colorblue;   
  6. }   

如果上面保存为“web.css”,HTML里面的链接就像下面:

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5.  <title>CSS Example</title>  
  6.  <link rel="stylesheet" type="text/css" href="web.css" />  
  7. ...   

后面教程里会讲到其他外联样式的方法,现在已经足够了。

从这篇指导里面,我们以后沿着上面的方法实验代码是个好主意,用文本编辑器新建文件,保存为"web.css"在html目录。

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5.  <title>My first web page</title>  
  6.  <link rel="stylesheet" type="text/css" href="web.css" />  
  7. </head>  
  8. ...   

保存HTML文件,现在已经链接上CSS,不过现在CSS是空的,没有内容不会改变HTML。当你开始学习CSS,就可以添加代码到CSS文件里,看HTML刷新后的结果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值