目录
一、字体
1.文本样式
1.字体大小 font-size:20px
2.文字加粗 font-weight:normal;
normal 正常 bold 粗 bolder 特粗 lighter 细
400=normal 700=bold （100-900） （数字后不加单位，此方法使用的多）
3.文字样式 font-style:normal;
normal正常 italic 倾斜
4.行高 line-height:40px (一般和height一同用)
5.字体样式 font-family:"微软雅黑" Microsoft YaHei
(多个文字组成的字体用逗号隔开，可以选择多个字体，一次选择)
6.字体的复合属性(有要求，属性不能改变位置)
font:font-style font-weight font-size/line-height font-family;
例子: font：italic 700 16px 'Microsoft YaHei';
font:16px 'Microsoft YaHei'; 最短的(必须写的属性)
注意：符合属性不需要的属性可以省略,但必须保留font-size和font-family属性,否则不起作用2.文本颜色
color: red; 颜色
color:#ff0000 十六进制表示颜色(重要)
color:rgb(255,0,0)
color:ragb(0,0,0,0.3) 颜色+透明度 其中0.3的0可以去掉意义一样 3.其他文本样式
1.文本水平对齐 text-align:center;
居中 center 左 left 右 right
2.添加线 text-decoration:none;
默认无 none 下划线 underline
删除线 line-through 上划线 overline
注意:(可以把a超链接的下划线的去掉)
3.文本首行缩进 text-index:10px;
10px为向右10px的距离 -10px为向左10px的距离
4.文字行间距 line-height:26px;
文字的布局: 文字高度+上间距+下间距 ()
16 + 5 + 5
5.单词间距 word-spacing:26px;
6.行内元素和行内块居中 text-align:center
7.文字间距 letter-spacing: 2px;二、伪类选择器
a:link { } 选择所有未访问的链接
a:visited { } 选择所有已被访问的链接
a:hover { } 选择鼠标指针位于其上的链接
a:active { } 选择鼠标按下未弹起的链接
input:focus { } 用于获得焦点的表单元素三、标签内样式
display:block; 转换成块元素
display:inline; 转换成行内元素
display:inline-block; 转换成行内块元素
display:flex; 转换成flex布局其中flex布局详细
四、背景
1.背景颜色 background-color: red;
2.背景图片 background-image: url(地址);
用于loge或小的装饰图片或超大的图片 便于控制位置.
3.背景平铺 background-repeat: repeat;
不平铺：no-repeat 沿着x轴平铺：repeat-x 沿着y轴平铺：repeat-y
4.背景位置 background-position: x y ;
可以用方位名词(left right top center bottom )
(如果只给左右,垂直默认居中,如果只有top,会水平居中),
数字(如果就写一个数字另一个垂直居中),
混合赋值(数字+方位名词)
5.背景图片固定 background-attachment:scroll;
滚动:scroll 固定:fixed
6.背景颜色 background-color:rgba(0,0,0,0.3)
7.背景复合写法(没有固定顺序)
background:背景颜色 图片地址 背景平铺 背景图像滚动 背景图片位置;
8.背景大小
background-size: 400px 200px; 宽400 高200
background-size: 400px; 宽400 高等比例缩放
background-size: contain; 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
9.渐变
background-image:linear-gradient
background-image:linear-gradient(red, green, yellow, blue);
background-image:linear-gradient(#fff, #000);
background-image:linear-gradient(to right, red, blue);
background-image:linear-gradient(to bottom right, red, blue, yellow);
background-image:linear-gradient(45deg, red, blue, yellow);
background-image:radial-gradient(red, green, blue, pink);
background-image:radial-gradient(red 5%, yellow 15%, green 60%);
background-image:radial-gradient(circle, red, yellow, green);默认是从上到下渐变 circle 以圆形渐变
五、外边距(盒子与盒子之间的距离)
1.上外边距 margin-top:5px;
2.下外边距 margin-bottom:5px;
3.左外边距 margin-left:5px;
4.右外边距 margin-right:5px;
5.上下左右都是5px margin: 5px;
6.上下为5px,左右为10px margin: 5px 10px;
7.上为5px,左右为10px,下为15px margin: 5px 10px 15px;
8.上为5px,右为10px,下15px,左20px margin: 5px 10px 15px 20px;
9.不会撑大盒子(c3盒子模型) box-sizing:border-box;
外边距让盒子水平居中,必须满足的条件:
(1.盒子指定宽度 2.盒子的左右外边距都为auto 3.必须为块级盒子)
margin: 0 auto;六、内边距（盒子与内容的间距）
1.上内边距 padding-top:5px;
2.下内边距 padding-bottom:5px;
3.左内边距 padding-left:5px;
4.右内边距 padding-right:5px;
5.上下左右都是5px padding: 5px;
6.上下为5px,左右为10px padding: 5px 10px;
7.上为5px,左右为10px,下为15px padding: 5px 10px 15px;
8.上为5px,右为10px,下15px,左20px padding: 5px 10px 15px 20px; 七、阴影
1.盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow(水平位置必须) v-shadow(垂直位置必须)
blur(模糊程度可选) spread(阴影尺寸 可选)
color(颜色) inset(外部阴影改为内部阴影) 外阴影默认值不用写
box-shadow: 10px 10px 5px #888888;
2.文字阴影
text-shadow:h-shadow(水平位置必须) v-shadow(垂直位置必须) blur(模糊程度可选) color(颜色);
text-shadow: 3px 4px 5px #000八、浮动
左浮动 float:left;
右浮动 float:right;
1.相对定位 position:relative;
2.绝对定位 position:absolute;
3.固定定位 position:fixed;
4.粘性定位 position: sticky;
注意：粘性定位占有原先的位置。必须添加 top 、left、right、bottom 其中一个才有效十、显隐性
1.display: none; 隐藏对象
2.display:black; 显示元素 (隐藏元素后不占据原来位置)
3.visibility:hidden; 隐藏元素
4.visibility:visible; 显示元素(隐藏元素后占据原来位置)
5.opacity: 0; 盒子消失（但占位置）
6.overflow:visible; 溢出显示
7.overflow:hidden; 溢出的内容隐藏
8.overflow:scroll; 溢出的部分添加滚动条(没有溢出滚动条也存在)
9.overflow:auto; 只有溢出多的还显示滚定条,否则不显示
十一、鼠标样式
1.光标箭头 cursor:default;
2.光标小手 cursor: pointer;
3.光标文本 cursor: text;
4.光标移动 cursor: move;
5.光标禁止 cursor: not-allowed; 十二、行内块级元素与文本对齐
1.居中对齐 vertical-align: middle;
2.顶部对齐 vertical-align: top;
3.底部对齐 vertical-align: bottom;
4.基线对齐(默认值) vertical-align: baseline;
注意：图片底下有一行空白缝隙 vertical=middle; 将其去掉十三、滤镜
filter:blur(10px) 模糊处理 数字越大越模糊
filter:grayscale(1) 页面成灰白色十四、过渡
transition: 要过渡的属性 花费时间(单位s) 运动曲线 何时开始(鼠标接触盒子);
(注意:谁做过渡给谁加) 运动曲线(匀速linear 逐渐变慢ease)
transtion: width 1s linear 1s;
过渡多个元素 transtion: width 1s , hight 1s ;
过渡所有元素 transtion: all 1s; 或 transtion: 1s; 十五、2D转换
1.2D移动(translate类似定位，不会影响到其他元素的位置.对行内标签没有效果)
transform:translate(50px,50px);
transform: translateX(50px); 向右50px
transform: translateY(50px); 下面50px2.2D 旋转
transform:rotate(30deg)
注意：角度为正时 顺时针 负时 为逆时针3. 2D缩放
transform:scale(2,3); 表示宽2倍，高3倍
transform:scale(2) ： 表示宽高都是2倍
transform:scale(0.5,0.5)：缩小4.旋转中心（影响旋转和缩放）
transform-origin:50% 50%; 元素中心位置
transform-origin:top left; 左上角
transform-origin:50px 50px; 距离左上角5.2D的综合写法
transform: translate() rotate() scale() 空格隔开
注意：其顺序会影转换的效果。（先旋转会改变坐标轴方向),位移放到最前
十六、3D
1.位移translate3d
transform:translate3d(x,y,z);
transform:translateZ(100px);2.视距 (物体距离屏幕的距离，z轴距离与物体大小的关系成正比)
perspertive:100px;
注意:1.视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。
2.给父亲添加perspective,作用在子元素上
3.给3d效果一定要给3.旋转
transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转 deg为角度（了解即可）4.保存3D效果
transform-style: preserve-3d;
给父元素添加,让子元素保留3D效果
十七、动画的制作
/* 1 声明动画函数 */
@keyframes ani_div {
0% {
width: 100px;
background-color: red;
}
50% {
width: 150px;
background-color: green;
}
100% {
width: 300px;
height: 300px;
background-color: yellow;
}
}
keyframes关键帧，理解，定义动画就是定义动画过程中的几个关键帧，然后根据关键帧依次变化
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 2 调用动画 */
animation-name: ani_div;
/* 持续时间 */
animation-duration: 2s;
/* 速度曲线 ease： 慢-快-慢 默认值
ease-in： 慢-快
ease-out： 快-慢
ease-in-out： 慢-快-慢
linear 匀速
*/
animation-timing-function: linear;
/* 延迟时间 */
animation-delay: 1s;
/* 循环次数 infinite无线循环 数字循环几次 */
animation-iteration-count: infinite;
/* 循环方向 normal 默认值 reverse 反向运行 （reverse：反向，逆向播放）
alternate 正-反-正 （alternate：交替，轮流）
alternate-reverse 反-正-反 */
animation-direction: alternate-reverse;
/* 动画等待或者结束的状态 backwards 默认回到初始
forwards 动画结束的位置
*/
animation-fill-mode: backwards;
/* 动画的播放状态 running 播放
paused 暂停
*/
animation-play-state: running;
}
动画简写语法：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
注意:1.动画的名字和持续时间必须写,
2.简写属性里面不包含 animation-play-state,暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
3.想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
4.多个动画写法,用逗号隔开
例如:animation: name duration， name duration ;
其他css样式
1.li的小圆点去掉 list-style:none;
2.清除轮廓 outline: 0;
3.防止文本域拖拽 resize: none;
4.盒子宽度 width: calc(100%-30px) 子元素比父元素小30px注意：
css的书写规范 建议遵循以下顺序：
-
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-
自身属性：width / height / margin / padding / border / background
-
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
