分享
 
 
 

CSS菜鸟学习小结

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

一、基本概念

1、选择符:就是HTML当中可用的任何元素,例如:body,a,tdp.....

2、类:就是我们自己给格式起的名字,应用的时候叫名字(class=类)

3、伪类:visited、active、link等

二、基本语法

1、选择符{属性:值}

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

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

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

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

3、.类{属性:值}

例如:.aaa{color:#191970}

任何元素都能用

例如:<pclass=aaa...></p>

<aclass=aaa...></a>

<tdclass=aaa...></td>

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

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

引用方法:<aCLASS=aaa...></a>

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

例如:.mainnv:hover{COLOR:#ff0000}

三、具体使用

1、行内:用选择符{属性:值}

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

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

<styletype="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>加如下链接代码:

<LINKrel="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}

<aclass=black>这里显示黑色</a>

<aclass=white>这里显示白色</a>

具体的蚊子已经说过了,

自己看看咯

---------------------------------------------------------------

补充几个很重要的CSS用法:

1.

div#divID{color:#ff0000}

<divid=divID>div1</div>

<div>div2</div>

2.

div#divIDtabletd{color:#FF0000}

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有