20200813冯强

一.CSS文本格式化
1.font-size 设置字体大小
2.font-family 设置字体类型 但是尽量不使用微软(收费)
3.font-weight 加粗字体 400为正常 700加粗 还有其他属性 bold(粗)lighter(细)
4.font-style 设置字体样式 italic(斜体)
5.font-variant 小型大写字母 inherit应该从父元素继承 font-variant 属性的值
6.简写 font:style variant weight size family
至少写两个 size family 且放在最后
7.color 设置字体颜色不要使用英文单词
8.text-align 设置文本对齐方式
9.line-height 行高 特殊值: 和高度相同时垂直居中
10.text-decoration 文本线条修饰 line-throough(贯穿文字)
11.text-indent 首行缩进 1em=16px
12.text-shadow 文本阴影 第一个值左右 第二个值上下
13.border
二.背景
1.background-color 背景颜色
2.background:url() 背景图片
3.background-repeat 平铺 no-repeat不平铺
4.background-position 定位 第一个值左右 第二个值上下 center center 垂直居中
5.background-size 尺寸 cover 填充整个容器图片可能失真 contain 包含 完整显示图片但是可能有空白
6.background-attachment 固定 fixed图片不随鼠标滚动而动
7.简写:background:color url repeat (attachment) position
8.渐变(渐变指多种颜色,平缓变化的一种显示效果)
线性渐变:
background-image : linear-gradient(angle,color-point1,color-point2,....)
angle(到终点): to top,buttom,left,right 还可以0deg(下到上)90deg(左到右)180deg(上到下)270deg(右到左)
color-point:以PX为单位的数字或% 合法的颜色值+位置 如(#fff 0%,#f0f 100%)
background-image:repeating-linear-gradient(angle,color-point1,color-point2,..)(重复的线性渐变)
径向渐变:
backgrond-image:repeating-radial-gradient(半经 at 圆心x 圆心y,color-point....)
半径: 如50px
圆心:容器的位置 如 center center
9.css hack(编写兼容低版本浏览器代码这个行为,叫css hack)
需添加浏览器前缀
-webkit- 谷歌
-moz- 火狐
当有前缀时 写方向时不用写 to 此时定义的方向时起点
三.表格(table)
如不指定它 默认将时tbody 选择子代选择器时需加上tbody 如:.tb>tbody>tr:nth-child(x)
1.边框合并 border-collapse collapse合并 默认是不合并
2.边框边距 border-spacing 一个值时 同时设置水平和垂直边距 两个值 第一个水平 第二个垂直
3.标题位置caption-side top buttom
4.表格显示规则 默认auto 自动适应内容(加载速度慢) fixed 会溢出(加载速度快)
四.列表
1.list-style-type 列表项类型 none无
2.list-style-image url() 设置列表项为图片
3.list-style-position 列表项位置 默认outside inside(会写入文本中)
4.简写:list-style: type image position

标签

评论

this is is footer