CSS之额外知识补充 (九)：border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性

已于 2023-06-10 15:05:34 修改
阅读量127 收藏
点赞数 1
分类专栏： CSS3 文章标签： css 前端 html
于 2023-05-20 21:55:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sedrick_/article/details/130783648
版权

跳转目录🚀

篇章知识点
CSS之邂逅(一)认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. border图形

1.1 边框的形状

  • 前言：border主要是用来给盒子增加边框的，但是在开发中我们也可以利用边框的特性来实现一些形状

  • 边框的四个方向边框具体占据的范围
    在这里插入图片描述

  • 使用border属性来画图 ===> 三角形

.box {
      /* 1. 我们需要将box-sizing设置为 border-box */
      box-sizing: border-box;
      width: 100px;
      height: 100px;

      /* 2.由于改变盒子模型--边框大小不会改变盒子的大小，因此边框粗度设置为盒子的一半 */
      border: 50px solid transparent;
      border-top-color: orange;

      /* 3.可以旋转,改变一些旋转中心 */
      transform-origin: 50% 25%;
      transform: rotate(90deg);
    }

2. Web网络字体

2.1 认识Web网络字体

我们之前通过 font-family 来设置使用的字体，我们可以提供1个或者多个字体，让浏览器自己去找到系统上可用的字体，但是这样字体选择非常有限，并且不能进行一些定制化的需求。

  1. Web-safe字体：系统上自带的字体
  2. Web Fonts：通过一些渠道获取到希望使用的字体

2.2 Web Fonts的工作原理

  • Web Fonts的工作原理
    1. 首先，我们需要通过一些渠道获取到要使用的字体
      • 对于某些收费的字体, 我们需要获取到对应的授权
      • 对于某些公司定制的字体, 需要设计人员来设计
      • 对于某些免费的字体, 我们需要获取到对应的字体文件;
    2. 其次，在CSS代码中使用Web Fonts字体
    3. 最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中
  • 从用户角度看Web Fonts字体
    1. 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
    2. 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体
    3. 在浏览器中使用对应的字体显示内容

2.3 使用Web Fonts

  • 操作步骤：
    1. 在字体天下网站下载一个字体：https://www.fonts.net.cn/
    2. 将字体放到对应的目录中
    3. 通过@font-face（用于加载一个自定义的字体）来引入字体, 并且设置格式
    4. 使用字体
      在这里插入图片描述

2.4 Web Fonts的兼容性

不同的web-fonts字体会有不同的后缀名，并且对许多浏览器的兼容性也是不同的，因此我们需要准备各种格式的字体。
在这里插入图片描述

  • 常见的字体
字体后缀名补充
TrueType.ttf
OpenType.otf建立在TrueType字体之上
Embedded OpenType.eotOpenType字体的压缩版
SVG字体.svg .svgz
示Web Open Font Format web开放字体.woff建立在TrueType字体之上

2.5 Web Fonts兼容性写法

  • 如果我们需要具备很强的兼容性, 那么可以如下格式编写
    1. 这是一个兼容性的固定写法，我们需要写两个src
    2. url的作用：指定资源的路径
    3. format的作用：是用于帮助浏览器快速的识别字体文件的格式。其中，后缀名不能作为文件的识别，它是属于封装格式，与编码格式是不一样的`
@font-face {
      font-family: "fsj";
      src: url("./fonts/fonteditor/240-SSYaLiTi.eot");
      /* IE9 */
      src: url("./fonts/fonteditor/240-SSYaLiTi.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("./fonts/fonteditor/240-SSYaLiTi.woff") format("woff"),
        /* chrome、firefox */
        url("./fonts/fonteditor/240-SSYaLiTi.ttf") format("truetype"),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
        url("./fonts/fonteditor/240-SSYaLiTi.svg#uxfonteditor") format("svg");
      /* iOS 4.1- */
    }

3. Web字体图标

  • 思考： 字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？
  • 答案： 当然可以

3.1 认识字体图标

  • 什么是字体图标：原本我们设计字体只局限文字，但是我们可以将字体设计成各式各样的形状、图标的样子作为一种font-family，这样的字体就叫做字体图标。
  • 字体图标的好处
    • 放大不会失真，它是矢量的
    • 可以任意切换颜色
    • 用到很多个图标时，文件相对图片较小

3.2 使用字体图标

  • 使用字体图标的步骤
  1. 登录阿里icons ：https://www.iconfont.cn/
  2. 将图标添加入库
  3. 点击 下载代码，下载完成后解压到对应的字体文件夹
  4. 使用相应的图标在这里插入图片描述在这里插入图片描述
  • 字体图标有两种使用的方法
    1. 第一种(推荐)：直接将iconfont.css链接至网页中，图标的使用通过添加对应的class即可
      在这里插入图片描述
    2. 第二种(有一点麻烦)：下载文件后，文件中有一个demo_index.html的网页，上面记录着所下载图标的编码。我们直接通过 字符实体 来添加
      在这里插入图片描述

4. CSS精灵图

4.1 认识精灵图 CSS Sprite

  • 什么是CSS Sprite：是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
  • 精灵图的好处
    1. 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
    2. 减小图片总大小
    3. 解决了图片命名的困扰，只需要针对一张集合的图片命名
  • 如何制作精灵图：https://www.toptal.com/developers/css/sprite-generator

4.2 精灵图的使用

  • 精灵图的原理：通过只显示图片的很小一部分来展示的，通过设置背景相关属性和其他一些属性来调整显示的部分。
    1. 设置对应元素的宽度和高度
    2. 设置精灵图作为背景图片
    3. 调整背景图片的位置来展示
  • 如何快速获取精灵图的位置：http://www.spritecow.com/
    在这里插入图片描述
  • 精灵图的案例练习：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .icon {
      display: inline-block;
      background-image: url(./imgs/iconall-sprite.png);
      background-repeat: no-repeat;
    }

    .icon-button {
      background-position: -2px -612px;
      width: 106px;
      height: 106px;
    }
  </style>
</head>

<body>
  <i class="icon icon-button"></i>
</body>

</html>

在这里插入图片描述

5. cursor属性

  • 作用：cursor可以设置鼠标指针（光标）在元素上面时的显示样式
  • cursor常见的值

    • pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式

    • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式

    • auto：默认值，浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式

    • default：由操作系统决定，一般就是一个小箭头

    • none：没有任何指针显示在元素上面

AHuSjCoding
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css expression实现的图片自动缩放
12-12
cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:[removed] function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom...
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧
weixin_42044763的博客
05-18 2321
一、精灵图 精灵图是啥捏，其实说白了就是一个合并的图层，把一个网页里的所有小图标合并成一个大的图，然后某个位置要用某个图的时候，先把这个大的图调用过来，通过挪动位置来定位到里面的小图，比如王者荣耀官网这个图： 精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。 使用代码试一试： 先用PS切图工具量一下宽高和xy轴的偏移距离，然后再去定义盒子 .box1 { width: 63px; height: 59px;
【HTML+CSS】CSS高级技巧：精灵图+字体图标+CSS三角应用
qq_30148319的博客
03-29 2173
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、精灵图 1、精灵图的理解 （1）核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。 （2）目的：有效的减少服务器接收和请求的次数，提高页面的加载速度。 2、精灵图的语法 /* 1、先导入精灵图作为背景图。 */ /* 2、定位到想要的图标的位置 */ /* 注意：x轴向右边走为正值，左边走为负值；
WEB代码：CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式
weixin_43731793的博客
07-13 1932
1、字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{ font-family: 微软雅黑; font-size:30px; font-weight:bold; font-style:italic; } 1、文本属性: 1.字间距 letter-spa...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
weixin_39619478的博客
11-20 6273
今天给大家分享8种炫酷按钮的CSS实现。1. 3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：HTML：<button class="button-3d-1">3D Button 1</button>CSS:.b...
Web前端学习笔记——CSS定位、高级技巧、文字溢出、精灵图、Web字体
唯恋殊雨的博客
09-20 3927
定位(position) background-position 背景定位 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！ 为什么要用定位？ 那么定位，最长运用的场景...
使用CSS来扩展增强Input Range的示例
01-21
什么是Input Range ...Input Range 对象表示使用 type=...你可以使用 getElementById() 函数来访问使用 type=range 属性的 <input> 元素: var x = document.getElementById(myRange); 尝试一下提示： 你同样可以
超全面CSS样式整理
01-21
一 字体属性：(font)  大小 {font-size: x-large;}(特大)xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD  样式 {font-style: oblique;}(偏斜体)italic;(斜体) normal;(正常)  行高 {line-...
css_checkbox:跨浏览器且可访问
04-04
纯CSS颜色品牌复选框。 在手机，平板电脑，笔记本电脑和台式机上进行了测试。 在所有常绿用户代理上进行了。 /* Checkbox styles Begin */. prod-sec__fbt . js-selectall { position : absolute; border : solid 1 ...
js+css实现select的美化效果
11-25
先给大家看一看美化之后的效果图： CSS： .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; ...
-CSSE3100/7100
LUCK_520的博客
05-11 789
Assignment 3 CSSE3100/7100 Reasoning about Programs Due: 4pm on 17 May, 2024 The aim of this assignment is to consolidate your understanding of the course's material on objects and array-based data structures. It is worth 15% of your final mark for the
CSS文字描边，文字间隔，div自定义形状切割
m0_61604012的博客
05-10 143
CSS文字描边，文字间隔，div自定义形状切割
Sass详解：颠覆CSS开发的新时代
q_913246828的博客
05-11 292
本文深入探讨了Sass作为CSS的扩展语言的各项特性、优势以及应用场景。Sass提供了诸如变量、嵌套、Mixin等功能，帮助开发者提高开发效率和样式代码的可维护性。同时，Sass在大型项目和团队协作中有着广泛的应用，成为提升前端开发效率和质量的重要工具。
css 案例 横向滚动渐变
weixin_38982591的博客
05-11 231
【代码】css 案例 横向滚动渐变。
tailwindcss使用介绍
liu289747235的专栏
05-10 550
用于控制元素纵横比。
常用CSS和XPATH元素定位方法
m0_61722509的博客
05-11 183
表示id. 表示class空格 表示tag, 表示或(,的优先级比较低，注意加括号):nth-child(n),表示父节点的第n个子节点:nth-last-child(n),表示父节点的倒数第n个子节点Span:nth-of-type(n)，表示父节点的第n个类型为span的元素Span:nth-last-of-type(n)，表示父节点的倒数第n个类型为span的元素元素1 + 元素2 表示元素2是元素1后面紧跟的兄弟。
CSS-浮动
Kevin7_35Durant的博客
05-10 213
right 浮动在网页右边。作用：盒子的顶点是一样的，具备行内块的特征，能设置宽高。属性值：left 浮动在网页左边。三个盒子都是紧密相联的。
CSS 实现文本的渐变色
最新发布
northcastle的博客
05-13 247
css 实现 文本的渐变色效果
picoCTF-Web Exploitation-Web Gauntlet
huckers的博客
05-12 462
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
html构建一个网站 3个页面,web网页搭建：HTML与CSS（一）
06-01
好的，我可以为你提供一些基本的HTML和CSS知识，帮助你构建一个简单的网站。 首先，我们需要了解HTML和CSS是什么。HTML是一种标记语言，用于创建网页结构和内容。CSS是一种样式语言，用于控制网页的外观和布局。 接下来，我们可以开始构建我们的网站。我们将创建三个页面：主页、关于我们和联系我们。 1. 主页 我们将首先创建我们的主页。在HTML中，我们可以使用以下代码来创建一个基本的网页结构： ```html <!DOCTYPE html> <html> <head> <title>我的主页</title> </head> <body> <h1>欢迎来到我的主页！</h1> <p>这里是我个人的网站，我会在这里分享我的想法和创意。</p> </body> </html> ``` 这个代码将创建一个包含标题，正文和段落的基本网页结构。我们可以使用CSS来控制网页的样式和布局。例如，我们可以使用以下代码来为我们的标题添加样式： ```css h1 { color: blue; font-size: 36px; text-align: center; } ``` 这将使我们的标题居中，蓝色和36像素大小。 2. 关于我们 现在我们可以创建我们的关于我们页面。我们可以使用类似于主页的HTML代码来创建新页面，但是我们需要更改标题和正文内容。例如： ```html <!DOCTYPE html> <html> <head> <title>关于我们</title> </head> <body> <h1>关于我们</h1> <p>我们是一家创新的公司，致力于推动科技发展。</p> </body> </html> ``` 我们可以使用CSS来控制我们的页面布局和样式，例如： ```css body { background-color: #f2f2f2; } h1 { color: #333; text-align: center; margin-top: 50px; } p { font-size: 18px; line-height: 1.5; margin: 20px; } ``` 这将使我们的页面具有灰色背景，黑色标题，18像素字体大小和1.5的行高。 3. 联系我们 最后，我们可以创建我们的联系我们页面。同样，我们可以使用类似于主页和关于我们页面的HTML代码来创建新页面。例如： ```html <!DOCTYPE html> <html> <head> <title>联系我们</title> </head> <body> <h1>联系我们</h1> <p>如果您有任何问题或建议，请随时与我们联系。</p> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件：</label> <input type="email" id="email" name="email"><br><br> <label for="message">留言：</label><br> <textarea id="message" name="message" rows="5" cols="50"></textarea><br><br> <input type="submit" value="发送"> </form> </body> </html> ``` 这将创建一个带有表单的页面，使用户可以向我们发送消息。同样地，我们可以使用CSS来控制表单的样式和布局，例如： ```css form { margin: 20px; padding: 20px; border: 1px solid #ccc; } label { display: inline-block; width: 100px; text-align: right; margin-right: 10px; } input[type="text"], input[type="email"], textarea { width: 300px; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"]:hover { background-color: #45a049; } ``` 这将使我们的表单具有灰色边框，标签靠右对齐，绿色提交按钮等。 以上是一个简单的HTML和CSS示例，可以帮助您构建一个简单的网站。当然，这只是一个起点，您可以使用更多高级的HTML和CSS技术来创建更复杂的网站。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值