字体样式
1.color:字体颜色
2.font-size:字体大小
尽量用偶数
3.font-family:字体型号
可以设置多个字体,用,隔开,优先使用第一个字体,如果没有使用下一个。
中文字体加引号,英文字体如果有空格、$、#则也要加引号
线上字体
@font-face {font-family:"";src:''};
4.font-style:字体样式(斜体等)
normal正常
italic斜体
5.font-weight:设置实体粗细
属性值:normal ,bold加粗,bolder比父元素更粗,lighter比父元素更细,数值(100-900)
字体的综合设置 选择器{font: font-style font-weight font-size font-family;}h1{font:italic bold 40px "微软雅黑";}font-size font-family不能省略
6.text-decoration:
属性值
underline下划线 / overline上划线 / none默认 定义标准的文本/ blink字体闪烁
7.text-align:水平居中
8.text-indent:首行缩进 1em-一个字的宽度
9.text-shadow:text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 前两个参数必须写
text-shadow:1px 2px 3px rgba(0,0,0,0.4)
10.line-height:行高 行高 一般比字体大7.8个像素
(标签的行高等于标签的height可以设置文字垂直居中)
11.text-transform:变换字体
uppercase 转化为大写
lowercase 转换为小写
capitalize 首字母大写
12.letter-spacing:字体间距
word-spacing :2px 单词间距 对中文无效
13.cursor:改变鼠标样式
pointer 光标呈现为指示链接的指针(一只手)
help
move
wait
n-resize
背景的样式
1.background-color:背景颜色
2.background-image:背景图片url()
3.background-repeat:背景是否平铺 repeat-x水平平铺 repeat-y纵向平铺 repeat no-repeat不平铺
4.background-size:w h; 设置背景图片大小 可以改变一个值会等比例进行缩放 可以设置百分比 100% 100% 占满
设置为contain时会自动调整缩放比例,保证图片始终填充满背景区域,溢出的部分会被隐藏
cover会自动调整缩放比例,保证图片始终完整显示在背景区域
5.background-position:背景定位
background-position背景位置 top center bottom left right 默认为left top 方位名词没有顺序
background-position:10px 10px;(x,y)
background-position:10px center;混搭
6.background-attachment:设置背景图片不会随内容滚动而滚动
scroll;默认为滚动 fixed固定背景 不随着内容滚动而滚动
7.background-clip 设定背景的覆盖范围
border-box : 背景位于边框以内
padding-box : 背景位于内边距以内
content-box : 背景位于内容区
8.background-origin 设定背景图片的起始覆盖点
border-box : 背景图片从边框的外边缘开始绘制
padding-box : 背景图片从内边距的外边缘开始绘制
content-box : 背景图片绘制在内容区
**clip和origin配合使用**
简写:background: #000(背景颜色) url()(背景图片) no-repeat(背景平铺) fixed(背景固定) 背景位置;
列表的样式
1.list-style-type:设置列表标志类型
cricle 空心圆
square 正方形
decimal 数字
lower-roman 小写罗马字体
upper-roman 大写罗马字体
2.list-style-position:outsize/insize设置列表标志出现的位置
outside
标志在列表外
inside
在列表内
3.list-style-image:自定义设置列表项标志图片
url(’’)
列表项设置为图片
4.list-style:类型,图片,位置
速记写法
list-style:
type image position
如果type 和image都存在 image会生效
outline
环绕线
在border外面
outline-width: 3px;
outline-style: solid;
outline-color: red;
outline-offset: 3px;
常用于清除input边框
outline:none;