CSS菜鸟小结(页 1) - 澳洲网页设计 - 澳洲中文网澳大利亚论坛,澳大利亚华人论坛,澳大利亚留学论坛,澳大利亚中文论坛,

2006-8-3 14:34 城市童话

CSS菜鸟小结

一、基本概念 1、  选择符：就是HTML当中可用的任何元素，例如：body,a,td  p.....

                        2、  类：  就是我们自己给格式起的名字，应用的时候叫名字（class=类）

                        3、  伪类：visited、  active  、link  等

二、基本语法

                        1、选择符  {  属性:  值  }             例如：  TD  {  FONT-SIZE:  9pt}

                        2、选择符.类  {  属性:  值  }       例如：  td.aaa  {  color:  #191970  }

                              只能在该元素下有效             引用方法：  <P  CLASS=aaa>

                        3、.类  {  属性:  值  }       例如：  .aaa  {  color:  #191970  }

                              任何元素都能用          例如：  <p  class=aaa ...  >  </p>
                                                                                    <a  class=aaa ...  >  </a>
                                                                                    <td  class=aaa  ...  >  </td>

                        4、  选择符:伪类  {  属性:  值  }          例如：a:link  {color:red}

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

                                                                                 引用方法：  <a  CLASS=aaa  ...>  </a>

                        6、  .类:伪类  {  属性:  值  }       例如：    .mainnv:hover  {COLOR:  #ff0000}

三、具体使用

   1、行内：  用选择符  {  属性:  值  }       例如：  TD  {  FONT-SIZE:  9pt}

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

         <style  type="text/css">

            
         </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元素的而且指明类  class  用hot  的显示方式
         A.hot:hover  {COLOR:  #ff0000}                   //  引用方法  class=hot
         A.hot:active  {COLOR:  #ff3300}

         A.blk:link  {COLOR:  #000000}                   //  选择符.类:伪类  {  属性:  值  }
         A.blk:visited  {COLOR:  #000000}             //  用a元素的而且指明类  class  用blk  的显示方式
         A.blk:hover  {COLOR:  #000000}

         .mainnv  {FONT-SIZE:  12px;  FONT-WEIGHT:  bold}    //  .类  {  属性:  值  } 指明类用mainnv的显示
         .mainnv:link  {COLOR:  #cccc99}
         .mainnv:visited  {COLOR:  #cccc99}                   //  .类:伪类  {  属性:  值  }
         .mainnv:active  {COLOR:  #cccc99}                   //  所有指明类用mainnv  的连接效果用这种方式显示
         .mainnv:hover  {COLOR:  #ff0000;  TEXT-DECORATION:  none}

         .main1  {BACKGROUND:  #cccc99}                         //.类  {  属性:  值  }
         .main1t  {COLOR:  #cccc99}                                  //  所有指明类用main1t的都用这种方式显示
         .main2  {BACKGROUND:  #c5c5b2}
         .main3  {BACKGROUND:  #e6e0b2}

五、控制优先级：

      优先级：  1、行内插入式    2、头部方式       3、外连文件方式

要在一个页面同时实现两个效果，就是说onmouseover时，字体有的显示为黑色，有的显示为白色,用Css该怎么定义呢？

用类咯！
2、  类：  就是我们自己给格式起的名字，应用的时候叫名字（class=类）

比如说：a.black:hover{COLOR:  #000000}
a.white:hover{COLOR:  #ffffff}
<a  class=black>这里显示黑色</a>
<a  class=white>这里显示白色</a>
具体的蚊子已经说过了，
自己看看咯
---------------------------------------------------------------

补充几个很重要的CSS用法:
1.
div#divID  {color:  #ff0000}

<div  id=divID>div1</div>
<div>div2</div>

2.
div#divID  table  td{color:  #FF0000}

<div  id=divID><table><tr><td>table1</td></tr></table></div>
<div><table><tr><td>table2</td></tr></table></div>

对CSS的样式不一定只用  class=CSSName  引用,  其实这两种定义才更能体现出CSS的妙处.
注意:用  div#divID  对某个ID赋样式时应该确保网页里这个ID是唯一的.否则会出错

2006-8-24 19:25 Evan

ＨＡＨ．．．．．乁

2006-11-24 19:46 xjlf123

辛苦楼主了~~~~~~~ 强烈支持你

2007-7-6 12:13 viggy

如不是非不得已都不用TABLE,
ALL DIV GOOD DESIGN !