CSS学习小结

hai_lei

浏览: 3001 次
性别:
来自: 大连

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3)

社区版块

存档分类

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是唯一的.否则会出错

分享到：

用户态线程库

2011-02-17 16:22
浏览 667
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论