一、写CSS的三种方式
1、内部样式
使用style标签，直接把CSS写到html文件中。
此时的style标签可以放到任何位置，一般建议放到head标签里
针对的对象为整个html文件中的同一类对象
2、内联样式
使用style属性，针对指定的元素设置样式。
此时不需要写选择器，直接写属性键值对，这个时候的样式只是针对当前元素生效。
只针对当前对象
内联样式的优先级比内部样式优先级高
3、外部样式
创建一个.html文件，再创建一个.css文件，用来写格式
把CSS代码单独作为一个.css文件，再通过link属性，让html引入该css文件。
实际开发中，一般都使用外部样式来写css。
二、 CSS选择器
1、标签选择器
在{}的前面写标签名字，此时意味着会选中当前页面中所有的指定标签。
2、类选择器
创建CSS类，手动指定哪些元素应用这个类
定义类，需要使用 . 开头
引用这个类时，通过属性class属性=“类名”即可，不需要带 .
3、ID选择器
html页面中的每一个元素，都可以设置一个唯一的id，作为元素的身份标识。
通过操作id来选中元素。
类选择器，可以让多个元素应用同一个类。
id选择器，只能针对唯一的元素生效。同一个页面中id的值不能重复
#id名{属性值}
4、后代选择器
先找到ul标签，再找到ul中的li，对li中的元素进行操作。
不一定非要是子元素，只要是后代就行。
5、子选择器
只找匹配的子元素，不找孙子元素之类的，针对性更强。
6、并集选择器
多组选择器应用同一个样式
选择器1，选择器2{属性}
7、伪类选择器
复合选择器的特殊用法。
前面的选择器都是选中某一元素。而伪类选择器是选中某个元素的某个特定状态。
:hover 表示鼠标悬停时的状态
:active 表示鼠标按下时的状态
三、CSS常用属性
1、字体属性
a. font-family 设置字体家族
这个属性指定的字体，要求必须是系统已经安装了的。
如果要指定的一些特殊字体系统上没有，则不能正确显示。
这种情况一般是需要通过浏览器请求对应的服务器，获取到指定字体文件，才能设置。
b. font-size 设置字体大小
浏览器的每一个文字，都可以看作是一个方框。
如果是英文阿拉伯数字，方框比较窄。如果是中文，一般就是一个正方形。
设置font-size:20px； 即文字框高度是20px
c. font-weight 设置字体粗细
d. font-style 设置文字倾斜
e. color 设置文字颜色
RGB，每种颜色都分配一个字节，每个字节的范围是0-255或者00-FF
如果每个分量的两个十六进制数字都相同，则可以把6位十六进制缩写成3位十六进制。
f. text-slign 设置文本对齐方式
g. text-decoration 设置文本装饰
h. text-indent 设置首行缩进
文本缩进的值也可以是负数，则往左缩进
i. line-height 设置行高
2、背景属性
3、圆角矩形
四、元素的显示模式
display: block; //块级元素
display: inline; //行内元素
关于块级元素和行内元素的区别（前端的经典面试题）
1.块级元素会独占一行，行内元素不独占一行。
2.块级元素的高度，宽度，内外边距都可以设置。而行内元素的高度、宽度、行高无效，内边距有效，外边距有时有效有时无效。
3、块级元素默认宽度和父元素一样宽，行内元素默认宽度和里面的内容一样宽。
五、CSS盒子模型
描述了html元素基本的布局规则。
用来控制元素与元素之间或者元素和内容之间的相对位置。
1、content：内容
2、paddig: 内边距
padding: 10px; //表示四个方向都是10px边距
padding: 10px 20px; //表示上下边距都是10，左右边距是20
padding: 10px 20px 30px 40px; //分别对应上、右、下、左（顺时针）
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
3、border: 边框
设置边框时要设置三个方面，边框的粗细，边框的颜色，边框的风格（实线solid、虚线dashed、其他的线）
border:5px rgb(0,255,0) solid
边框默认情况下会撑大盒子。如果不想把盒子撑大，则使用
box-sizing: border-box;
4、margin: 外边距
写法和padding类似
特殊用法：
把margin-left和margin-right设置为auto（让浏览器自动调节）
此时该元素就能在父元素内部居中放置
六、弹性布局
主要解决水平方向排列问题。
1、开启弹性布局
display: flex;
给要水平排列的元素的父元素设置flex
此时，弹性容器里面的元素，不再是块级或者行内元素了，而是成为了弹性元素，是遵守弹性布局的，可以设置尺寸和边距。
2、设置元素水平方向的排列方式
justify-content:flex-start;
flex-start表示靠左排列，center表示靠中间排列，flex-end表示靠右排列,space-around让元素等间距排列（左右都有空白）,space-between让元素等间距排列（只有中间有空白）
3、设置元素垂直方向的排列方式
align-items: flex-end;
七、快捷键
类的注释/* */，Ctrl+/
直接输入div.one，按下enter，会自动生成一个div标签，class值为one
直接输入div#one,按下enter，会自动生成一个div标签，id值为one
