CSS学习笔记三——CSS常见属性一

一、文本属性

1. 字体大小 font-size：单位是 px，浏览器默认16px，设计图常用字号是12px；
2. 字体 font-family：字体中有空格时，需加双引号，且可设置多重字体，用逗号间隔，浏览器解析时，先以第一个字体解析，没有该字体时解析第2个字体，以此类推；
3. 颜色 color：三种取色方式，一是写对应颜色的英文单词，如：red、purple；二是十六进制写法（0-9,A-F），任意搭配，如：#00FFAA，#FFFFFF（六个值一样可省略为 #FFF）；三是 rgb 配色，三个值任意搭配，每个取值范围为 0-255，0为最弱，255为最强，如：rgb(0,122,255)；
4. 加粗 font-weight：取值可为100-900，整百取值，共9个，100为细体，400为正常，700为加粗，900为更粗体（显示上与700差不多，只是更具强调作用），也可为英文取值，如：lighter（更细）、normal（正常）、bold（粗体）、bolder（更粗体）；
5. 倾斜 font-style：取值有 italic（斜体）、oblique（倾斜，更具强调作用）、normal（常规显示）；
6. 水平对齐 text-align：取值有 left（默认）、center、right、justify（两端对齐），前三个值单行文本及多行文本均可使用，而两端对齐只在多行文本时有效；
7. 行高 line-height：用于设置文本的垂直居中，单行文本时将行高与元素高度设置成一致的即可垂直居中；
8. 字符间距 letter-spacing：常用于汉字间，改变每个字符之间的距离；
9. 词间距 word-spacing：常用于英文中，改变每个英文单词之间的距离，取负值时，单词会交叉；
10. 首行缩进 text-indent：只对第一行起作用，要空两格时则将值设置为当前文本大小的2倍，常用 2em 表示，em为当前文本大小，自动随文本大小改变；
11. 文本修饰 text-decoration：取值有 underline（下划线）、line-through（删除线）、overline（上划线）、none（取消修饰），联合使用时可用空格间隔；
12. 改变字母大小写 text-transform：取值有capitalize（单词首字母大写）、lowercase（全小写）、uppercase（全大写）、none；
13. 文字简写 font：是 font-style font-weight font-size / line-height font-family的简写，顺序不能改，且必须同时指定 font-size、line-height和 font-family 属性时才起作用，如：font:italic 800 30px/80px “宋体”；

常用字体：
 宋体 SimSun
 黑体 SimHei
 微软雅黑 Microsoft Yahei
 微软正黑体 Microsoft JhengHei
 新宋体 NSimSun
 仿宋 FangSong
 楷体 KaiTi
 仿宋_GB2312 FangSong_GB2312
 楷体_GB2312 KaiTi_GB2312

二、列表属性

1. 列表符号 list-style-type：取值有 disc（实心圆）、circle（空心圆）、square（实心方块）、none（取消符号）；
2. 列表符号图片化 list-style-image：将图片设置为列表符号样式，语法为 list-style-image：url(图片路径)；
3. 列表符号位置 list-style-position：设置列表符号的放置位置，取值有 outside（列表外，默认）、inside（列表内）；
4. 列表简写 list-style：是list-style-type list-style-image list-style-position的简写形式，顺序可改变，常用取值为none，去掉默认符号，如：none url(1.jpg) inside；

三、背景属性

1. 背景颜色 background-color：四种取色方式：一是写对应颜色的英文单词；二是十六进制写法，如：#00FFAA；三是 rgb 配色，三个值任意搭配，每个取值范围为 0-255，0为最弱，255为最强，如：rgb(0,122,255)；四是 rgba 配色，比 rgb 多一个值，作为透明度使用，该取值范围为0-1，0为完全透明，1为不透明，如：rgb(0,122,255,0.4)；
2. 背景图片 background-image：属性值为 url(图片路径)，图片默认平铺，即位置大，图片小时，会重复多张图片放满位置，图片大于位置时会被裁剪；
3. 背景图片平铺 background-repeat：取值有：repeat（默认）、repeat-x（x轴平铺）、repeat-y（y轴平铺）、no-repeat（不平铺）；
4. 背景图片位置 background-position：可向右向下移，写法有三种：一是 px 写法，如：20px 20px；二是百分比，该方法不准确，较少用，如：10% 10%；三是 取值搭配，（left、center、right）与（top、center、bottom）中任意两两搭配，如：left bottom；
5. 背景图片大小 background-size：图片容易出现失真，其写法有三种：一是 px 写法，如：20px 20px；二是百分比，如：10% 10%；三是取值 cover，将背景图片扩展到足够大，使其能完全覆盖背景区域，为等比例放大，有一部分可能无法展示；四是取值 contain，将背景图片扩展到最大尺寸，使其宽度和高度完全适应背景区域，有一部分可能铺不满，出现留白；
6. 背景图片的固定 background-attachment：防止背景图片被滚动不见，取值有：scroll（滚动，默认）、fixed（固定，固定在浏览器窗口中，固定后就相对于浏览器窗口了）
   fixed 可能出现两种现象：一是盒子挪至中间时，其背景图片消失了，可与 background-position 搭配使用；二是两个盒子的背景图都设为 fixed 时，从一个盒子移动到另一个盒子位置时，背景图会更改，从而产生视差效果。
7. 背景简写 background：是background-color background-image background-repeat background-position的简写，顺序可更改，如：url(1.jpg) no-repeat center yellow，也可删除部分值，只保留图片路径；

四、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！