CSS类选择器.docx

《CSS类选择器.docx》由会员分享，可在线阅读，更多相关《CSS类选择器.docx（12页珍藏版）》请在冰点文库上搜索。

CSS类选择器

@charset"utf-8";

/*CSSDocument*/

a{

color:

#F0F;

text-decoration:

none;

}

1css的需求

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

--

html在一个网页中负责的事情是一个页面的结构

css（层叠样式表）在一个网页中主要负责了页面的数据样式。

编写css代码的方式：

第一种：

在style标签中编写css代码。

只能用于本页面中，复用性不强。

格式：

编写css的代码。

例子：

a{

color:

#F00;

text-decoration:

none;

}

第二种：

可以引入外部的css文件。

推荐使用。

方式1：

使用link标签。

推荐使用...

格式：

例子：

方式2：

使用

例子：

@importurl（"1.css"）;

第三种方式：

直接在html标签使用style属性编写。

只能用于本标签中，复用性较差。

不推荐使用。

例子：

#0F0;text-decoration:

none"href="#">新闻的标题1

-->

/*

html的注释：

--html的注释-->

css/*css的注释..*/

/*

*/

标题1

#0F0;text-decoration:

none"href="#">新闻的标题1

新闻标题2

新闻标题3

新闻标题4

新闻标题5

新闻标题6

2选择器

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

/*

选择器：

选择器的作用就是找到对应的数据进行样式化。

1.标签选择器：

就是找到所有指定的标签进行样式化。

格式：

标签名{

样式1；样式2....

}

例子：

div{

color:

#F00;

font-size:

24px;

}

2.类选择器:

使用类选择器首先要给html标签指定对应的class属性值。

格式：

.class的属性值{

样式1；样式2...

}

例子：

.two{

background-color:

#0F0;

color:

#F00;

font-size:

24px;

}

类选择器要注意的事项：

1.html元素的class属性值一定不能以数字开头.

2.类选择器的样式是要优先于标签选择器的样式。

3.ID选择器：

使用ID选择器首先要给html元素添加一个id的属性值。

ID选择器的格式：

#id属性值{

样式1；样式2...

}

id选择器要注意的事项：

1.ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。

2.ID的属性值也是不能以数字开头的。

3.ID的属性值在一个html页面中只能出现一次。

4.交集选择器：

就是对选择器1中的选择器2里面的数据进行样式化。

选择器1选择器2{

样式1，样式2....

}

例子：

.twospan{

background-color:

#999;

font-size:

24px;

}

5.并集选择器：

对指定的选择器进行统一的样式化。

格式：

选择器1,选择器2..{

样式1；样式2...

}

span,a{

border-style:

solid;

border-color:

#F00;

}

6.通过选择器:

*{

样式1；样式2...

}

*/

*{

text-decoration:

line-through;

background-color:

#CCC;

}

这个是第一个div标签...