CSS（Cascading Style Shee,层叠样式表）
三种导入CSS样式方式
行内样式，内嵌
元素全局属性style中添加,例：<input style = "CSS样式">页内样式
style元素,在头部<head></head>中写
<head>
<style type="text/css">
body{
color : red ;
}
</style>
</head>
- 外部样式：链接层叠样式表.css文件
link元素，在头部<head></head>中写
<link rel ="stylesheet" type="ext/css" href="styles.css">
</link>
CSS层叠样式规则：就近原则、叠加原则
样式表之间导入
- @import “样式表文件.css”
- 声明样式表的字符编码
- @charset "UTF-8"
- @import “样式表文件.css”
三个重要概念
- 盒模型
- 外边距（margin）
- 边框（border）
- 内边距（padding）
- 内容（content）
- 宽度和高度(内容content的width&height）
Snip20161012_13.png
- 选择器
- 通过选择器找到对应的元素设置样式
- 通配符\*,选择所有元素
- 标签选择器：直接选择元素
- 类选择器：元素属性class=“类名”，.类型
- id选择器：元素属性id=“id号”，#id
- 属性选择器：元素属性xx=“属性值”，[属性]
- 选择器优先级：important>行内样式>id>（类|属性|伪类|伪元素）>标签>通配符>继承
- 复合选择器优先级：
- 权值相加，大的优先，相同的话就近原则。
- 权值：通配符-0，标签选择器-1，（类选择器|属性选择器|伪类|伪元素）-10，id选择器-100，important-1000
- 属性property
动画
背景
边框和轮廓
盒（框）
颜色
内容分页媒体
定位
可伸缩框
字体
生成内容
网格
超链接
行框
列表
外边距
Marquee
多列
内边距
分页媒体
定位
打印
Ruby
语音
表格
文本
2D/3D 转换
过渡
用户界面
如果直接相关的样式中找不到某个属性的值，那么就会求助于继承机制，使用父元素的这个样式的属性值。
属性可继承性
- 可继承属性(父元素属性可被子元素继承，文字控制属性可继承)
- 不可继承属性（父元素属性不可被子元素继承，块级元素标签属性不可继承）
总结：
与元素外观（文字颜色、字体等）相关的样式会被继承；
与元素在页面上的布局相关的样式不会被继承。
