常用的css属性-字体

字体大小（font-size）

属性值，常用的是数值+单位。常用font-size:0 来处理兼容问题

网页中默认的字体大小为16px，浏览器建议的最小字体为12px

浏览器之间存在差异，所以建议设置字体大小为偶数

一般在设计图中量出的字体高度就是字体的大小

除了px单位，em：用于父级计算单位，常用于首行缩进（2em）

font-family：设置字体的类型

中文：要给属性值添加引号（可加可不加）

英文：属性值有多个英文单词需要加引号，只有一个不需要加引号（浏览器默认微软雅黑）

font-weight：加粗字体

100-900（整百数）100-500正常字体 ，600-900加粗

bold 加粗

bolder 跟粗的字体

重要 normal 正常的（可以对b标签使用，只使用b标签，但是不使用他的样式）

font-style: 使字体倾斜

italic 倾斜的

oblique 更倾斜的

normal 正常的阿里巴巴矢量图标库(外部的字体) 常用的标签就是i

文本行高设置

单行文本行高（基线）Line-height

文本行高大于高度 文本向下移动

文本行高小于高度 文本往上移动

重要：文本行高等于高度的时候 文本在垂直方向居中

文本水平方向对齐属性： text-align

属性值：Left right center justify（较少-两端对齐）

字体的复合写法

font： font-weight font-style font-size/line-height font-family

注意点

- font-weight和 font-style可以不写或者互换位置

- font-size和 line-height固定写法 不能换位置 反斜杠必须要写

- font-family有没有设置 必须要写 默认的微软雅黑

文本颜色

属性：color（切记不要写成font-color）

属性值

- 英文单词 green pink yellow

- 十六进制 0-9a-fA-F

- 需要前面加一个#开头 后面跟6位字符

- 常见的颜色值 #ffffff #000000 #cccccc(六个字符是相同的情况下 可以简写成3个)

- ps中有一个吸管工具

- rgb(red,green,blue) 取值范围是0~255

- rgba(red,green,blue,alpha) 透明度 0~1

拓展:opacity 透明度 0~1

文本修饰 text-decoration

属性值：underline 下划线

overline 上横线

line-through 删除线 等于<del>

重要：none清除默认的下划线样式

首行缩进：只对第一行文本起作用，悬挂式布局

属性：text-indent

属性值：数值+单位

首行缩进常用单位是em和px

属性值可以接正数也可以复数

列表属性

1.定义列表的符号样式

属性：list-style-type

属性值：disc（实心圆/默认）circle（空心圆）square（实心方块）重要none（清除列表的默认样式）

2.使用图片作为列表的符号

属性：list-style-image（兼容性不好）

属性值：url（)

3.定义符号的位置

属性：list-style-position

属性值：outside inside

边框属性

组成边框需要几个条件

边框的宽度 border-width：数值 单位

边框的颜色 border-color：和color一样

边框的样式 border-style：solid（实线） dashed（虚线）dotted（点线) double（双实线）

边框的方向：顺时针 四个方向（top，right，bottom，left）

像改变某一个方向上的颜色：border-方向值-color

简写方式

属性：border

属性值：border-width border-style border-color（不区分前后顺序）

那些标签自带边框？

input textarea（多行文本域） select（下拉菜单/列表）

清除默认的边框

border：none/0

border-方向值：none

盒模型总结

盒模型的组成部分（content+padding+border+margin）

计算盒子的真实大小 content+padding*2+border**2

计算盒子在浏览器中所占的位置 content+padding2+border2+margin*2

背景属性

1.背景色

属性：background-color 简写成 background

2.背景图片（与image区别：一个占位，一个不占位）

属性：background-image

属性值：url（）

当容器宽高大小比背景图片大的时候，背景图片默认会进行平铺

当容器宽高大小和背景图片大小相同时，背景图片会完整显示

当容器宽高大小比背景图片小的时候 ，显示一部分

3.背景平铺属性

属性：background-repeat

属性值：

no-repeat 不平铺

repeat 平铺，默认值

repeat -x 沿着X轴进行平铺

repeat -y

4.背景定位

属性：background-position：x y（可以简写成一个center）

-x水平方向：left right center

-y垂直方向：top bottom center

-x和y轴方向还可以设置数值+单位

5.背景图的固定

属性：background-attachment

属性值：

fixed 固定

scroll 滚动

6.简写

属性：background

属性值：颜色 背景图片 是否铺平 背景定位 背景固定