跟着黑马学CSS打卡第四天

跟着黑马学CSS打卡第四天

 提示：个人记录学习使用  

前言

CSS字体图标，CSS修饰属性

---

一、字体图标

1、字体图标

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

2、作用

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

3、优点

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

4、方法

www.iconfont

网页内注册账号下载

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/初音ミク的单曲《ヒバナ (火花)》