css day 5

1、icon字体图标

iconfont.cn 字库       icomoon.io 字库

挑选 下载（把fonts复制到网页同一文件夹中）  引入html（放入style中）

（1）@font-face {

    font-family: "icomoon"；

    src: url('fonts/icomoon.eot?7kkyc2')；

    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

        url('fonts/icomoon.woff?7kkyc2') format('woff'),

        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

    font-style: normal;

}

（2）span内粘贴字体图标网页（demo）中图标后面小方框

（3）span {font-family: "icomoom"} 图标出现

2、追加新图标

（1）点击import icons把压缩包里selection.json上传

（2）挑选需要的图标

（3）下载

3、css reset 初始化

引入normrlize.css head中间 

4、ico图标

放在head中间

网站/favicon.ico 右键图片另存为 放在根目录

5、构建

css： bass.css（公共样式头部尾部）  normalize.css（初始化） index.css（网站首页独有）

js

images

fonts

index.html

favicon.ico

6、h1后必须有网站名

隐藏字text-indent：-999em；  overflow：hidden；

7、三大标签

：网站名（产品名）-网站的介绍

8、W3C

www.cssstates.com

9、代码压缩

横向ctrl+shift+(   复原ctrl+shift+）

站长之家www.chinaz.com

10、html 5（ie9以上）

新标签 header（头部）nav（导航栏）footer（底部）article（定义文章）section（区域）aside（侧边栏）

       datalist（定义标签列表与input同用）fieldset（表单内元素分组与legend同用）

input新属性 email tel url number search range（拖动滑块）time date datetime month week

新增属性 placeholder（占位符） autofocus（自动获取光标）multiple（多选）required（不能为空）accesskey（规定激活某个元素快捷键）

音频

     

视频

   

11、C3

结构伪类选择器 ：first-child {}（其父首个子元素）：last-child {}（其父最后一个元素）

               ：nth-child（ even/2n（偶数）odd/2n+1（奇数）） {}（其父第n个子元素）

属性选择器 div[class](选出带有class属性)div[class=demo](选出class=demo)   div[class^=test](选出以test开头的)                div[class$=test](选出以test开头的) div[class*=test](选出包含test的)     

伪元素选择器 p::first-letter(第一个字)::first-line(第一行)::selection(选择文字时候状态)

             div::before{content:"";}(必须带content，在div内部前面加内容，为行内元素)

盒子模型 box-sizing: border-box;内减模式