css之入门篇
今日学习终于到了css，css可以实现很多表现出很酷的界面，而css的出现是为了解决
HTML结构上写样式出现一片混乱现象而应运而生的语言，在以前样式都是和结构一起写的，
不分彼此，而这样大大增加了代码量，因为一个同样的样式不断重复，只能不断重新写出
来，还有也让代码写完后困难阅读，查找错误也变得无比艰辛，而这个时候css出现了，并
体现出了它的好处，而它的好处就是把上面的问题解决了，把结构与表现分离开来。
接下说说什么是css?
什么是CSS？
CSS (Cascading Style Sheets) 层叠样式表
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。
目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了
，IE10以后也开始全面支持CSS3了。 不同的浏览器可能需要不同的前缀。它表示该CSS属性
或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需
要前缀的，但为了更好的向前兼容前缀还是少不了的。
css就是为了装饰HTML的结构而出现的，它能做到以前的HTML无法做到的事，它能把HTML装扮的
很美观，所以css是HTML的补充。
如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #ff00ff; font-size: 16px; font-weight: bold; } </style> </head> <body> <p>wowaoda</p> </body> </html>
css把p标签修饰成字体是粉红色，粗体，字体大小为16像素，从这可以看出css可以为HTML里的元素补充样式，即修饰它，打扮它。
那么css究竟可以干嘛呢？
CSS能做什么？？？？
CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。
比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS简化了前端开发工作人员的设计过程，更灵活的页面布局，更快的页面加载速度。
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，
那么整个站点的所有页面都会随之发生变动。 CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。
目的：将表现与结构分离。
例子：
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> div{ width: 100px; height: 100px; border-radius: 50%; background: rgba(200,150,200,0.3); box-shadow: 2px 2px 2px 3px #eee; } </style> </head> <body> <div></div> </body> </html>
这个完全是靠css实现，它使页面美化。
还有请点击这个：动画的css
那么前面写着这些，让我对其强大感到好奇，那接下来，让我们探探它的语言。
CSS语法结构？
CSS 语法由三部分构成：选择符、属性和值
属性是您希望设置的样式属性。
每个属性有一个值。属性和值被冒号分开。
p{
font-size:15px;
}
p是选择符，属性是font-size，值为15px；
a{
color:#000;
}
这个也是一样理解，是不是很类似，它的结构很简单，就这三个部分。
那么css的就够都懂了，那么怎么实现这些css呢？那就要说说引用到页面了。
如何引入CSS？
三种引入方式：
1.行内引用 行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。
注意这种方式的引入CSS，是不需要写选择器的。
<p style="color:#ff7600;">我是段落</p>
2. 页内引用
页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。
<head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #ff7600; } </style> </head>
3.外部样式表
外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独 放在一个外部文件中，再由网页进行调用。
<head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"> </head>
这些就是它的引用方式，只要引用进来才能作用到HTML结构上。
既然有这几种引用方式，那么是不是随意引用的呢？如果这样那么就是乱套了，因为css也叫层叠样式表，既然
随便引用那么不是和它的理念冲突了吗？所以这些引用还是规则的，就是优先级；
优先级依次是：就近原则
行内引用 > 页内引用 > 页外引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> <p style="color:#ff7600;">我是段落</p> </body> </html>
它会优先执行行内样式，所以在外部样式中含有相同样式时，它是给忽略掉的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #fff; } </style> </head> <body> <div></div> <p style="color:#ff7600;">我是段落</p> </body> </html>
从规则中知道这个也一样，内部样式也是被忽略的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p{ color: #fff; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> <p>我是段落</p> </body> </html>
根据规则，内部样式优先。
既然样式都会写，那么自己写了很多很多样式代码，然后想找出某处的样式怎么办？一个一个样式看一遍，这个岂不是很耗时，很费神，
既然自己都这样了，那这个代码到了队友那不就是个坑。所以我们是不是可以注释一下他呢，让代码可读性更加强。
CSS注释
/*这是头部*/
header{
color:#fff;
}
/*这是导航*/
nav{}
/*这是主体*/
.container{}
/*这是尾部*/
footer{}
这样是不是可读更强呢。
在HTML中结构可以很复杂，那么我们不可能简单的写个元素选择符吧。
而各种各样方便的选择符，从HTML结构树应运而生。
选择符
1、通配选择符*
这个是选中全部元素，为他们设置样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ font-size: 15px; } </style> </head> <body> <h1>标题</h1> <p>我的段落的兄弟</p> <p>我是段落</p> </body> </html>
它们的字体都被设置为15像素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ font-size: 15px; font-weight: bold; } </style> </head> <body> <h1>标题</h1> <p>我的段落的兄弟</p> <p>我是段落</p> </body> </html>
它们都被加粗了。
2、元素选择符
所谓元素选择符，指以网页中已有的标签名作为名称的选择符。
body {}
h1 {}
p {}
3、 群组选择符
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。
使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。
p,h1{
font-size: 15px;
font-weight: bold;
}
4、 关系选择符
选择所有被E元素包含的F元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> p span{ color: #eee; } </style> </head> <body> <p> <span>我是谁？</span> </p> </body> </html>
今日课程知识到此！！！
css.doyoe.com css参考手册
接下来扩展补充：
特殊性：
每个选择器都有特殊性，而如果一个元素有两个或多个冲突的属性声明，特殊性高的胜出。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0.
一个选择器的具体特殊性如下确定：
对于选择器中给定的各个ID属性值，加0,1,0,0。
对于选择器中给定的各个类属性值、属性选择或伪类，0,0,1，0。
对于选择器中给定的各个元素和伪元素，0,0,0,1。
结合符和通配选择器对特殊性没有任何贡献。
而通配选择器 0,0,0,0.
结合符连零都没有。
例子：
h1{color:red;} 为0,0,0,1
p em{color：purple} 为0,0,0,2
.grape{color:purple} 为0,0,1,0
p.b e.a{color:red; } 0,0,2,2
#aa{color:red;} 0,1,0,0
div#aa *[href]{color:red;} 0,1,1,1
而第一个0是为行内样式准备的，因为越前面，代表优先级越高，假如非零数字位置一样，那么先比较前面的数字的大小，
然后再往下比较，直到数字不相对，取数字大那个的优先级高。
重要声明 !important ,就是把你所需要的声明标出来，它的优先级最高，不过它要放在声明的值的最后。
继承：
继承的特殊性连零都没有，就是没有特殊性；
这个0特殊性有零与无特殊性有很大的区别，就是0特殊性的选择器可以为后代加样式，
而继承虽然也有给后代加样式，但有限制的，只有有继承能力的才能加到后代元素中，如color等，而margin、padding和border这些属性都不会加到后代里。
相同权重的，按顺序比较，顺序越下他的优先级最高。
较高特殊性强于较低特殊性
所以伪类声明顺序：link-visited-hover-active
LVHA（简写）
当:visited在他们之后时，由于权重一样，所以会看他们的顺序，而:visited在他们之后会胜出。
当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意 ！！！！
