字体文本
1.字体样式设置
font-size: ; 设置字体大小
font-weight: bold; 设置字体加粗
font-style: italic; 设置字体倾斜
font-style: normal; 去除字体倾斜
font-family:; 设置字体种类
text-shadow: 10px 10px 10px pink; 设置文字阴影
text-transform: lowercase; 全部转为小写
text-transform: uppercase; 每个字母都大写
text-transform: capitalize; 每个单词首字母大写
2.文本修饰
text-decoration: line-through; 添加文本删除线
text-decoration:underline ; 添加文本下划线
text-decoration:overline ; 添加文本上划线
text-decoration: none; 去除文本修饰线
<del></del> 删除线
3. 文本格式
text-align: center; （right右/left左） 文本居中
line-height:; 设置文本行高 （如果所设置行高与父级元素同等时实现垂直居中）
letter-spacing: *px; 设置每个字之间的距离
word-spacing: *px; 设置每个单词之间的距离
padding-left:*px ; 设置左边距 （top上/right右/bottem下）
border: *px solid 颜色; 设置边框
box-sizing: border-box; 设置IE盒模型
vertical-align: middle; 设置文本中线对齐 （baseline/top/bottom/*xp）
line-height: *px; 垂直居中
3.图片及背景样式
background-image: url(./); 设置背景图片
background-repeat:no-repeat; 背景不平铺
background-repeat:repea-x; 背景横向平铺
background-repeat:repea-y; 背景竖向平铺
background-size: 100%; 设置背景图片大小
4.精灵图及动画位置设置
background-position:; 设置精灵图简写法背景，不重复，定位
transform: translateX(100px); 沿着x轴平移100像素（横向）
transform: translateY(100px); 沿着y轴平移100像素（竖向）
transform: translateX(100px) translateY(100px); 沿X,Y各平移一次
transform: translate(100px,100px); 沿X,Y各平移一次
transform: scale(0.5); 沿X,Y各缩放一次
transform: scaleY(0.5); 沿Y各缩放到原来的二分之一
transform: scaleX(0.5); 沿X各缩放到原来的二分之一
transform: skew(45deg); 沿X,Y各倾斜一次
transform: skewX(45deg); 沿x轴倾斜45度
transform: skewy(45deg); 沿y轴倾斜45度
transform: rotate(45deg); 顺时针旋转45度
transform: skew(45deg) scale(0.5); 设置元素多种转换形式，属性值与属性值之间用空格隔开
5.行、框溢出部分
outline: none; 设置轮廓线为空
opacity: 0; 设置透明（0-1）
overflow: auto; 超出部分自动回框内
overflow: hidden; 溢出部分隐藏
6.动画及效果设置
transform-origin:宽度值高度值; 根据设置高度和宽度值的相交位置变为原点进行2D动画
transition: all 0.3s; 缓慢出现（过渡动画）
transition-property: height; 只对高进行过渡
transition-property：; 指定进行过渡动画的css属性
transition-duration：； 指定进行过渡动画的时间
transition-delay： ； 动画效果延迟时间
transition-timing-function:； 指定进行过渡动画的效
7.定位
position: sticky; 粘性定位
position: fixed; 固定定位
position: static; 静态定位
8.滚动条设置
overflow: scroll; 显示滚动条
overflow: auto; 有溢出显示滚动条，没有自动隐藏
overflow-x: auto; x轴出现滚动条（纵向）
overflow-y: auto; y轴出现滚动条（横向）
9.css事件状态
:active 激活时（点击时）出现两个及以上时要按顺序写
:hover 鼠标悬浮时
：visiten 已访问
:link 未访问
:focus 获取焦点
10.浮动及清除浮动
float: left; 浮动布局
清除浮动
clear: both; 清除浮动（隔墙法）
前缀伪元素
ul::after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
} 清除浮动（前缀伪元素法）{推荐}
后缀伪元素
ul::before ul::after {
content: "";
display: table;
}
ul::after {
clear: both;
}
ul{
*zoom:1;
} 清除浮动（前后缀双管齐下伪元素法）
H5 + CSS 新增
html新增
语义化标签：header，footer，main，nav
媒体标签：video，audio
画布：canvas
css新增
圆角，阴影，滤镜，vwvh单位，弹性布局，媒体查询，过度动画，伪类圆角，阴影，滤镜，vwvh单位，弹性布局，媒体查询，过度动画，伪类
新增WebAPI
localStorages，essionStorage，querySelector，webSocket
HTML语义化
html语义化让页面的内容结构化 结构更清晰 便于对浏览器 搜索引擎解析 即使在没有css样式的情况下 也以一种文档格式显示 并且是容易阅读的 搜索引擎的爬虫也依赖于 html标记来确定上下文和各个关键字的权重 利于SEO 使阅读源代码的人对网站分块 便于阅读维护理解
css中的四个关键字
@import 导入另一个css文件
@font-face 导入一个字体文件
@keyframes 声明一个关键帧动画
@media 声明一个媒体查询条件
Less、Sass比css高级在哪
支持嵌套 支持变量嵌套 支持‘模板函数’
transition和animation
transition：只有开始和结束两个状态 并且需要通过事件触发
animation：可以通过定义关键帧指定多个动画状态，可以自动播放
优雅降级和渐进增强
都是解决网站老旧版本的兼容问题
优雅降级：Web站点在所有新式浏览器中都能正常工作 如果用户使用的是老式浏览器 则代码就会检查以确定他们能否能正常工作 由于IE独特的盒模型布局问题 针对不同版本的hack实践过优雅降级了 为那些无法支持的功能的浏览器则增加候选方案 使之在旧版本浏览器上以某种形式降级体验却不至于完全失效
渐进增强：从被所有浏览器支持的基本功能开始 逐步增加只有那么新式浏览器才支持的功能 向页面增加无害于基础浏览器的额外样式和功能 当浏览器支持时他们会自动的呈现并发挥作用
网友评论