今晚的月度会议，又被洗脑了一遍，也不能说是洗脑，是无情的揭露，目标是不是真的遥不可及，我们是不是还有学生综合症。前端我是不是真的做不到独当一面的高手，我是不是懒惰了，我为什么学英语，我周末都在做什么，我为什么不愿意加班，我为什么身材臃肿……这些种种，答案呼之欲出，不是做不到就是不愿意付出，做啊，杀气呢！?看到樱桃的发言，我就想到一个词，灵魂人物，这个公司我加入不到一个月，现状是这么的年轻，意味着我可以有更大的机会，我是不是该做点什么，现状既然是这样，我一点点来改变，前端是我的痛，那我就学，那我就多做————-纪念2017-9-7晚月度会议
1. 什么是CSS
用来控制外观，决定浏览器怎么显示HTML代码的格式规则
2. 如何引入CSS
1. 行内式
定义：标签内，style属性
作用范围数量：1个标签
//我们怎么控制div的显示？指定了它的高度、边框厚度、边框线型、边框颜色
<div style="border: 1px solid red; height: 20px;"></div>2. 内嵌式
定义：混合着标签的文件内以style定义（像成员变量的感觉）
范围：文件内根据样式选择器决定渲染哪些标签（本文后面会介绍选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//在这里我们以style定义了一个css样式
<style type="text/css">
//这样样式的选择器是用来渲染div标签的
div {border: 2px solid red; height: 20px;}
</style>
</head>
<body>
//感受到渲染的光环，因为我们在一个文件中，我是div标签
<div></div>
//我也感受到了
<div></div>
</body>
</html> 3. 外链式
定义：在一个css文件中写css，其他使用的地方引用文件路径
范围：引用的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//外链divStyle.css文件
<link rel="stylesheet" href="css/divStyle.css" /> />
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3. CSS使用技巧
同一个标签可以受到多种样式渲染，一般写1-2种风格的样式控制，易于维护（用的多的是内嵌式和外链式）
样式优先级是：最近原则（一个标签同一个属性，行内式优先级高于内嵌式……）
css文件命名可以用这个css起到什么作用来命名
4. CSS选择器
选择器用来确定范围：
确定样式是作用于哪个标签，修饰哪个标签，让哪个标签按自己的样式内容定义的方式来让浏览器显示
选择器的内容用来确定：颜色、大小……怎么显示
格式： 选择器{ 属性1：值 ； 属性2 ：值 }
1. 选择器种类
1. 标签选择器
以标签名作为选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//在这里我们以style定义了一个css样式
<style type="text/css">
//div开头
div {border: 2px solid red; height: 20px;}
</style>
</head>
<body>
//感受到渲染的光环，因为我们在一个文件中，我是div标签
<div></div>
//我也感受到了
<div></div>
</body>
</html> 2. 类别选择器
每个标签都有属性class，值可以随意定义
一组标签的class值相同，一同被该class选择器渲染
以.开头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.s1{ border: 2px solid red; height: 20px;}
</style>
</head>
<body>
<div class="s1"></div>
<br />
<div class="s1"></div>
</body>
</html>3. ID选择器
每个标签都有id属性
建议id选择器的值是唯一，即使多个标签的id的值相同，id选择器也会对这些都能渲染，后面用jquery的时候通过id获取标签的内容，就会只能获取第一个，想要定义一组还是用class选择器
以#开头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#s1{ border: 2px solid red; height: 20px;}
#s2{border: 4px solid burlywood;}
</style>
</head>
<body>
<div id="s1"></div>
<br />
<div id="s2"></div>
</body>
</html>
4. 伪类选择器
这个简单了，就只有4个，都是对a标签进行的
a : link a标签在平常时候的样式
a：visited a标签在访问过后的样式
a：hover a标签在鼠标浮上去的时候显示的样式
a：active a标签在点击时候显示的样式
2. 选择器集合声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
//用逗号分割，三个选择器都被同一套css渲染
div, input, #s5{
border: 1px solid red;
height: 20px;}
</style>
</head>
<body>
<div></div>
<input type="text" />
<div id="s5"></div>
</body>
</html>3. 选择器嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div, input, #s5{
border: 1px solid red;
height: 20px;}
//用空格分割，意味着让#s5里面的div标签感受到这套css的渲染
#s5 div{
border: 1px solid black;
height: 10px;}
</style>
</head>
<body>
<input type="text" />
<div id="s5">
<div></div>//只有我感受到了
</div>
</body>
</html>