您的位置：首页 > Web前端 > CSS

css 类选择器 id选择器 html选择器通配符选择器父子选择器

2015-05-18 10:47 706 查看

1、css使用的基本语法：

选择器 {

属性1：属性值；

属性2：属性值；

属性3：属性值；

         .

         .

         .

}

2、Css使用的必要性：

（1）、统一网页不同个体的风格

（2）、可以使用滤镜

3、Css中常用的4种选择器：

（1）、类选择器，又叫class选择器：

 类选择器格式：

. 类选择器{

 属性名：属性值;

 ……

}

（2）、id选择器：

 Id选择器格式：

 #id选择器{

 属性名：属性值;

 ……

}

（3）、html元素选择器：

html元素选择器格式：

Html元素名称{

 属性名：属性值;

 ……

}

（4）、通配符选择器

* {

属性名：属性值;

 ……

}

（5）、父子选择器

#id1 span {
color:red;
font-size:60px;
font-style : italic ;
}

Ø Css文件可以使用在各种文件中，如 .php, .html, .jsp, .asp, .net；

Ø 各种选择器优先级比较：Id选择器 > class选择器 > html选择器 > 通配符选择器；

Ø 父子选择器可以有多级，但实际开发中最好不要超过三层；

Ø 父子选择器有严格的层级关系；

Ø 父子选择器不局限于什么类型的选择器：

如：

#id1 span

.s1 #id1 font

Div #id1 .s1

这些形式均可以；

Ø 一个元素可以同时被id,class选择器修饰；

样式1一

Ø 同一个元素不能同时被两个id选择器修饰，一个元素只能有1个id选择器，但可以有多个class选择器； 样式1一

Ø 当修饰同一个元素的多个类选择器发生冲突时，则以写在css文件中的后面的哪个类选择器为准；

Ø 在css文件中，如果有多个class、id选择器，他们有相同的部分，我们可以把相同的css样式放在一起；

5、说明：

css文件本身也会被浏览器下载到本地，才能显示效果。

实例：

<html>
<head>
<title>第二讲代码</title>


<link rel="stylesheet" type="text/css" href="a1.css" >
<link rel="stylesheet" type="text/css" href="a2.css" >
</head>
<body>

1、使用css统一网页不同元素风格,类选择器 
样式一
 
样式二
 
样式三
 
样式四
 
样式五
 
样式六
 

2、id选择器 

样式七
 
样式八
 
样式九：不打算把课程包括数据初步设计课程不健康报报价
 

3、html选择器控制超链接 

<a href="http://www.baidu.com" >百度</a> 
<a href="http://www.sohu.com" target="_blank">搜狐</a> 
<a href="http://www.taobao.com" target="_blank">淘宝</a> 

4、对同一种html元素，分类显示问题 

11223344556677889900
 
qqwweerrttyyuuiioopp
 

5、通配符选择器 



6、父子选择器 

标题：不打算把课程包括数据初步设计课程不健康报报价
 

7、一个元素被多种选择器修饰 
样式1一
 
样式1二
 
样式1三
 

8、一个元素被多个class选择器修饰 
样式1一
 
样式1二
 
样式1三
 

9、合并css文件选择器 


恩格斯v输入个人
 
v都是v二嘎v是v上造成至
 
说v发多少v分DVD大幅度v别的服不
 

2、滤镜技术,不好用，没能明白 
<div>

<img src="b1.jpg" >
<img src="b2.jpg" >
<img src="b3.jpg" >
<img src="b4.jpg">
<img src="b5.jpg">
<img src="b6.jpg">
<img src="b7.jpg">
<img src="b8.jpg">

</div>

</body>

</html>
a1.css

/*.style1 叫做类选择器*/
.style1 {
color:green;
font-size:30px;
}
.style2 {
color:red;
font-size:40px;
}

/*id选择器的使用*/
#id1{
color:yellow;
font-size:50px;
}

/*html选择器，使网页字体默认显示为橙色 */
body{
color:orange;
}

img{
width:300px;
filter :gray;
}
/*html选择器控制超链接*/
a:link{ /*伪类link设置 a 对象在未被访问前的样式。*/
color:red;
text-decoration : none;/*去掉文字装饰效果，这里指下划线*/
font-size:24px;

}
a:hover{ /*伪类hover设置对象在其鼠标悬停时的样式*/
color:blue;
text-decoration :underline;/*添加下划线*/
font-size:35px;
}

a:visited { /*伪类visited设置 a 对象在其链接地址已被访问过时的样式*/
color:#c0ff00;
font-size:50px;

}

a:active { /*伪类active设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。*/
color:#40ff00;
font-size:50px;

}

/*同一种元素的分类显示*/
b.cls1{
color:#c0ff00;
font-size:50px;
}

b.cls2{
color:#40ff00;
font-size:53px;
}

/*通配符选择器*/

*{
/*margin-top:0px; /* 消除外部上边距*/
/*margin-right:0px;
margin-bottom:0px;
margin-left:0px;*/
/*margin:0px;*/
/*margin: 10px 20px;*/
/*margin: 10px 20px 30px;*/
margin: 10px 20px 30px 40px;
/*margin取值含义：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边（以顺时针顺序）。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
*/

}

*{
/*padding-top:0px; /* 消除元素内部上边距*/
/*padding-right:0px;
padding-bottom:0px;
padding-left:0px;*/
/*padding:0px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
padding: 10px 20px 30px 40px;
/*padding取值含义：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边（以顺时针顺序）。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
*/

}

/*父子选择器（包含选择器）*/

#id1 span {
color:red;
font-size:60px;
font-style : italic ;
}

#id1 span span { /*一定要注意层次关系*/
color:green;

}

#id1 font{

font-size:100px;

}

#id2 {
font-weight : bold;
font-style : italic ;
}

/*一个元素被多个class选择器修饰*/
.style3 {
font-weight : bold;
text-decoration :line-through;
background : red;
}

/*合并css文件选择器*/
/*在css文件中，如果有多个class、id选择器，他们有相同的部分，我们可以把相同的css样式放在一起；
把各个类选择器的公共部分，单独抽取写为一份，这样可以减少css的冗余*/

/*我们可以把某个css文件中的选择器公有的部分，独立出来写一份；
例如以下三个选择器：
*/
/*广告一*/
.ad_1{
width:20px;
height:30px;
background:red;
float:left;
margin:3px;
}
/*广告二*/
.ad_2{
width:30px;
height:40px;
background:red;
float:left;
margin:3px;
}
/*广告三*/
.ad_3{
width:40px;
height:50px;
background:red;
float:left;
margin:3px;
}

/*由以上三个选择器可进行以下改写：*/

/*广告一*/
.ad_1{
width:200px;
height:30px;
}
/*广告二*/
.ad_2{
width:300px;
height:40px;
}
/*广告三*/
.ad_3{
width:400px;
height:50px;
}
/*将以上三个选择器的重合部分写入以下选择器*/
.ad_1,.ad_2,.ad_3{ /*注意用逗号隔开，否则就成了父子选择器了*/
background:red;
float:left;
margin:3px;
}

/*注意，经过以上改造的选择器还和原来一样使用，新生成的选择器不需要出现在html文件中，会自动识别重合属性*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

css 类选择器 id选择器 html选择器 通配符选择器 父子选择器

1、css使用的基本语法：

2、Css使用的必要性：

3、Css中常用的4种选择器：

5、说明：

css 类选择器 id选择器 html选择器通配符选择器父子选择器