css引入方式 行内式 写在结构主体li 嵌入式 在html头部写style 里写css样式 外链式 在html里面引入link css文件 标签 p标签 h系列标签h1-h6 br换行 hr水平线 文本格式化标签 strong 加粗 b de删除线 s em倾斜 i ins下划线 u color颜色 size大小 div 块级盒子 span行级盒子 img 图片标签 alt对图片描述 加载失败显现 title鼠标停留时提示 width 宽度 height 高度 border 边框 a 超链接 加target self默认 当前yem blank 打开新页面 href 后加#锚点名 定点跳转 css样式 class 给盒子命名 可以有多个类名 font-size 文字大小 font-weight 文字加粗 font-family 文字类型 font-style：italic 文字倾斜 text-aligh 文本对齐方式 center居中 left左 right右 text-decoration 文本修饰线 none 没有 overling 上划线 underling 下划线 line-tgriugh 删除线 text-indent 文本缩进，首行生效 对块级元素不生效 line-height 行高=文字大小+上间距+下间距 没有单位表示倍数，当前字体倍数 border-radius 圆角边框 （左上 右上 右下 左下） box-shadow 阴影 （水平位移 垂直位移 模糊程度 阴影大小） 不占位置 列表 无序 ul li 有序 ol li 自定义 dl dt，dd css样式 class 给盒子命名 可以有多个类名 font-size 文字大小 font-weight 文字加粗 font-family 文字类型 font-style：italic 文字倾斜 text-aligh 文本对齐方式 center居中 left左 right右 text-decoration 文本修饰线 none 没有 overling 上划线 underling 下划线 line-tgriugh 删除线 text-indent 文本缩进，首行生效 对块级元素不生效 line-height 行高=文字大小+上间距+下间距 没有单位表示倍数，当前字体倍数 border-radius 圆角边框 （左上 右上 右下 左下） box-shadow 阴影 （水平位移 垂直位移 模糊程度 阴影大小） 不占位置 表格table colspan多列合并 rowspan多行合并 bgcolor表格的颜色 align=’lef左 right右 center居中 height表格的高度 widt表格的宽度 cellpadding单元格与内容的距离 cellspacing单元格与单元格之间的距离 border表格边框 caption表格的标题 td表体的单元格 th表格的第一排 tr表格的行 表单 写法 form action地址 method方法 input type的类型 value后面写想要按钮名字 input：txet 文本输入框 input：password密码输入框 input：radio单选按钮 input：checkbox复选框 input：button按钮 value按钮名字 input：submit提交按钮 （form里面只能有一个 input：reset重置按钮 button （名字）button 按钮 input：file文件上传 outline：none 取消点击时的焦点外轮廓线 name属性 给选定数据定一个名字 在单选中把一组数据认定为一组 value：作为当个input的命名 maxlength: 文字框的最大文字 placeholder:文本框的占位属性，不影响文本框的正常使用 checked：默认选中状态，单选和多选 下拉框选项 selet:格式头 option：格式体 selected：设置在option的默认属性 textarea：文本域 cols一行可以输入多少字 rows可以输入的行数 文本域不要留空格 文本域禁止拖拽行为：resize：nonr； label：为input内容关联 value后面写想要按钮名字 backgroud背景 color 颜色 加rgba设置透明度 image ：url（路径）加图片 repeat 是否平铺 position 位置 先x在y attachmen 固定还是滚动 scroll/fixed
标签显现模式 块级元素 block 1.独占一行 2.有效宽高设定 3里面可以放其他盒子 4有效内外边距 div h1-h6 ul ol li dl dd dt.. 行级元素 inline 1相邻行内在一行，一行可以有多个 2.无法设置宽高 3内容就是自己的宽高 4里面只能放行内或文本元素 5上下无效，左右有效 a span b em i s u ins 行内块元素 inline-block 1在一行显示 2可以设置有效宽高 img input td 标签模式转换 块转行 display：inline 行转块 display：block 转行内块 display：inline-block
鼠标样式 1.cursor:default;默认样式鼠标箭头 2.cursor：pointer；可点击样式 3.cursor:text;文本样式 4.cursor：move；移动箭头 5.cursor：not-allowed 禁用
css选择器 后代选择器 标签用空格隔开 选最后的标签 子代选择器 标签用> 隔开 必须是亲父级 只能选择最后的子标签 交集选择器 用|隔开 只作用与同时有标签的内容 并集选择器 用，隔开可以同时选中多个标签 超链接的伪类选择器 a:link未访问链链接样式 a:visited 已访问过的样式 a:hover鼠标移动时的样式 a:actives选定时的样式 继承性和层叠性 层叠：后面设置的属性把前面的属性覆盖 继承：子盒子可以继承父盒子原有属性
基础选择器 标签选择器 选中当前标签的所有标签更改css样式 类选择器 选中标签所命名的的内容 id选择器只能选一次的标签 用#号选中 通配符选择器 选中当前页面所有标签 用*选中
css选择器的优先级 ！mportant 无穷大 行内 1，0，0，0 id 0，1，0，0 类名 0，0，1，0 标签 0，0，0，1 继承 通配符 0，0，0，0
盒子的组成 实际大小：内容+边框+内边距 内容 宽高 边框 border：边框大小 样式（solid实线 deshed虚线 dotted点线 doule双实线 none无边框 内边距 padding-（方向）：一个四边都是一样， 两个 （上下数值）（左右） 三个（上）（右左）（下） 四个（上）（下）（右）（左） 外边距 margin-(方向）：
脱标元素 浮动 float-（方位） 一行显示没有，不占标准流位置位置，同方向浮动会紧贴直至换行具有行内块特性 清除浮动的影响 1.隔墙法：在结构里加
元素隐藏和显示 1.display：none；隐藏当前元素并且不占位置 display:block；显现元素 （块级转换） 2.visibiulity:hidden 设置元素不可见保留实际位置 visibiulity：visible 设置元素可见 3.溢出隐藏 overflow 对超出部分进行处理 hidden 隐藏 visible 显现 scroll设置滚动条显示内容 单行显示，超出用省略号显示 1.white-space：nowrap；不换行 overflow：hidden 超出部分隐藏 text-overflow：elliosis； 超出部分用省略号显示 图片去空隙 1.给父元素设置 font-size：0； 2.给 img 设置一个 vertical-align : top | bottom | middle 3.转块级元素 display:block 默认样式清除 *{ margin：0 padding：0}去除页面的内外边距 li {list-style：none}去除li前的圆点 a{text-decoration }a标签的下划线 移动端布局方式 flex弹性布局 以下属性设置的前提： **这个盒子一定要先设置display: flex; ！！！！**开启弹性布局模式
+ flex-direction：设置主轴的方向 x
给亲父级元素设置
row 默认左到右
row-reverse 右到左
column 上到下
column-reverse 下到上
+ flex-wrap：设置子元素是否换行
+ flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
+ justify-content：设置主轴上的子元素排列方式
flex-start 默认从头开始排列
flex-end 从后排
center 子元素居中显示
space-around 子元素等分剩余空间
space-between 子元素两边贴边，再平分
+ align-items：设置侧轴上的子元素排列方式（单行）
+ align-content：设置侧轴上的子元素的排列方式（多行）
flex属性定义子项分配剩余空间占多少份数
align-self 控制子项在侧轴上的排列关系
order 定义排雷顺序（越小越靠前 默认为0）
vw vh 视口布局
rem+媒体查询布局
混合布局
前面几种都会用
响应式布局
pc端常见页面布局方式
百分比布局
宽度是用%符号，可以跟随屏幕伸缩
min-（width/height） 最小宽度/高度
max-（width/height） 最大宽度/高度
字体图标 iconfont
1.找到自己需要的图标
2. iconfont使用
1. unicode方式
1下载所需的图标
2.在css里复制那两段css代码
3.更改路径为自己电脑上的路径
2. fontclass 本地
1.下载所需的图标
2 用link引用下载的图标路径
3 在所需图标位置的标签里加inconfont 和图标的名字
3 fontclass 在线
1.找到所需图标 复制文件的网络地址
2.用link引用网络地址
3 在所需图标位置的标签里加inconfont 和图标的名字
媒体查询 ******
是一种css语法,可以根据设备的不同(主要是屏幕的宽度不同),去加载对应的css代码
在css中写入媒体查询代码 @media screen and (width:xxx) 除了xxx之外，其他都是关键字
只有当屏幕的宽度满足 width:值 条件时，才会去加载里面的css代码
orientatio：（landscape/portrait） 横屏/竖屏
关键字
and 和
or 或者
only 实现更好的兼容
not 取反
引用方式
在style里
在style标签里或者在css文件里写媒体查询
在style上
在style标签上通过属性的方式写媒体查询
在link上
在link标签写媒体查询，根据不同的窗口大小，执行不同的css文
less
用 Easy LESS 插件用来把less文件编译为css文件 保存less就会自动生成css文件
less 变量
变量的定义 @变量名:值;
+ 必须有@为前缀
+ 不能包含特殊字符
+ 不能以数字开头
+ 大小写敏感
less镶套
less运算
+ 乘号（*）和除号（/）的写法
+ 运算符中间左右有个空格隔开
+ 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
+ 如果两个值之间只有一个值有单位，则运算结果就取该单位
html5+css3
结构伪类选择器
child系列
先找排 再找元素 （元素不同则不显示）
1.（标签）：firat-child 选择标签第一个
2.（）：last-child 选择标签最后一个
3.（）：nth-child（n）选择标签从上到下第n个
4.（）：nth-last-child（n）从下到上第几个
type系列
先找元素再排 属性不会空
1.（）：first-of-type 第一个
2.（）：last-of-type 最后一个
3.（）：nth-of-type（n）从上到下第n个
4.（）：nth-last-of-type（n）从下到上第n个
（an+b）
n是自然数 n一定是写在前面 -n是反向
a是隔几个有开始有效果
b是第几个开始
内减模型 box-sizing：border-box 不改变以设置宽高，内容自己减
函数计算 calc 运算符两边要加空格
背景
修改背景大小
background-size：宽 高 只写一个会等比列设置
background-size：cover 按比例放大直到装满多余部分被裁剪
background-size：contain 按比列放大直到一边铺满就停止，可能会留白
背景图片定位区域 orign
background-orign：
content-box 内容定位
border-box 边框定位
padding-box 内边距定位
背景裁剪区域 clip
padding-box 内边距定位
border-box 边框定位
content-box 内容定位
背景渐变
background:linear-gradient(起始位置,第一个颜色 0%,第二个颜色 50%，第三个颜色 100%...);
精灵图
1.给a设置需要的宽高
2.引入图片，调整位置
3.用padding设置所需按钮大小
4..多余部分裁剪
边框图片
border-image：引入图片 位置 平铺方式
h5新标签
header头部 nav导航栏 section区域 article文章 aside侧边 footer底部
多媒体标签
音频audio controls
视频video controls
controls 控件 必备
autoplay 自动播放
muted 静音播放
loop 循环
poster 第一画面
过渡 teansition
过渡属性 transition-property：（width hight all）
过渡所需时间 transition-daration：（s）
设置曲线速度transitionn-function
linear 匀速
ease 慢-快-慢 默认
ease-in 快
ease-out 慢
合写 transition：过渡属性 过渡时间 时间速度曲线 延迟时间
平移 translate
transform：translaste（3d）（xyz） xyz可以单独移动
旋转 rotate（角度）
transform：rotate（3d）（x y z deg）
缩放 scale（宽的倍数 高的倍数）
transflow：scale（3d）（x y z ）值是倍数
视距原点perspective-origin ：（）
1.数值越大看着越大
2.默认是元素的中心点
3.只指定一个参数时另一个默认是50%
4.百分比相对与自身宽高
5.给父元素上
转换样式 transform-style
transform-style：flat平面模式 preserve-3d 3维立体环境
动画 animation
1.@keyframs 动画名{动画所需的效果} 不能在标签下
2.调动动画
2.1 动画名调动 animation-name：；
2.2 动画执行时间 animation-duration：
2.3动画延迟时间 animation-delay：s ；
2.4动画执行次数 animation-iteration-count: 数字/infinite无限循环;
2.5 动画循环方向 animation-direction: alternate正-反-正
2.6动画结束停止位置 animation-fill-mode: forwards;
2.7 动画停止与播放 animation-play-state: paused;
合写：animation：动画名 执行时间/ 必须写
