字体样式属性
1、 font-family：设置字体 网页中常用的字体（宋体、微软雅黑、黑体）
2、 font-weight：设置字体的宽度 bold：加粗 normal：不加粗
3、 font-style：设置字体风格 normal：不倾斜 italic：倾斜
4、 font：font-style font-weight font-size/line-height font-family
（注意：font-size和font-family不可以省略）
5、 @font-face：定义服务器字体
声明:
@font-face {
font-family:“自定义字体名称”;
src: url(“字体路径”);
}
使用:
h3{
font-family: “墨体”;
}
文本样式属性
1、 line-height：设置行高
2、 text-aline：文本水平居中
3、text-decoration：修饰文本内容 underline：下划线 overline：上划线 line-through：删除线
4、text-overflow：ellipsis 用三个点代替溢出部分
5、overflow: hidden：隐藏溢出部分 auto：超出部分添加滚动条
6、text-indnet：设置首行文本的缩进 em：当前文字大小的倍数
7、white-space：设置空白符的处理方式 pre：保留原用格式 nowrap：空格空行失效
8、text-shadow：添加阴影效果 h-shadow：水平阴影距离 v-shadow：垂直阴影距离blur：模糊程度 color：颜色（可设置多重阴影，用逗号隔开）
9、word-wrap：长单词和URL地址的自动换行
10、break-word：长单词或URL地址内部进行换行
11、letter-spaceing：定义字间距
12、设置文本折行：<p>xxxxxx<br>xxx</p>
属性选择器
1、E[att^=value]：匹配E元素属性以value开头的项
2、E[att$=value]：匹配E元素属性以value结尾的项
3、E[att*=value]：匹配E元素属性包含value的项
4、>：子代选择器 位于父元素之后
5、+ ~：兄弟选择器 位于某个元素之后 +：后一个 ~：后所有
结构化伪类选择器
1、:root：根选择器（html全局设置）可被覆盖
2、:not（选择器）：排除结构元素 语法：（选择器 选择器：not（选择器））
3、:only-child：父元素只存在唯一子元素 用法：（选择器：only-child）
4、:first-child：父元素下第一个子集 :last-child：父元素下最后一个子集 用法：（选择器：first/last-child）
5、:nth-child（n）：选择父元素的第n个子集（正向） n：（even 偶数 odd：奇数 -n+3:前三个）
6、:nth-last-child（n）：选择父元素的第n个子集（反向）
7、:nth-of-type（n）: 选择父元素的第n个子集（分类正向）
8、:nth-last-of-type（n）: 选择父元素的第n个子集（分类反向）
9、:empty：选择没有子元素或文本内容为空的所有元素
10、:focus：获取焦点时
伪元素属性
1、:before：在某个元素之前插入内容（必须存在content属性） 语法：选择器：before{ content：文字/url（）};
2、:after：在某个元素之前插入内容（用法同:before）
3、:enable：向当前处于可用状态的元素添加样式（超链接或者表单）
4、:disable：向当前处于不可用状态的元素添加样式（超链接或者表单）
5、:checked：向当前处于选中状态的元素添加样式
6、:not(selector)：向不是selector元素的元素添加样式
案例：p：not（.name）{ color：green；}
7、:target：向正在访问的锚点目标元素添加样式
8、:selection：向用户当前选取内容所在的元素添加样式
边框轮廓属性
1、border：设置边框 border-width border-style border-color
一个值：整体 两个值：上下 左右 三个值：上 左右 下 四个值：上右下左
上下左右分别表示为（top bottom left right）
2、outline：设置轮廓 none：取消轮廓（常用于input控件）
外边距属性
1、初始化全局设置：*{padding：0； margin：0}清除内外边距
2、margin：0 auto 当对块级元素应用宽度属性width可实现块元素居中
背景图片属性
1、background-position：设置背景图片位置 水平：left center right 垂直：top center bottom
2、background-repeat：设置背景图片是否平铺 no-repeat：不平铺 repeat-x：横向 repeat-y：纵向 repeat：平铺（默认值）
3、background-attachment：图片固定属性：scroll：图片随页面一起滚动 flxed：固定屏幕
4、background-image：url（） 设置背景图片 可设置多张背景图片
5、background综合写法：背景颜色 url（） 平铺方式 是否固定 x轴 y轴
6、background-size 属性值1 属性值2：设置背景图片大小 宽度 长度
7、background-clip：背景图片的裁剪区域 padding-box border-box content-box
8、background-orgin：定义背景图片的相对位置
盒子透明
1、background：rgba（255,0,0，透明程度）： 只是背景透明
2、opacity：块透明 里面的元素也透明
圆角取值
1、border-radius：50%表示的是一个圆
2、border-radius：设置圆角取值为盒子高度的一半 实现胶囊形状
图片边框
1、border-image-source：设置边框图片路径（首先需要设置border-style）
2、border-image-slice：设置边框图片偏移量
3、border-image-width：设置边框图片宽度
4、border-image-repeat：设置边框图片是否平铺
盒子阴影
1、box-shadow：h-shadow（水平方向阴影） v-shadow（垂直方向阴影） blur（模糊程度） spread（阴影扩展半径 ） color（阴影颜色） outset/inset（外阴影或内阴影）
渐变
1、、background-image:：linear-gradient（to 方向 颜色,颜色…）：线性渐变 方向：left right top bottom
2、background-image：radial-gradient（水平位置 垂直位置 at 圆心位置[top bottom left right center] 颜色1，颜色2，颜色3…）
3、background-image:：repeating-linear-gradient（参数值） 在颜色后加占比
4、background-image:：repeating-radial-gradient（参数值） 在颜色后加占比
呈现方式
5、display：设置元素展现方式（不保留位置） inline：行内元素 block：块元素 inline-block：行内块元素 none：隐藏
6、outvisibility：设置元素展现方式（保留位置） hidden：隐藏 visible：显示
定位
1、 position：设置位置 reliative：相对位置 absolute：绝地定位 fixed：固定定位（导航栏hoe）
2、 z-index：调整重叠定位元素的堆叠顺序 默认值为0 数值越大越靠前显示
定义列表
1、 dl：定义列表 dt：名词 dd：名词解释 <dl><dt></dt><dd></dd></dl>
列表样式
2、list-style-type：控制列表的项目符号
3、list-style-image：引入列表项目图片
4、list-style-position：控制列表符号的位置 inside：文本内部 outside：文本外部
5、list-style：列表样式综合写法 list-style-type list-style-image list-style-position
锚点链接
1、使用<a href="#id名">链接文本创建超链接文本，使用相应的id名标注跳转目标的位置（用来点击3回顶部或者底部）
超链接伪类
1、a：link：未访问时超链接状态
2、a：visited：访问后超链接状态
3、a：hover：鼠标经过、悬停时超链接状态
4、a：active：鼠标点击不动时超链接状态
表格属性
1、border-collapse：属性值为collapse合并边框
表单属性
1、autocomplete：表单是否显示输入记录
2、novalidate：表单在提交的时候取消检查
3、datalist：设置input控件的选中值 通过option组件进行构建 设置id属性提供给input组件的list属性引用
浮动
1、 float：浮动（不占据文档普通流空间，直到外边缘碰到包含框或另一个浮动块）left：左浮动 right：右浮动
2、 clear：指定那个边不挨着浮动框（清除浮动） left right both none
消除浮动影响
1、 在父级盒子中添加<div>、<p>、<hr/>等空标签并设置clear：both
2、 在父级盒子设置overflow：auto可以撑起父元素
3、 在父级盒子设置:after伪类 display：block clear：both content：’’ height:0 visibility:hidden
4、 定位方式：子绝父相 可以是子元素的绝对定位不脱离父元素over
input控件type新增类型
1、email：邮箱地址（内含@）
2、url：网络地址（内含http://）
3、tel：输入电话号码 pattern：设置正则规定电话格式
4、search：搜索关键词
5、color：选择颜色
6、number：输入数值 min：最小值 max：最大值 step：步长（同range控件）
7、date：日期 month：月份 week：周 time：时间
8、autofocus：自动获取焦点
9、multiple：设置多选
10、label：设置input控件的点击文字实现单选效果 设置for属性提供给input组件的id属性引用
11、target：指定超链接在哪个页面打开 _self：当前页面 _blank：新打开空白页面
12、iframe：内部窗口，加载其他网页页面（常用作地图）
案例：
音视频控件
1、audio：音频 autoplay：自动播放 controls：显示播放组件 loop：循环播放
2、source：设置音频或视频资源 src：指定播放路径 type：文件格式
3、video：视频 属性与audio一致over谷歌自动播放：autoplay muted poster=’url’ 设置视频播放前默认图片
字体分类
1、 衬线字体：带有边缘修饰（中文）
2、 非衬线字体：没有边缘修饰（常用于电子版简历）（中文）
3、 等宽字体：字母之间有间隔（常用于英文书写）
过渡属性
1、 transition-property：设置过渡属性all：所有属性 preperty：具体属性
2、 trasnsition-duartion：times：设置过渡时间
3、 transition-timing-function：设置属性过渡效果 linear：匀速 ease：慢快慢
ease-in：慢速开始ease-out：慢速结束 ease-in-out：慢速开始慢速结束
4、 transition-delay:times：设置过渡延迟
5、 transition：transition-property trasnsition-duartion transition-timing-function transition-delay
transform变形属性
1、translate（x,y）：设置元素位置（平移）
2、scale（x,y）：放大元素
3、skew（x,y）：设置元素倾斜
4、rotate（45deg）：设置元素旋转（正顺逆负） rotateX：x轴旋转 rotateY：y轴旋转
rotateZ：z轴旋转
5、origin（x,y）：设置变形中心点
动画属性
1、@keyframes 动画名称{
from{css-styles} //0%
to{ css-styles } //100%
}
2、 animation-name：动画名称
3、 animation-duration：设置动画时间
4、 animation-timing-function：设置动画过渡效果 linear：匀速 ease：慢快慢
ease-in：慢速开始ease-out：慢速结束 ease-in-out：慢速开始慢速结束
5、 animation-delay times：设置动画延迟时间
6、 animation-iteration-count：设置动画播放次数 number：指定次数 infinite：循环播放
7、 animation-direction：normal：正常播放 alternate：逆向播放
绘图
1、：定义画布标签 使用getElementById（）获取画布对象
2、getContext（’2d’）：获取画笔
3、moveTo（x,y）：设置起始位置
4、lineTo（x,y）：设置线
5、stroke（x,y）：描边
6、lineWidth：设置线条宽度 案例：lineWidth = ‘10’
7、strokeStyle：设置描边颜色 案例：strokeStyle=’red’
8、lineCap：设置图形端点形状 round：圆形 square：方形
9、beginPath（）：设置新路径
10、closePath（）：闭合路径
11、fill（）：填充图形
12、fillStyle：填充颜色 案例：fillStyle=’red’
13、arc（x,y,r,开始角，结束角，方向）：绘制弧形案例：arc（100,100,50,0,2*Math.PI）
此博客是博主在学习css时做的笔记 希望可以帮助到你