css重要知识

与表单有关的样式

outline : none; 输入框聚焦时默认的边框高亮

图片与文字对齐

vertical-align : middle ; 行内块元素与文本中线对齐

与文本有关的样式

a标签的下划线

text-dicoraption : none; line-through;

. 取消线 增加删除线

字距

letter-spacing:14px; 字距

文本域的拖拽

resize:none; 文本域禁止拖动

溢出容器的文字打点展示

white-space：nowrap; 文本强制不换行

overflow：hidden; 超出部分隐藏

text-overflow：ellipsis; 溢出部分文本打点展示

背景有关的样式

background-color: transparent; 背景颜色透明;

背景颜色渐变

background:linear-gradient(red,blue); 从上到下的线性渐变(可以有多个颜色);

background: linear-gradient(to right,red,blue); 从左向右的线性渐变;

background:linear-gradient(to bottom right,red,blue); 从左上到右下的线性渐变;

background:linear-gradient(45deg ,red ,blue); 45度的线性渐变;

background: radial-gradient(red,yellow,green); 径向渐变(可以有多个颜色);

背景尺寸

background-size: contain ; cover;

都是等比例展示 背景图完全展示容器中 背景图不会被完全展示,但会被完全占满容器

鼠标箭头样式

cursor: default ; pointer ; move; wait; text; not-allowed;

. 小白箭头 小手 移动光标 载入光标 文本光标 禁止光标

table表格的边框

border-collapse : collapse; 相邻边被合并

transition过渡属性

transition : 参与过渡的属性 过渡的持续时间 过渡的动画类型 延迟过渡的时间;

transition: all 3s linear 3s; 所有属性匀速过渡3s ,延迟3秒执行

transition-property: all; 指定的属性（默认值为all 为所有属性）

transition-duration: 3s; 指定完成过渡的时间

transition-timing-function:linear ; 指定完成过渡的曲线（是匀速[linear]还是非匀速）

transition-delay: 3s; 指定延迟时间（延迟多久后开始执行）

transform转换属性

transform：translate(100px) scale(2); 多属性值书写方式

移动 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示x轴方向的移动距离，第二个参数表示y轴方向的移动距离。

缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

一个参数时：表示水平和垂直同时缩放该倍率;

两个参数时：第一个参数指定x轴方向的缩放倍率，第二个参数指定y轴方向的缩放倍率。

旋转 rotate

用法：transform: rotate(45deg);

一个参数:顺时针旋转45度。

倾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示x轴方向的倾斜角度，第二个参数表示y轴方向的倾斜角度。

设置元素基准点

transform-origin: 50% 50% ; 设置元素基准点;

transform-origin: center center;

left=0%; center=50%; right=100%

top=0%; center=50%; bottom=100%;

动画 Animation

• 定义简单动画

@keyframes   name {
			from { opacity: 1; }
            to { opacity: 0; } 
}

• 定义复杂动画

@keyframes name{
	0% { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20px); }
	80% { transform: translate(80px, 0); }
	100% { transform: translate(100px, 20px); }
}

animation 属性

animation：动画名称 持续时间 过渡类型 延迟时间 循环次数 是否反向运动 结束后的状态 动画的状态 ;

​ 动画名称 animation-name : name 名称

​ 持续时间 animation-duration : 2s 时间

​ 过渡类型 animation-timing-function : linear 线性匀速过渡

​ ease-in ; 由慢到快;

​ ease-out ; 由快到慢

​ 延迟时间 animation-delay : 1s 时间

​ 循环次数 animation-iteration-count : 1 次数

​ infinite 无限循环

​ 是否反向运动 animation-direction : normal ; 正常方向

​ reverse ; 反方向运行

​ reverse： 反方向运行;

​ alternate： 动画先正常运行再反方向运行，并持续交替运行;

​ alternate-reverse： 动画先反运行再正方向运行，并持续交替运行;

​ 结束后的状态 animation-fill-mode : forwards ; 设置对象状态为动画结束时的状态

​ backwards ; 设置对象状态为动画开始时的状态

​ 动画的状态 animation-play-state : running ; 运动

​ paused ; 暂停

font有关的属性

font-family 设置字体

font-family : “Arial” , “Tahoma” , “微软雅黑” , “雅黑”;

font-size 字体大小

font-size : 18px;

font-size : 150%;

font-size : xx-small , x-small , small , medium , large , x-large , xx-large ;

font-size : smaller,larger;

font-style 字体样式

font-style:normal,italic,oblique;

font-weight 字体粗细

font-weight : lighter , normal( 相当于400 ) , bold( 相当于700 ) , bolder ;

font-weight : 100-900 ;

---

table表格

//注释:  border是表格的边框    
//cellspacing是单元格与单元格之间的间距 
//cellpadding是单元格与单元格内容之间的间距
<table border="1" cellspacing ='0' cellpadding='2' >      
        <thead>             //这是表头
            <tr>
                <th>项目1</th>
                <th>项目2</th>
                <th>项目3</th>
            </tr>
        </thead>
        <tbody>             //这是表格主体部分
            <tr>
                <td colspan="2">内容</td>       //colspan是从左往右合并  
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td rowspan="2">内容</td>       //colspan是从上往下合并 
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
        <tfoot>            //这是表格底部
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tfoot>
    </table>

//利用css样式给table设置边框
 <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            border: 2px solid #f40;
        }
</style>