CSS 介绍
CSS(英文全称：Cascading Style Sheets 层叠样式表)
CSS的发展史：
- CSS1.0:1996年12月，CSS1.0作为第一个正式规范面世，其中加入了字体、颜色等相关属性。
- CSS2.0:1998年5月，CSS2.0规范正式推出。这个版本的CSS是最广为人知的一个版本，以前的开发者使用的一般的就是这个版本的CSS规范。
- CSS2.1:2004年2月，CSS2.1对原来的2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
- CSS3.0:2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足。
例如：- 颜色模块增加了色彩校正、透明度等功能；
- 字体模块则增加了文字效果、服务器字体支持等；
- 还增加了变形和动画模块等。
CSS样式表的基本使用
为文档添加样式的4种方式：
1、使用内联样式：直接将样式定义到HTML元素中(写在标签里)。
这种作用范围有限，只影响它所在的标签，
而且总是覆盖嵌入样式和链接样式。
2、使用内部样式：写在<div style="width:200px;height:200px;"></div><style>标签中。作用范围仅限于当前页面，
内部样式覆盖链接样式，但也会被内联样式覆盖。
3、链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。<style type="text/css"> CSS样式</style>
只要使用
标把样式表链接到页面，相应页面就可以使用样式。<link href="链接表地址" rel="stylesheet" type="text/css"/>
rel是relationship的英文缩写stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思
rel="stylesheet"描述了当前页面与href所指定文档的关系.即说明的是，href连接的文档是一个新式表
4、@import指令导入外部样式文件：和链接样式类似。
引用@import指令在某些浏览器(IE) 可能会出现“屏闪”。
所以我们应该尽量的避免使用@import指令。
而是尽量使用链接外部样式表。
<style type="text/css">@import url(地址);</style>
- 导入
@import url()
但随着浏览器发展，这种屏闪问题已经解决，可以使用
CSS选择器
CSS样式的语法格式：
p { color:red; }
- 元素选择器(元素选择器是最简单的选择器)
选择器 {属性:值}
根据这个结构我们可以扩展：
例如：
p{
color:red;font-size:14pt;font-weight:bold;}
h1,p,a{
color:blue;font-size:14pt;} /*组合选择器*/
所有用于选择特定元素的选择器分三种：
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素
ID和类选择器：基于id#和class的属性值进行选择元素。
属性选择器：基于属性的有无和特征进行选择。
上下文选择器：
上下文选择器的语法格式：标签1 标签2{属性:值;}
注意：
组合选择器和上下文选择器的区别，组合选择器以逗号隔开，
上下文选择器以空格隔开
特殊的上下文选择器
子选择器 > :
语法格式:
标签1>标签2解释说明：标签1和标签2是父子关系。
紧邻同胞选择器 + :
语法格式:
标签1+标签2- 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器 ~ :
语法格式:
标签1~标签2- 解释说明:标签1、2是同胞即可，不一定紧挨着。
通用选择符* :
解释说明:通用选择器*是一个通配符，匹配任何元素。
id选择器和class选择器
id选择器：语法格式:#idValue
class选择器：语法格式: .classValue
属性选择器
属性名选择器：
语法格式：标签名[属性名]
属性值选择器：
语法格式：标签名[属性名="属性值"]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器 Selector</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
# 元素选择器
div {
width: 800px;
height: 500px;
border: 2px solid #C30;
text-align: center;
}
# 上下文选择+class选择器
div .myp{
font-size:30px;
color:#900;
}
# id 选择器
#myh1{
}
# 属性选择器
p[class="myp"]{
}
body div p{
}
</style>
</head>
<body>
<div >
<h1 id="myh1" class="myp">this is an H1 Heading</h1>
<p class="myp">this is paragraph one</p>
<p class="myp">paragraph two has <a href="#">a link</a> in it</p>
<a href="#">this is a link</a>
<h1 id="myh">this is an H1 Heading</h1>
</div>
</body>
</html>
- css
```css
@charset "utf-8";
/ CSS Document /
/--给div设置样式/
div {
width: 800px;
height: 500px;
border: 2px solid #C30;
text-align: center;
}
/上下文选择器/
div h1 {
color: #F0F;
}
/特殊上下文选择器--子选择器> /
div>h1 {
font-style: italic;/设置字体样式为倾斜/
}
/特殊上下文选择器--紧邻同胞选择器+ /
h1+p {
font-style: italic;/设置字体样式为倾斜/
color: #F00;
}
/特殊上下文选择器--一般同胞选择器~ /
h1~p {
color: #FC0;
font-size: 14pt;
}
/特殊上下文选择器--通用选择符 */- {
color: #900;
}
/id选择器/myh1 {
color: #F3C;
font-size: 20pt;
background: #06F;
}
/class选择器/
.myp {
color: #90C;
font-size: 15pt;
}
/属性名选择器/
h1[id] {
color: #C03;
font-style: italic;
}
/属性值选择器/
h1[id="myh"] {
color: #C03;
font-style: italic;
}
- {
```
