跟着黑马学CSS打卡第四天

 提示：个人记录学习使用  

前言

CSS字体图标，CSS修饰属性

---

一、字体图标

1、字体图标

展示的是图标，本质是字体

2、作用

在网页中添加简单的、颜色单一的小图标

3、优点

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

4、方法

www.iconfont.cn

网页内注册账号下载

5、代码

注意：css代码为网站下载的源文件，直接用即可

1、body

    <div class="iconfont icon-xihuan"></div>
    <div class="iconfont icon-Wechat"></div>

2、link

<link rel="stylesheet" href="./素材/iconfont/iconfont.css">

3、style

        /* 如果要调整字体大小，注意 选择器优先级 要高于 iconfont 类 */
        .iconfont {
            font-size: 100px;
            color: green;
        }

6、效果图

二、垂直对齐方式 vertical-align

1、代码

1、body

    <div>
        <img src="./素材/user.png" alt="">
        <!-- 伊地知虹夏 -->
    </div>

2、style

        img {
            /* 居中 */
            vertical-align: middle;

            /* 顶对齐：最高内容的顶部 */
            /* vertical-align: top; */

            /* 底对齐：最高内容的底部 */
            /* vertical-align: bottom; */

            /* 因为浏览器把行内块、行内标签 当作文字处理，默认按基线对齐 */
            /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失 */
            /* display: block; */
        }

2、效果图

三、过渡

1、作用

可以为一个元素在不同状态之间切换的时候添加

2、代码 transition

1、body

<img src="./素材/20231011_011235.jpg" alt="">

2、style

 注意事项：transition 要写在原位置上

        img {
            width: 200px;
            height: 170px;
            /* all：全部过渡；1s：秒数 */
            transition: all 1s;
        }

        img:hover {
            width: 500px;
            height: 400px;
        }

 3、效果图

//动态不知道怎么贴上来。。。

四、透明度

1、作用

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

2、属性

1、属性名：opacity

2、属性值：0 - 1

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

3、代码

1、body

<img src="./素材/20231011_011235.jpg" alt="">

2、 style

        div {
            width: 500px;
            height: 500px;
            background-color: orange;

            opacity: 0.6;
        }

        img {
            width: 300px;
            /* opacity: 0.6; */
        }

4、效果图

五、光标类型

 1、作用

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

2、属性

1、属性名：cursor

2、属性值：

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

3、代码

1、body

<div></div>

2、style

        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            cursor: pointer;
            cursor: text;
            cursor: move;
        }

---

总结

分享歌词：
終わんない愛を抱いていたくないの，
不想抱持着没完没了的爱吗，
もっとちゃんと不安にしてよ，
给我更深地感受这份不安吧，
いないいないばぁで演じて欲しいの，
想要继续扮演这场捉迷藏游戏吗，
もっとちゃんと応えてよ，
那就给我好好应对下去吧。
分享DECO*27/初音ミク的单曲《ヒバナ (火花)》