CSS基础三（css字体属性，文本属性，背景属性，列表属性）

目录

1字体属性

字体大小（em，rem，px区别）

字体加粗 font-weight

字体倾斜 font-style

字体类型 font-family

复合写法 font

2文本属性

颜色 color

文本水平对齐方式 text-align

行高 line-height

目录

1字体属性

字体大小（em，rem，px区别）

字体加粗 font-weight

字体倾斜 font-style

字体类型 font-family

复合写法 font

2文本属性

颜色 color

文本水平对齐方式 text-align

行高 line-height

文本修饰 text-decoration

文本缩进 text-indent

字符间距 letter-spacing

单词之间的距离 word-spacing

大小写转换 text-transform

3背景属性

背景颜色 background-color

背景图 background-image:url()

背景图是否重复 background-repeat

背景图的位置 background-position: x轴 y轴;

背景附着background-attachment

背景透明(CSS3)background: rgba(0,0,0,0.3)

复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定

4列表属性

---

文本修饰 text-decoration

文本缩进 text-indent

字符间距 letter-spacing

单词之间的距离 word-spacing

大小写转换 text-transform

3背景属性

背景颜色 background-color

背景图 background-image:url()

背景图是否重复 background-repeat

背景图的位置 background-position: x轴 y轴;

背景附着background-attachment

背景透明(CSS3)background: rgba(0,0,0,0.3)

复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定

4列表属性

---

1字体属性

字体大小（em，rem，px区别）

• font-size 一般情况是偶数，并且一般不低于10px
• 数值+px
• 数值+em 默认值1em=16px 父元素有字体大小，参考的是父元素的字体大小
• 数值+rem 默认值 1rem=16px 根元素(html)有字体大小时，参考根元素的字体大小(移动端)

字体加粗 font-weight

• bold 加粗
• normal 去掉加粗样式

字体倾斜 font-style

• italic 倾斜
• normal 去掉倾斜样式

字体类型 font-family

• 中文，加引号
• 英文，一个单词不用引号，多个单词要加引号引起来
• 多个字体类型用逗号隔开，浏览器会依次检索，有该字体直接显示，找到最后都没有该字体时，显示默认字体

复合写法 font

• font: 字体加粗 字体倾斜 字体大小/行高 字体类型

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

• 字体加粗 字体倾斜为可选
• 字体大小/行高 字体类型 必选，并且必须是该格式

2文本属性

颜色 color

• 颜色单词
• 十六进制 #f1f1f1
• rgb(0-255,0-255,0-255) rgb(241, 241, 241);

文本水平对齐方式 text-align

• left 左对齐 默认值
• center 居中
• right 居右
• justify 两端对齐 内容向两边，加大中间的间距

行高 line-height

• 数字：字体大小的倍数
• 数值+px
• 应用
  • 多行文本：加行高可以增大行和行之间的距离
  • 单行文本：将行高和元素的高度设置成一样，实现垂直居中

文本修饰 text-decoration

• underline 下划线
• overline 上划线
• line-through 删除线
• none 去掉下划线t:

文本缩进 text-indent

• 数值+px 只对独占一行的元素才生效
• 可以设置负数
• 缩进两个词：设置text-indent:2em; 参考当前元素的字体大小

字符间距 letter-spacing

• 数值+px
• 中文：加大字和字之间的距离 英文：加大字母之间的距离

单词之间的距离 word-spacing

• 数值+px
• 只对英文生效，加大单词和单词之间的距离

大小写转换 text-transform

• 首字母全部大写 capitalize
• 全部小写 lowercase
• 全部大写 uppercase
• 默认值 none

3背景属性

背景颜色 background-color

背景图 background-image:url()

背景图是否重复 background-repeat

• repeat 重复
• repeat-x 在x轴重复
• repeat-y 在y轴重复
• no-repeat 不重复

背景图的位置 background-position: x轴 y轴;

• 数值+px 向右和向下为正数,反之,可以设置负数
• 关键字
  1. 水平方向:left/center/right
  2. 垂直方向:top/center/bottom
• 只设置一个值的情况下,第二个值默认为居中

背景附着background-attachment

• 参数：
• scroll : 　背景图像是随对象内容滚动
• fixed : 　背景图像固定
• 说明：
• 设置或检索背景图像是随对象内容滚动还是固定的。

背景透明(CSS3)background: rgba(0,0,0,0.3)

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定

• 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉

4列表属性

• 列表符号 list-style-type
  • disc 实心圆
  • squre 方块
  • circle 空心圆
  • none 去掉列表符号