目录
目录
背景图的位置 background-position: x轴 y轴;
背景透明(CSS3)background: rgba(0,0,0,0.3)
复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定
背景图的位置 background-position: x轴 y轴;
背景透明(CSS3)background: rgba(0,0,0,0.3)
复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定
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 向右和向下为正数,反之,可以设置负数
- 关键字
- 水平方向:left/center/right
- 垂直方向: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 去掉列表符号