CSS核心属性
一、文本相关属性
1、字体大小属性
（1）属性:font-size
（2）字体大小取值单位:px，pt，em等
- px ===== 像素单位
- pt ===== 磅值单位：12pt=16px
- em ===== 相对单位：相对于自己字体标签大小进行缩放的一个倍数，默认的情况下，1em=16px，也就是2em=32px
注意：页面中默认字体大小为16px；一般情况下，浏览器中最小的字体是10/12px；设计图常用最小字号是12px
2、文本颜色属性
（1）属性:color
（2）颜色取值：颜色单词、六位十六进制的颜色值、rgb取值
- 颜色单词：用颜色英文单词命名，如：red blue orange...
- 十六进制颜色值：由于“#”键和六位十六进制的颜色值（0-9A-F）组成，如：#123456、#aabb12等
- rgb取值：rgb(red,green,blue) 每一个颜色取值范围：0~255
3、文本字体属性
（1）属性：font-family
（2）属性取值：中文字体、英文字体
其中，字体取值的书写如下：
- 中文字体，不需要带引号
- 单个英文单词字体，不需要带引号
- 多个英文单词组成一个字体的话，则需要带引号，且英文单词之间用空格隔开
- 可以取值为一个值也可以为多个值，多个取值之间使用逗号隔开（多个取值字体时中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推）
注意：浏览器中默认字体为宋体
现在大部分高版本的浏览器，为了增加用户的体验度，让用户看起来更好看，选择改变成了微软雅黑
4、文本加粗属性
（1）属性：font-weight
（2）属性取值：数值类型、关键词类型
1、数值类型：100-900整百的数值，其中，W3C中规定固定数值的加粗程度
100------细体
400------正常
700------加粗
900------更粗
注意事项：700和900显示的效果一致，但是900更加具有强调性
2、关键词类型：
lighter------细体
normal-------正常
bold---------加粗
bolder-------更粗
注意事项：bold和bolder显示的效果一致，但是bolder更加具有强调性
1、问题：为什么p标签本身就是正常的字体，还需要使用font-weight: 400;呢？
答案：取值为400的时候为正常字体，可以让具有加粗效果的标签变为正常字体，即可以取消：b strong h1-h6的加粗效果
2、问题：为什么有b标签，还需要使用font-weight: 700/900;呢？
答案：
1）能够给所有的标签实现加粗效果，没有必要单纯使用b标签
2）使用CSS属性可以节约代码结构
3）可以使用CSS属性完成划过效果
5、文本倾斜属性
（1）属性：font-style
（2）属性取值：
- italic--------倾斜
- oblique-----斜体字
- normal-----正常字体
注意：italic和oblique显示的效果一致，但是oblique更加具有强调性
6、文本水平对齐
（1）属性：text-align
（2）属性取值：
- left----------左对齐（默认值）
- right--------右对齐
- center-------居中对齐
- justify-------两端对齐（经常使用）
7、文本行间距属性（行高）
（1）属性：line-height
（2）取值：数值+px
（3）应用场景：实现某一个区域里面的单行文本垂直居中对齐，即line-height取值等于高度。
注意：行高即为第一行文字的最上边到第二行文字最上边的距离
8、复合属性：一个属性能实现多种样式
（1）属性：font
（2）属性使用：
属性书写格式：
font:font-style font-weight font-size/line-height font-family
例如：
font:italic bold 20px/30px 宋体
（3）注意事项：
- 复合属性使用的时候，必须带字体和字体大小，字体必须位于最后面
- 字体大小和行高使用的时候，必须使用/进行连接，前后不能有空格，/前面代表字体大小，/后面代表行间距
- 可以省略或者调整前面两个的加粗或倾斜书写位置
9、文本修饰线：指的是线条的修饰，有下划线、中划线、上划线、取消修饰线
（1）属性：text-decoration
（2）属性取值：
- underline---------下划线（u）
- line-through------中划线（s,del）
- overline-----------上划线
- none--------------取消修饰线
注意：可以使用多修饰线-多个属性值共用一个属性，并且使用空格隔开
如 text-decoration: underline line-through;
10、首行缩进
（1）属性：text-indent
（2）属性取值：默认为2em（首行缩进两位）
1、首行缩进只对第一行起作用
2、取值为整数，也可以取值为负数
11、间距属性
（1）属性分类：字符间距属性、词间距属性
1、字符间距属性：指对英文字母、标点符号、空格、汉字进行间距修饰
属性：letter-spacing
2、词间距属性：指对英文单词与英文单词之间进行间距修饰
属性：word-spacing
（2）属性值：数值+px
二、背景相关属性
1、背景颜色
（1）属性：background-color
（2）属性取值：颜色单词、六位十六进制的颜色值、rgb取值、rgba取值
1、颜色单词：用颜色英文单词命名，如：red blue orange...
2、十六进制颜色值：由于“#”键和六位十六进制的颜色值（0-9A-F）组成，如：#123456、#aabb12等
3、rgb取值：rgb(red,green,blue) 每一个颜色取值范围：0~255
4、rgba取值：rgba(red,green,blue,alpha)
red------红色
green----绿色
blue-----蓝色
alpha----透明度-取值范围：0-1，取值是小数，一般保留一位小数
0---透明
1---不透明
2、背景图片
（1）属性：background-image:url(图片的路径)
（2）属性取值：取值即为图片的路径
注意：只要插入背景图片，默认就会产生平铺效果，产生平铺后，背景颜色是看不到了不是被代码覆盖了
3、背景平铺属性（背景重复）
（1）属性：background-repeat
（2）属性取值：
- repeat-----------默认重复平铺
- no-repeat-------取消平铺（实际开发中经常应用）
- repeat-x---------水平平铺
- repeat-y---------垂直平铺
4、背景图片的位置
（1）目的：只要插入背景图片就默认产生平铺效果，取消平铺后，背景图片默认在左上角显示，需要调整背景图片的显示位置
（1）属性：background-position
（2）属性取值：数值单位、关键词
书写格式：background-position:x y;
x表示水平方向位置
y表示垂直方向位置
x、y的取值有两种格式：数值单位、关键词
1、数值单位：
x取值为正数，向右侧走；x取值为负数，向左侧走
y取值为正数，向下边走；y取值为负数，向上边走
2、关键词：
x、y取值：left/right/center
5、调整背景图片尺寸大小
（1）属性：background-size
（2）属性取值：数值单位、关键词
书写格式：background-size:x y;
x-----水平方向大小
y-----垂直方向大小
x、y的取值有两种格式：数值单位、关键词
1、数值单位：
x表示图片宽度
y表示图片高度
2、关键词：
cover------覆盖（应用频率高）
等比例放大这个图片：直到这个图片撑满这个盒子位置
问题：容易出现被裁减的问题
contain----包含
等比例放大这个图片：只要有一个边缘撑满了，就结束了
问题：容易出现留白的问题
6、背景图片的滚动和固定
（1）定义：
- 滚动：当页面有滚动条的时候，滚动滚动条，背景图片被带上去的效果
- 固定：当页面有滚动条的时候，滚动滚动条，背景图片固定在原来的位置，不会被滚上去
（2）属性：background-attachment
（3）属性取值：scroll---滚动、fixed----固定
注意：只要添加了背景的固定，背景图的参照物位置都是浏览器窗口的左上角；大小调整也是参照浏览器窗口
7、背景的复合属性：一个属性能实现多种样式
（1）格式：
background:color image repeat position/size attachment
（2）注意事项：
1）后面可以跟一个值，也可以跟多个值
2）多个值不分先后顺序
3）尺寸大小和位置一起使用的时候，必须使用/连接，就算位置不调整，也需要给值(如：0px 0px/200px 200px)
4）/前面代表的是位置，/后面代表的是大小
8、精灵图
（1）含义：将页面中使用到的图片放在一张背景透明的图片上面, 通过背景定位的属性将对应的精灵图区域显示在对应的元素内
（2）优点：主要是降低图片在服务器存储时的请求次数
（3）属性：background-position
（4）使用：
1、先插入精灵图片，即：
background-image: url(img/素材2.png);
2、在精灵图中查看小图标位置，将图片向左向上移动到当前小图标位置处即可，即：
background-position: -275px -7px;
三、列表相关属性
列表属性涉及到列表项类型、图片和位置，接下来逐个讲解。
1、列表项类型
（1）属性；list-style-type
（2）属性取值：
- disc--------黑色实心圆点
- circle-------黑色圆环
- square-----黑色实心方块
- none-------取消列表项
2、列表项图片
（1）属性：list-style-image:url(路径)
（2）注意：实际开发时不会使用列表图片作为列表项，大部分使用背景图作为列表项，因为背景图方便调整位置，这里了解即可
3、列表项位置
（1）属性：list-style-position
（2）属性取值：
- inside--------里面
- outside------外面
4、列表项复合属性
（1）属性：list-style:type image position
（2）注意事项：
- 三个取值可以调整位置
- 后面可以跟一个值也可以跟多个值
实际开发时，我们经常使用的一行代码是：list-style:none;
目的：取消列表项的项目类型
四、边框属性
边框：代表盒子或者是容器的边缘，用来隔绝元素内外的一个辅助线
作用:可以用来制作特殊图形，如：三角形、梯形、旗帜、风车等
下面来认识一下边框的属性---四个方向
1、边框复合属性
（1）属性：border
（2）属性使用：border:10px solid gray;
（3）注意事项：边框加上后会撑大盒子---占位置
border 后面跟多个取值，且取值之间以空格隔开
2、边框单一属性-粗细
（1）属性：border-width
（2）属性取值：取值内容为像素
border-width: v1;------------实现的是四个方向边框的粗细-v1上下左右
border-width: v1 v2;---------实现的是四个方向边框的粗细-v1上下，v2左右
border-width: v1 v2 v3;------实现的是四个方向边框的粗细-v1上，v2左右，v3下
border-width: v1 v2 v3 v4;---实现的是四个方向边框的粗细-v1上，v2右，v3下，v4左
规律：当粗细取值为四个值时，可以记忆为上右下左
3、边框单一属性-样式
（1）属性：border-style
（2）属性取值：取值内容设置边框样式，也可以取四个值，取值逻辑同粗细一致
边框样式取值：
solid=------单实线
dashed------虚线（线段）
dotted------虚线（点状）
double------双实线
4、边框单一属性-颜色
（1）属性：border-color
（2）属性取值：取值内容设置颜色，也可以取四个值，取值逻辑同粗细一致
1、单一属性能否直接单独使用：
如果单独使用的时候，粗细和颜色均不能实现效果，但是样式可以实现，默认3像素粗细、黑色的实线，因此样式是必须项
2、背景颜色能蔓延到边框位置处
下面是某个单一方向的边框属性
1、上边框
（1）属性：border-top
（2）取值：同border复合属性取值一致
border-top: 10px solid green;
2、右边框
（1）属性：border-right
（2）取值：同border复合属性取值一致
border-right: 10px solid yellow;
3、下边框
（1）属性：border-bottom
（2）取值：同border复合属性取值一致
border-bottom: 10px solid blue;
4、左边框
（1）属性：border-left
（2）取值：同border复合属性取值一致
border-left: 10px solid orange;
颜色中透明色的取值有两种： rgba() ; transparent
五、浮动属性
1、属性：float
2、属性取值：
- left---------左浮动
- right-------右浮动
- none-------默认值不浮动
3、浮动特点
（1）默认值是不浮动的
（2）浮动元素不占页面空间，导致后面的元素上去补位置
（3）单个元素浮动的时候，只会在自己本行中左侧或者右侧浮动
（4）所有元素都浮动时都会让元素横向显示
左侧浮动：各元素从左侧开始依次向右显示
右侧浮动：各元素从右侧开始依次向左显示
总结：只要布局的时候想让元素横向显示，我们目前来看就是使所有的元素都浮动
（5）如果盒子大小参差不齐，那么实现的效果如下：
- 如果所有元素都浮动的话，剩下的空间不够了，那么元素就会折行显示
- 如果盒子浮动的话，参照是以倒数第二个浮动盒子的右侧和下方进行补位的；若高度不一致，则会出现被卡住的效果
4、清除浮动
浮动带来的影响：让元素脱离文档流不占页面空间，后面的元素上去补位置，导致出现文字环绕的问题，因此需要清除补位元素的浮动
（1）清除浮动的属性：clear
（2）属性取值：
- none--------不清除浮动
- left----------清除左侧浮动
- right--------清除右侧浮动
- both--------清除左侧和右侧浮动（常用）
