- 什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
- CSS 注释
以 /* 开始, 以 */ 结束
- 选择器{CSS属性}
-属性名和属性值成对出现 键值对
标签选择器
类选择器 定义：.类名
id选择器 定义：#id名
通配符选择器 只有“*” 所有标签都设置相同样式
p {/* 标签选择器 */
/* 字体颜色 */
color: aqua;
/* 字体大小 */
font-size: 20px;
}
.red {/* 类选择器 定义：.类名 */
color: red;
}
.size {
font-size: 20px;
}
/* id选择器 定义：#id名 */
#blue {
color: aqua;
}
/* 通配符选择器 只有“*” 所有标签都设置相同样式 */
* {
font-size: 50px;
}
</style>
- 字体修饰属性
font-size
字体大小 一定要有单位px
font-weight
字体粗细 正常为400 加粗为700
font-style
字体倾斜 normal为正常 italic为倾斜
line-height
字体行高 数字+px or 数字（当前标签font-size属性值的倍数
行高-垂直居中技巧：行高属性值等于盒子高度属性值 垂直居中只适用于单行文字
font
复合属性：是否倾斜 是否加粗 字号/行高 字体（必须按顺序写，字号和字体值必须写）
text-indent
首行缩进 数字+px or 数字+em（1em=当前标签的字号大小）
text-align
控制内容水平对齐方式 left左对齐（默认) center居中对齐 right右对齐
图片居中也是一样的使用方式 text-decoration
文本修饰线 none：无 underlin：下划线 line—through：删除线 overline：上划线
color
文字颜色 rgba(红，绿，蓝，透明度） or #RRGGBB
/* 字体大小 一定要有单位px */
font-size: 30px;
/* 字体粗细 正常为400 加粗为700*/
font-weight: 400;
/* 字体倾斜 normal为正常 italic为倾斜 */
font-style: italic;
/* 字体行高 数字+px or 数字（当前标签font-size属性值的倍数 */
/* 行高-垂直居中技巧：行高属性值等于盒子高度属性值 垂直居中只适用于单行文字 */
line-height: 20px;
/* 字体族 */
font-family: 楷体;
/* font复合属性：是否倾斜 是否加粗 字号/行高 字体（必须按顺序写，字号和字体值必须写）*/
font: italic 400 20px/2 楷体;
/* 首行缩进 数字+px or 数字+em（1em=当前标签的字号大小） */
text-indent: 2em;
/* 控制内容水平对齐方式 left左对齐（默认) center居中对齐 right右对齐 */
text-align: center;/* 图片居中也是一样的使用方式 */
/* 文本修饰线 none：无 underlin：下划线 line—through：删除线 overline：上划线 */
text-decoration: underline;
/* 文字颜色 rgba(红，绿，蓝，透明度） or #RRGGBB*/
color: rgba(red, green, blue, 0.3);
}
- 继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
- 初始值
CSS中，每个属性都有一个初始值，可以使用initial关键字显示重置为初始值
-
布局（Layout）是什么？
确定内容的大小和位置的算法
根据元素、容器、兄弟节点和内容等信息来计算
- width
指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其它属性确定
百分数相对于容器的content box宽度
-
height
指定content box高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效
-
padding
指定元素四个方向的内边距
百分数相对于容器宽度
-
border
指定容器边框样式、粗细和颜色
三种属性border-width；border-style；border-color
四个方向 border-top；boder-right；border-bottom；border-left
-
margin
指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度
-
总结
本节课主要学习了CSS选择器的特异度，CSS继承，CSS求值过程解析，CSS布局的方式及相关技术
