在上海乐字节学习的第四天（持续更新中）

1.CSS的产生(Cascading Style Sheets:层叠样式表)

随着HTML的成长，为了满足页面设计的要求，HTML添加了很多显示的功能，但是随着这些功能的增加，HTML变得越来越杂乱，而且HTML页面也越来越臃肿，于是CSS便诞生了，它的版本有2.0和3.0的版本，CSS3因为有兼容问题，所以江大CSS3样式的时候，这里会特殊说明

2.基本语法；

选择器 {
属性1：属性值1;
属性2：属性值2; }

3.样式表位置
行内样式表：权重高，书写方便，但控制内容少，结构和样式完全没分离，让html文件臃肿，很少使用

内容

内部样式表：结构和样式部分分离，使用较多 外部样式表：完全实现结构和样式分离，需引入，使用最多，

4.字号(font-size)

em:相对于当前对象内文本的字体尺寸 px：像素，最常用，推荐使用（一般网页中最常用的大小为14px） in：英寸 cm：厘米 mm：毫米
pt：点

5.字体(font-family)
当属性值为多个字体时，中间用英文逗号隔开，中文字体名和字体名中包含空格、#、$等字符需加英文双引号，英文字体名需放在中文字体名前面，尽量使用系统默认字体，保证任何用户的乐乐趣中都能正确显示

选择器 {
font-family：“Microsoft YaHei”,tahoma,arial,“宋体”; }

6.Unicode字体(为了兼容使用浏览器，英文Unicode是大家都能识别的)

宋体 → SimSun → \5b8b\4f53
新宋体 → NSimSun → \65b0\5b8b\4f53
黑体 → SimHei → \9ED1\4F53
微软雅黑 → Microsoft YaHei → \5FAE\8F6F\96C5\9ED1
楷体_GB2312 → KaiTi_GB2312 → \6977\4F53_GB2312 隶书
→ LiShu → \96B6\4E66 幼圆
→ YouYuan → \5E7C\5706 华文细黑 →
STXihei → \534E\6587\7EC6\96D1 细明体
→ MingLiU → \7EC6\660E\4F53 新细明体 →
P MingLiU → \65B0\7EC6\660E\4F53

微软雅黑和宋体是几乎使用电脑都支持的字体，所以字体的表示用一下书写形式最妥当

选择器 {
font-family："\5FAE\8F6F\96C5\9ED1","\5b8b\4f53"; }

7.注释标签

ctrl+反斜杠：/* 需要注释的内容 */

8.字体的样式属性

选择器 {
font-weight：normal(400)、bold(700)、bolder、lighter、100-900(100的倍数); /粗细/
font-style:nomal、italic、oblique; /倾斜/
color：red、#000、#ffffff、rgb(255,255,255); /颜色,16进制最常用/
color:rgba(0,0,0,0.3); /a为0-1之间的小数，表示半透明度/
line-height：**px; /行高/
test-align:left、center、right; /水平对齐方式/
test-indent:2em; /水平对齐方式,1em为一个汉字宽度/
letter-spacing:**px; /文字间距/
word-spacing:**px; /单词间距，对中文无效/ }

9.font的综合写法（顺序不能随意打乱，属性可以省略不写，但最后两个不能省）

选择器 {
font：倾斜、粗细、大小、字体; }

10.块级样式(block)、行内元素(inline)和行内块元素(inline-block)，他们三者可以通过display属性随意相互转换

块级元素：独自占整个浏览器的一行，宽度默认容器100%，可设置高、外边距和内边距属性，可容纳内联元素和其他块元素(div、p、h1、ul、ol、li…)

行内元素：和相邻的行内元素并排一行，没有高宽属性，但水平方向的padding和margin可设置，垂直方向无效，默认宽度就是本事内容宽度，行内元素只能容纳文本或者其他行内元素(a、strong、b、em、i、span…)

行内块元素：和相邻行内元素并排，但之间有空隙，，默认宽度是本身内容宽度，高度、行高、内外边距都可控制(img、input、td)

选择器 {
background-color:#0f0;
background-image:url(image/background.jpg);
background-repeat:no-repeat;
background-position:right top; /方位名词没有顺序，如果只写一个，另一个默认为center，也可以用数字+px精确定位/ }