CSS高级技巧 - 技术栈

1. PxCook

PxCook (像素大厨) 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板 (自动智能识别)
设计面板(手动测量尺寸和颜色)

2. CSS精灵

CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同。
设置盒子背景图为精灵图。
添加background-position属性，改变背景图位置。

1.使用PxCook测量小图片左上角坐标

2.取负数坐标为background-position属性值（向左上移动图片位置）

3. 字体图标

（1）字体图标：展示的是图标，本质是字体。

（2）作用：在网页中添加简单的、颜色单一的小图标。

（3）优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等；
轻量级：体积小、渲染快、降低服务器请求次数；
兼容性：几乎兼容所有主流浏览器；
使用方便：先下载再使用。

（4）下载字体图标：iconfont-阿里巴巴矢量图标库

（5）使用字体图标：

引入字体样式表（iconfont.css）
标签使用字体图标类名

html 复制代码

<html>
<head>
    <title>字体图标</title>
    <link rel="stylesheet" href="./iconfont.css"/>
    <style>
        .iconfont {
            font-size: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-test"></span>
</body>
</html>

4. 垂直对齐方式

属性名：vertical-align

|----------------|------------|
| 属性值 | 效果 |
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |

html 复制代码

<html>
<head>
    <title>垂直对齐方式</title>
    <style>
        div {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">小喵咪
    </div>
</body>
</html>

5. 过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性：transition（复合属性）

属性值：过渡的属性花费时间（s）

注意：

过渡的属性可以是具体的CSS属性
也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
transition 设置给元素本身

html 复制代码

<html>
<head>
    <title>过渡</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            transition: all 1s;
        }
        img:hover {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>

6. 透明度

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0-1

0，完全透明（元素不可见）
1，不透明
0-1之间小数，半透明

html 复制代码

<html>
<head>
    <title>透明度</title>
    <style>
        div {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>

7. 光标类型

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

|-------------|----------------|
| 属性值 | 效果 |
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |

html 复制代码

<html>
<head>
    <title>透明度</title>
    <style>
        div {
            cursor: move;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>