一、选择符
1、元素选择符
*{} #id{} .class{} 标记{ }
2、关系选择符
(1)后代选择符（包含选择符） div p{}
(2)子选择符div>p{}
(3)相邻选择符 E+F E和F是相邻的，并且F必须是E后面的元素
(4)兄弟选择符 E~F E和F是兄弟，并且F必须是E后面的元素
3、伪类选择符
(1)超链接类的 a:link a:visited a:hover a:active
(2)E:hover 任何元素都可以加经过
(3):focus{outline:none;} 表单获取焦点去掉黑框
(4)E:nth-child() 数字 2n(even) 偶数 2n+1（odd） 奇数
E是孩子是标记，不分类型 父亲的孩子
(5)E:first-child{} E:last-child{} E:only-child{}
(6)E:nth-last-child() 倒数
(7)E:nth-of-type(){} 孩子 特指某一类型的孩子 （按类型数）
(8)E:only-of-type{}
(9)E:target E:checked 可以去了解一下
4、伪对象选择符
伪对象选择符：
E::before{content:'';}
E::after
E::placeholder
E:selection
/*兼容性 谷歌*/
input::-webkit-input-placeholder {
color: red;
}
/*兼容性 火狐*/
input::-moz-input-placeholder {
color: red;
}
/*兼容性 IE*/
input::-ms-input-placeholder {
color: red;
}
/* 标准写法 */
input::placeholder {
color: red;
}
二、文字图标的运用
阿里巴巴矢量库
三、css3制作三角形
百度一下
四、属性选择符
五、引入外部字体
@font-face {
/* font-family: "Raleway"; */
font-family: "jiaxu";
src: url(./fonts/Raleway/Raleway-Regular-2.ttf) format('truetype');
}
p {
/* font-family: "Raleway"; */
font-family: "jiaxu";
font-size: 30px;
color: brown;
}
六、过渡动画
/* transition-property: width,height;
transition-duration: 1s,2s;
transition-timing-function: ease, linear;
transition-delay: 0s,3s;
*/
transition: all 1s ease 2s;
七、clip裁剪
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
/* 上 右 下 左 */
clip: rect(0 78px 156px 0); position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
/* 上 右 下 左 */
clip: rect(0 78px 156px 0);
八、动画
/* 拆分 */
/* 动画名字 */
/* animation-name: changes; */
/* 动画的持续时间 */
/* animation-duration: 3s; */
/* 动画形式 ease ease-in ease-out ease-in-out linear */
/* animation-timing-function: ease; */
/* 动画延迟时间 */
/* animation-delay: 1s; */
/* 动画的方向 */
/* animation-direction: reverse; */
/* animation-direction: alternate; */
/* 动画的执行次数 infinite 无限循环*/
/* animation-iteration-count: infinite; */
/* animation-iteration-count: 2; */
/* 动画对象的状态 running paused */
/* animation-play-state: paused; */
/* 动画时间之外的状态 forwards 结束时*/
/* animation-fill-mode: forwards; */
/* 复合属性 */
animation: changes 3s ease 0s forwards;
九、变换
transform:rotate(30deg) translate(50px,50px) scale(1.2); 变换： 位移 旋转 缩放
transform-orign:left top; 旋转缩放中心点
transform-style:preserve-3d; 真3d
perspective:500px; 透视
perspective-origin:center center; 消失点 灭点
backface-visibility：hidden; 背面不可见
