正 文

CSS菜鸟学习小结


www.7dspace.com  更新日期:2005-8-16 5:08:12  七度空间


一、基本概念  
1、 选择符:就是HTML当中可用的任何元素,例如:body,a,td p..... 
2、 类: 就是我们自己给格式起的名字,应用的时候叫名字(类) 
3、 伪类:visited、 active 、link 等 

二、基本语法 

1、选择符 { 属性: 值 }

  例如: TD { FONT-SIZE: 9pt} 

2、选择符.类 { 属性: 值 }

  例如: td.aaa { color: #191970 } 

只能在该元素下有效 引用方法: <P > 

3、.类 { 属性: 值 }

   例如: .aaa { color: #191970 }

 任何元素都能用

例如: <p   ... > </p>

   <a   ... > </a> 

   <td  ... > </td> 
  
4、 选择符:伪类 { 属性: 值 }  例如:a:link {color:red}

5、 选择符.类:伪类 { 属性: 值 } 例如:a.bbb:link {color:blue}

引用方法: <a  ...> </a> 

6、 .类:伪类 { 属性: 值 } 

例如: .mainnv:hover {COLOR: #ff0000} 
                                      
三、具体使用  
 
1、行内: 用选择符 { 属性: 值 }

例如: TD { FONT-SIZE: 9pt} 

2、文件头:方在<head> </head> 之间 例如: 

  <style type="text/css"> 

  <!--  

    A:link {text-decoration: none; color:#0072A8} //选择符:伪类 { 属性: 值 }

    A:visited {text-decoration: none; color: #0072A8} 

    A:active {text-decoration: none; color: #FF0000} 

    A:hover {text-decoration: underline; color: FF0000} 

    A.a1:active {COLOR: #ffffff} //选择符.类:伪类 { 属性: 值 }

    A.a1:link {COLOR: #ffffff} 

    A.a1:visited {COLOR: #ffffff} 

    A.a1:hover {COLOR: #faf108; TEXT-DECORATION: underline}

    body{font-size=9pt}   //选择符 { 属性: 值 } 
    H{FONT-SIZE: 9pt}      
    TD{ FONT-SIZE: 9pt}    

    --> 
    </STYLE> 

3、外连文件: 要求文件扩展名为 css,<head> </head> 加如下链接代码: 

 <LINK rel="stylesheet" href="first.css"  type="text/css">//first.css 是文件名 
    
  first.css 内容如下: 

  A:link { COLOR: #3a2a00; TEXT-DECORATION: none} //选择符:伪类{属性: 值 } 
  A:visited {COLOR: #602400; TEXT-DECORATION: none}// 用a元素的连接都是这种方式  
  A:active {COLOR: #ff6600; TEXT-DECORATION: none} 
  A:hover {COLOR: #ff3300; TEXT-DECORATION: underline} 

  A.hot:link {COLOR: #dd0000}// 选择符.类:伪类 { 属性: 值 } 
  A.hot:visited {COLOR: #dd0000}// 用a元素的而且指明类  引用, 其实这两种定义才更能体现出CSS的妙处. 
注意:用 div#divID 对某个ID赋样式时应该确保网页里这个ID是唯一的.否则会出错


上一篇:应用CSS完全手册!
下一篇:CSS入门教程之CSS的语法
作者:  来源: ( 责任编辑:7dspace )
收藏此页】【打印】【关闭
站 内 搜 索
 

热 点 导 读
特 别 推 荐