入门级 HTML5+CSS3学习笔记（四）

一、精灵图

CSS 精灵技术（CSS Sprites、CSS 雪碧）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

1. 精灵图（sprites）的使用

• 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
• 这个大图片也称为 sprites 精灵图 或者 雪碧图。
• 移动背景图片位置， 此时可以使用 background-position 。
• 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同。
• 因为一般情况下都是往上往左移动，所以数值是负值。
• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

2. 使用精灵图核心总结：

• 精灵图主要针对于小的背景图片使用。

• 主要借助于背景位置来实现—background-position 。

• 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

二、字体图标（iconfont）

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

1. 优点

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
• 兼容性：几乎支持所有的浏览器。
• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

2. 使用步骤
   字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：

    - 下载 
    - 引入 （引入到我们html页面中）
    - 追加 （以后添加新的小图标）
   

3. 字体图标的下载

icomoon字库 http://icomoon.io 推荐指数 ★★★★★

阿里iconfont字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

4. 字体图标的引入
   1). 把下载包里面的 fonts 文件夹放入页面根目录下
   
   2). 在 CSS 样式中全局声明字体

 @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-weight: normal;
   font-style: normal;
 }

5. 字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

6. 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

7. html 标签内添加小图标
   打开 /icomoon/demo.html ，把小方块复制

8. 标签定义字体
   需保证 font-family 与 @font-face里面的字体保持一致。

.ifont{
    font-family: 'icomoon';
}

/* 字体申明 */
@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-weight: normal;
    font-style: normal;
  }

<span class="ifont"></span>

三、CSS 三角

1. 绘制矩形三角

.boxRect1{
    width: 0;
    height: 0;
    margin: auto;
    border-top: 50px solid rgb(170, 84, 170);
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

<div class="boxRect1"></div>

效果：

2. 绘制矩形三角

.boxRect1{
    width: 0;
    height: 0;
    margin: auto;
    border-top: 50px solid rgb(170, 84, 170);
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

.boxRect2{
    width: 0;
    height: 0;
    margin: auto;
    border: 30px solid transparent;
    border-top-color: rgb(158, 63, 158);
}

<div class="boxRect1"></div>
<div class="boxRect2"></div>

效果：

四、CSS 用户界面样式

1. 鼠标样式 cursor：li { cursor: pointer; }

2. 轮廓线 outline：input { outline: none; }

3. 防止拖拽文本域 resize：textarea{ resize: none; }

4. vertical-align 属性应用：vertical-align : baseline | top | middle | bottom

5. 溢出的文字省略号显示

  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

6. 多行文本溢出显示省略号（有较大兼容性问题，适合于webKit浏览器或移动端）

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7. margin负值运用

• 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

• 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

五、HTML5新特性

1. 语义化标签

• <header> 头部标签
• <nav> 导航标签
• <article> 内容标签
• <section> 定义文档某个区域
• <aside> 侧边栏标签
• <footer> 尾部标签

2. 多媒体标签

• 视频标签- video：<video src="media/mi.mp4"></video>

》兼容写法

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持播放视频
</video >

》video 常用属性

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg">
</video>

• 音频标签- audio：<audio src="media/music.mp3"></audio>

》兼容写法

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

》audio 常用属性

<audio src="media/music.mp3" autoplay="autoplay" controls="controls">
</audio>

3. 新增的表单元素
   常见输入类型：text password radio checkbox button file hidden submit reset image

<form action="">
    <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

》新输入类型

》新增的表单属性

六、CSS3新特性

1. 属性选择器

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
    color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {
    color: blue;
}

》注意事项：

• 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
• 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
• 属性选择器也可以选择出来自定义的属性
• 注意：类选择器、属性选择器、伪类选择器，权重为 10。

2. 结构伪类选择器
   结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

》E:nth-child(n)

匹配到父元素的第n个元素

• 匹配到父元素的第2个子元素

  ul li:nth-child(2){}

• 匹配到父元素的序号为奇数的子元素

  ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

• 匹配到父元素的序号为偶数的子元素

  ul li:nth-child(even){} even（4个字母 ）

• 匹配到父元素的前3个子元素

  ul li:nth-child(-n+3){}

  选择器中的 n 是怎么变化的呢？

  因为 n是从 0 ，1，2，3… 一直递增

  所以 -n+3 就变成了

  • n=0 时 -0+3=3
  • n=1时 -1+3=2
  • n=2时 -2+3=1
  • n=3时 -3+3=0
  • …

》E:nth-child 与 E:nth-of-type 的区别

• E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

》小结

• 结构伪类选择器一般用于选择父级里面的第几个孩子。
• nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配。
• nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子。
• 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式。
• 如果是无序列表，我们肯定用 nth-child 更多。
• 类选择器、属性选择器、伪类选择器，权重为 10。

3. 伪元素选择器

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    /* div::before 权重是2 */
    div::before {
        /* 这个content是必须要写的 */
        content: '我';
    }
    div::after {
        content: '哈哈';
    }
</style>
<body>
    <div>123</div>
</body>

》 注意：

• before 和 after 创建一个元素，但是属于行内元素。
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
• 语法： element::before {} 。
• before 和 after 必须有 content 属性 。
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为 1。

》应用：字体图标

<head>
    ...
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>