CSS是给网页对象提供样式的现代方法。
最初的html属性里有一些能够控制显示的项，然而随着web的发展，对复杂样式和靓丽显示的需求越来越大，使用html控制外观越来越不靠谱，配合JavaScript也违反了解耦原则，于是CSS应运而生
CSS设计最初是为了将样式设定从html里分离出来，提供更加简便现代的方式来处理网页外观。之后随着发展功能越来越强大
本文先介绍基础概念
box model
因为网页是个2D平面，于是所有的控件也就是一个矩形区域，这是很自然的设计
然而CSS对这个矩形做出了更加精细的划分，这就是box model
实际内容位于content区域，也是我们常规理解的矩形区域。其余区域如果不显示指定则默认为0
那为什么要有外围这些区域呢？这是为了配合CSS布局使用，后面文章会介绍的
CSS的语法很简单
selector { style }
语义上讲就是对符合selector标准的所有控件应用style样式
一个控件有多个style定义的场合会叠加，换言之父节点定义的style会继承给子节点，这样的好处是不用反复定义相同的style
如果多个style有冲突，则更具体的会盖过更笼统的，比如子节点的单独style会override父节点定义的相同项目，这样的好处是可以具体问题具体处理
于是学习的重点就是selector怎么写，style怎么写
selector
selector是非常重要的，筛选不出目标元素则style也没卵用
有各种不同的方式来筛选，非常灵活
(1)按标签
div {...}
筛选出所有div tag的控件。只要是html支持的tag都可以在这里写
(2)按id
#myui {...}
井号接一个html中定义的id属性值可以获取指定控件
(3)按类
.myclass {...}
点号接一个html中定义的class属性值筛选出所有该class的控件
(4)按属性
[attr] {...}
把所有属性里定义了attr的控件筛选出来
可以进一步指定属性值，甚至可以匹配
[title = "css"] 精确匹配
[class ^= "my"] 前缀匹配
[src $= "abc.gif"] 后缀匹配
[color *= "red"] 模糊匹配
由于id和class也是属性，也可以通过上述方式实现
只不过由于id和class用得太多，所以CSS提供了简写方式
(5)复合
可以组合之前的筛选方式进行进一步筛选，比如
span.news {...} 筛选出标签为span的且class为news的控件
.headline h2 p span {...} 筛选出class为headline且标签为h2或p或span的控件
可以CSS selector可以满足任何筛选需求（html定义良好的情况下）
另外JavaScript中的querySelector方法，接受的参数就是CSS selectorstyle
筛选出想要的控件后，就是应用style了。通用写法：
key: val;
key是预定义好的，某种控件对应某些key。如果使用的key该控件不支持会被忽略
具体style写法会有很多种，可以查询CSS手册。这里做个大概的描述
通用属性：
因为所有控件都是box model所以全部支持以下属性：
display: block
width: 200px;
height: 200px
CSS里所有表示大小的值需要加单位：px为像素，em为参考父节点设置大小，cm为厘米。部分支持百分比。字体还有pt。
行内元素可以使用display提升为块元素，从而可以指定高宽和背景等
margin: 1px;
border: 1px;
padding: 1px;
如果想要精确调整各个边界，使用xx-left, xx-right, xx-top, xx-bottom
背景：
background-color: green;
background-image: url(“images/bg.jpg”);
background-position: top center;
backround-attachment: fixed;
如果把背景样式直接应用于body就是背景图片了，但是控件也可以使用背景图片，用好了能够达到有趣的视觉效果
另外CSS里字符串最好加上引号。相对路径是从.css文件开始算，这与javascript中从.html开始算截然不同
CSS里所有颜色可以使用名称、16进制、rgb(0,0,0)等表示
字体：
font-family: “Arial”;
font-size: 14px;
color: red;
字体家族的值建议加引号
图片：
border-width: 1px;
border-color: blue;
border-style: none;
border-radius: 12px; 圆角图片
opacity: 0.5;
box-shadow: 8px 8px 14px #06C; 阴影
border通常用于给图片镶边，用于区分于背景
阴影可以使用公示表示，定义几个关键值浏览器便能够计算出来
链接：
a:link {…}
a:hover {…}
a:visited {…}
a:active {…}
某些控件需要根据所处状态显示不同效果，CSS为这类控件添加了一种语法形式：使用冒号表示状态
比如a:visited就是定义访问过的连接的外观
a配合block + background就可以制作按钮式连接