css层叠样式表以及选择器

css层叠样式表

简介

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一,由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中,同时控制多个网页的布局,这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。

分类

行内样式

写在标签style属性里面的样式

1
<span style="color:#ooo"></span>

内联样式

写在一般位于头部内style标签里的样式

1
2
3
4
5
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>

外联样式

写在.css文件里的样式,通过link标签在头部引入

1
2
3
4
<head>
<link rel="stylesheet" type="text/css" href="./css/common.css">
</head>

css选择器

(1)通配符选择器 对网页中所有的标签有用 ;

1
2
3
4
5
<style>
*{

}
</style>

(2)类选择器 在标签里取一个类名,对有此类名的元素有效有效 ;

1
2
3
4
5
6
7
<style>
.box{

}
</style>
……
<div class="box"></div>

(3)id选择器 命名一个id,该id一定是唯一的 ;

1
2
3
4
5
6
7
<style>
#box{

}
</style>
……
<div id="box"></div>

(4)元素/节点选择器 直接选择标签符;

1
2
3
4
5
6
7
<style>
div{

}
</style>
……
<div></div>

(5)属性选择器 根据元素的属性和属性值来匹配元素;

1
2
3
4
5
6
7
<style>
input[type="text"]{

}
</style>
----------
<input type="text">

(6)派生选择器

(1)后代选择器

1
2
3
4
5
6
7
8
9
10
11
<style>
.grandpa .son{

}
</style>
……
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>

(2)子元素选择器 只能选择下一代

1
2
3
4
5
6
7
8
9
10
11
<style>
.grandpa>.father>.son{

}
</style>
……
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>

(3)相邻兄弟选择器

1
2
3
4
5
6
7
8
9
10
11
12
<style>
h1+p{
/*选中所有紧挨着h1标签的第一个p标签*/
}
</style>
……
<h1></h1>
<p></p>
<p></p>
<h1></h1>
<p></p>
<p></p>

(7)群组选择器 .box1,.box2;

1
2
3
4
5
6
7
8
<style>
.box1{

}
</style>
……
<div class="box1"></div>
<div class="box2"></div>

over