保姆级教程 CSS 知识点梳理大全，超详细！！！

于 2024-04-14 23:17:40 发布
阅读量1k 收藏 20
点赞数 25
分类专栏： 程序员 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84094868/article/details/137757782
版权

（十五）、CSS3新增伪类

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十六）、伪元素

CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素

伪元素用双冒号表示，IE8可以兼容单冒号

：：before

：：after

请添加图片描述

在这里插入图片描述

在这里插入图片描述

（十七）、：：selection

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十八）、：：first-letter和：：first-line

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、层叠性和选择器权重的计算

  • CSS全名叫做“层叠样式表”，层叠性是他很重要的性质

  • 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

在这里插入图片描述

如果多个选择器的定义有冲突呢？CSS有严密的处理规则

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

复杂选择器的计算

复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重

请添加图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

四、文本与字体属性

（一）、常用的文本字体属性

  • color属性可以设置文本内容的前景色

  • color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法

  • 用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。

（二）、十六进制表示法

十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（三）、rgb() 表示法

在这里插入图片描述

（四）、rgba()表示法

颜色可以使用rgba（） 表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心

（五）、font-size属性

font-size属性用来设置字号，单位为px 后面还会说到em和rem

网页文字正文字号通常是16px浏览器最小支持10px

在这里插入图片描述

（六）、font-weight属性

  • font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

在这里插入图片描述

（七）、font-style属性

作用：设置文字的倾斜

在这里插入图片描述

（八）、text-decoration属性

text-decoration属性用于设置文本的修饰外观的（下划线，删除线）

在这里插入图片描述

（九）、font-family属性

  • font-family属性用于设置字体的属性

  • 字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体

  • 字体名称中有空格，必须要用引号来包裹

font-family：" 微软雅黑";

font-family: serif,“Times New Roman”,“微软雅黑”;

在这里插入图片描述

中文字体也可以称呼他们的名字

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少

在这里插入图片描述

问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体

定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体

在这里插入图片描述

在这里插入图片描述

（十）、阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址 https://www.iconfont.cn/webfont#!/webfont/index

使用阿里巴巴普惠字体也省去了下载的麻烦

在这里插入图片描述

使用步骤：

下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式

第一步：下载字体

在这里插入图片描述

第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）

在这里插入图片描述

第三步：定义使用 webfont 的样式

在这里插入图片描述

第四步：为文字加上对应的样式

在这里插入图片描述

在这里插入图片描述

（十一）、text-indent属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十二）、 line-height行高

  • line-height属性的单位可以是px为单位的数值

line-height：30px;

  • line-height属性的单位可以是 没有单位是数值，表示字号的倍数，这是最推荐的写法

line-height：1.5;

  • line-height属性也可以是百分数，表示字号的倍数

line-height：150%;

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十三）、单行文本垂直居中

行高等于盒子的高度，设置单行文本垂直居中对齐

在这里插入图片描述

设置text-align：center，即可实现文本水平居中

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十四）、font合写属性

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十五）、继承性

  • 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。

  • 因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十五）、继承性的就近原则

在继承的情况下，选择器权重计算失效，就近原则

在这里插入图片描述

在这里插入图片描述

五、盒子模型

（一）、什么是盒子模型

所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（二）、width属性

  • width属性表示盒子内容的宽度

  • width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

  • 当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

在这里插入图片描述

在这里插入图片描述

（三）、height属性

  • height属性表示盒子内容的高度

  • height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

  • 盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（四）、padding属性详解

  • padding属性是盒子的内边距，即盒子边框内壁到文字的距离

  • padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

  • padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding

  • padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（五）、margin属性详解

margin是盒子的外边距，即盒子与其他盒子的距离

在这里插入图片描述

margin的塌陷问题

竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准

请添加图片描述

（六）、一些元素有默认的margin

一些元素（比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除

在这里插入图片描述

在这里插入图片描述

（七）、盒子的水平居中

将盒子的左右两边的margin都设置为0，盒子将水平居中

文本居中是text-align：center; 和盒子水平居中是两个概念

盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（八）、盒模型的计算

在这里插入图片描述

（九）、box-sizing属性

给盒子添加了box-sizing：border-box属性之后，盒子的width、height数字就表示盒子实际占有的宽高（不包含margin）了，即padding、border变为内缩，不再外扩。

box-sizing属性大量用于移动网页的制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面中使用较少。

在这里插入图片描述

（十）、行内元素和块级元素

在这里插入图片描述

（十一）、行内块

img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能够并排显示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十二）、行内元素和块级元素的相互转换

  • 使用display：block；可以将元素转换为块级元素

  • 使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见

  • 使用display：inline-block；可以将元素转换为行内块元素

在这里插入图片描述

在这里插入图片描述

（十三）、元素的隐藏

  • 使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样

  • 使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

六、浮动与定位

（一）、浮动

  • 浮动的本质：用来实现并排的效果

  • 浮动使用的要点：要浮动，并排的盒子都实现浮动

  • 父盒子要有足够的宽度，否则子盒子会掉下去

在这里插入图片描述

（二）、浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素

如下图所示：3号盒子会掉到2号盒子的下面

在这里插入图片描述

（三）、浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签

在这里插入图片描述

在这里插入图片描述

（四）、右浮动

在这里插入图片描述

（五）、使用浮动的注意事项

  • 垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动

  • “大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动

  • div是免费的，不要节约盒子

在这里插入图片描述

（六）、BFC规范

BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

观察下面的例子

在这里插入图片描述

在这里插入图片描述

出现以上问题的原因

  • 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身

  • 这个盒子没有形成BFC

解决办法

在这里插入图片描述

在这里插入图片描述

（七）、如何创建BFC？

在这里插入图片描述

（七）、清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响

举例说明

在这里插入图片描述

来猜一下页面中会出现什么样的效果？

大家应该都会说两行两列？然而没有清除浮动就成行显示了！出现以下这种情况是没有清除浮动

在这里插入图片描述

清除浮动的方法一：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

清除浮动的方法二：

在这里插入图片描述

使用方法二的副作用：margin会失效

在这里插入图片描述

清除浮动的方法三：

在这里插入图片描述

在这里插入图片描述

清除浮动的方法四：

在这里插入图片描述

（八）、相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位

在这里插入图片描述

位置词描述：值可以是负数，即往规定方向相反移动

在这里插入图片描述

相对定位的性质：相对定位的元素，会在老家留坑，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面元素产生任何影响。

（九）、相对定位的用途

  • 相对定位用来微调元素位置

  • 相对定位的元素，可以当做绝对定位的参考盒子

在这里插入图片描述

在这里插入图片描述

（十）、绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

在这里插入图片描述

绝对定位的位置描述词

在这里插入图片描述

绝对定位的元素脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基点

  • 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

堆叠顺序 z-index属性

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（十一）、绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

脱离标准文档流的方法：浮动、绝对定位、固定

定位

（十二）、绝对定位的用途

  • 绝对定位用来制作压盖、遮罩的效果

  • 绝对定位用来结合CSS精灵使用

  • 绝对定位可以结合JS实现动画

在这里插入图片描述

Document

<

>

    • （十一）、固定定位

      固定定位：不管页面如何滚动、他都永远固定在那里

      固定定位脱离标准文档流

      在这里插入图片描述

      固定定位的用途：“返回顶部”、“楼层导航”

      Document

      在这里插入图片描述

      （七）、边框与圆角

      （一）、border属性的三要素

      在这里插入图片描述

      （二）、线型

      在这里插入图片描述

      Document

      在这里插入图片描述

      （三）、边框的三要素小属性

      在这里插入图片描述

      （四）、四个方向的边框

      在这里插入图片描述

      （五）、四个方向边框的三要素小属性

      在这里插入图片描述

      （六）、去掉边框

      border-left：none；属性可以去掉左边框，以此类推

      （七）、利用边框制作三角形

      在这里插入图片描述

      在这里插入图片描述

      （八）、圆角

      border-radius属性的值通常为px单位，表示圆角的半径

      border-radius:10px

      在这里插入图片描述

      单独设置四个圆角

      在这里插入图片描述

      在这里插入图片描述

      圆角也可以用百分比为单位

      border-radius属性的值也可以用百分比为单位，表示圆角起始于每条边的哪里

      在这里插入图片描述

      （九）、盒子阴影—box-shadow属性

      在这里插入图片描述

      在这里插入图片描述

      阴影延展

      在这里插入图片描述

      在这里插入图片描述

      内阴影

      在这里插入图片描述

      在这里插入图片描述

      多阴影

      在这里插入图片描述

      box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;

      在这里插入图片描述

      （十）、 过渡

      transition过渡属性是CSS3浓妆重彩的特性，过渡可以为一个元素在不同样式之间变化添加自动补间动画

      在这里插入图片描述

      在这里插入图片描述

      在这里插入图片描述

      哪些属性可以参与过渡

      • 背景颜色和文字颜色都可以被过渡

      • 所有变形（包括2D和3D）都能被过渡

      • 所有数值类型的属性，都可以参与过渡，比如width，height，left，top，border-radius

      过渡的四个小属性

      在这里插入图片描述

      缓动参数

      transition的第三个属性就是缓动参数，也就是变化速度曲线

      在这里插入图片描述

      （十一）、贝塞尔曲线

      官网： https://cubic-bezier.com/

      在这里插入图片描述

      在这里插入图片描述

      Document
      • 北京的故宫
      • 十七孔桥
      • 国家大剧院

        在这里插入图片描述

        （十二）、背景固定— background-attachment

        background-attachment属性决定着背景图像的位置是在视口内固定，还是随着包含它的区块滚动

        在这里插入图片描述

        在这里插入图片描述

        在这里插入图片描述

        （十二）— background-position属性

        在这里插入图片描述

        在这里插入图片描述

        在这里插入图片描述
        自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

        深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

        因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

        img

        既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

        由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

        如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

        最后

        给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。


        0eae0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb,size_15,color_FFFFFF,t_70,g_se,x_16)

        在这里插入图片描述

        在这里插入图片描述

        （十二）— background-position属性

        在这里插入图片描述

        在这里插入图片描述

        在这里插入图片描述
        自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

        深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

        因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

        [外链图片转存中…(img-HVz3klSw-1713107793724)]

        [外链图片转存中…(img-h302bZiT-1713107793725)]

        既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

        [外链图片转存中…(img-eE9tLech-1713107793725)]

        由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

        如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

        最后

        给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。

        [外链图片转存中…(img-9KZnMvIC-1713107793725)]
        [外链图片转存中…(img-fwZF5W2C-1713107793725)]

      【家政平台开发(51)】家政平台上线攻略：域名解析与网站上线全流程
      邓邓子的博客
      04-16 379
      本文为 “家政平台开发” 专栏的第五十一篇，聚焦家政平台部署发布阶段的域名解析与网站上线流程。开篇介绍域名注册流程与平台选择，分享域名命名策略及品牌保护要点。接着深入讲解 DNS 服务器选择与配置、各类域名解析记录设置，还提供解析故障排查与优化技巧。最后阐述网站上线前的内容功能检查、上线流程与应急预案制定，以及上线后的持续监测与优化。旨在为家政平台开发人员提供详尽的实操指南，助力平台平稳上线与后续良好运营。
      近 20 人爆肝数周，写给初中级前端的万字高级进阶指南
      yck199的博客
      10-13 3499
      因为微信公众号不支持打开外链，所以有兴趣获取资料的读者朋友可以公众号发送「资料」关键字或者打开 Github 链接（https://github.com/KieSun/all-of-fro...
      css字体
      莉莉的博客
      10-31 1027
      css 字体引用
      CSS常用技巧
      Crayonxin2000的博客
      02-28 1062
      css3的技巧
      如何在项目中引入字体库（如阿里巴巴普惠体）
      qq_36821274的博客
      06-23 9701
      如何在项目中引入字体库（如阿里巴巴普惠体）
      Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体
      醒途
      05-19 1842
      一、vue create yoye-front 创建项目 二、引入 normalize.css 安装 npm install normalize.css -S ”main.ts“ 引入 import 'normalize.css' 三、引入 flexible 适配 PC 将下面文件放入”src/utils/”，该文件是”lib-flexible”修改第72行“520”->”width”得来 flexible.js ”main.ts“ 引入，注意引入顺序，要放在 “normaliz
      【工具】AlibabaPuHuiTi 阿里巴巴 普惠体 字体windows安装
      chenghan_yang的博客
      04-22 8333
      阿里巴巴普惠体是商用免费的字体，项目上用到导出的功能，可以平替 “微软雅黑”。导出到pdf后，客户电脑虽然不需要安装这个字体，但是本地调试的时候可以安装一下。字体下载。
      高级Java软件工程师--个人简历模板.docx
      07-04
      根据提供的文档内容，可以看出这份文档实际上是一份混乱的文本，其中包含了高级Java软件工程师的简历模板与不相关的文学内容...通过以上知识点的梳理，可以为准备应聘高级Java软件工程师职位的人提供一定的指导和参考。
      英语四级单词
      热门推荐
      xxiyy0411的博客
      12-18 2万+
      // ==UserScript== // @name 背单词 // @description 边上网边刷英语四级单词 // @namespace Xiaomaxin // @version 1.31 // @author Xiaomaxin // @include * // @require http://cdn.bootcss.com
      家政服务小程序预约系统毕业设计源码
      通过以上知识点的梳理，我们可以了解到家政预约小程序开发项目是集技术实现、用户体验设计、商业策略和法律知识为一体的综合性工作。开发者不仅需要掌握编程和设计技术，还需对市场需求、法律法规有深入的了解。对于...
      阿里巴巴普惠体（完整版）
      08-14
      阿里巴巴普惠体完整版数据，官方数据完整整理，点击安装字体即可，项目中直接使用
      阿里巴巴普惠体最新版
      04-28
      为确保字体文件不被篡改，保障用户可以安全使用，请放心使用，最新版
      CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库
      王春燕的博客
      04-13 1702
      图标字体（iconfont） -在网页中经常需要使用一些图标，可以通过图片来引入图标，但图片本身比较大，也不灵活 -所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入 -这样我们就可以通过使用字体的形式来使用图标 图标库有很多，目前国内使用比较多的就是阿里巴巴图标矢量库，网址：https://www.iconfont.cn/ 以后学习框架的时候，会知道框架里面也有很多的图标，可以直接使用，不过没有阿里巴巴...
      关于下载字体后找对应的字体名称
      木頭子
      03-27 432
      这两天弄单据打印 然后找了点免费商用实体 发现一些字体名称的坑，下载的文件名不是字体名称 中文名称也不是字体名称 建议就是对应的官网上找英文名称 然后尝试加上对应的版本 或 字体类型拼在字体名称后面。字体名称藏的有点细 介绍页面也没有具体写字体名称是什么 然后看到这里有个名称 试了试 还就是这个。对应的英文名称加上文字类型 如简体中文就是Source Han Sans CN。链式书写优雅、舒服 跟写网页差不多 会点网页结构的知识直接上手。（字体名称：Source Han Sans CN）
      CSS学习笔记 02、文字属性与继承性
      每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
      05-06 822
      文章目录前言一、文本与字体属性1.1、文本样式属性1.2、字体样式(font-xxx)常用样式使用开源字体(阿里巴巴普惠体)①线上方式②本地方式(建议)二、继承性2.1、具有继承性的相关属性2.2、继承性—就近原则 前言 本篇博客是关于CSS的文字属性与继承性，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 一、文本与字体属性 1、常用文本样式属性 2、字体属性详解 3、段落和行相关属性 4、继承性 1.1、文本样式属性 文档内文字元素 color：单词、RGB十六
      保姆级教程 CSS 知识点梳理大全，超详细！，妈妈再也不用担心我的面试
      m0_60452134的博客
      03-21 908
      （一）、标签选择器标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅标签选择器的覆盖面非常大，所以通常用于标签的初始化（二）、id选择器标签可以有id属性，它是这个标签的唯一标识id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母同一个页面上不能有相同的id标签CSS选择器可以使用#井号选择指定的id标签（三）、类选择器。
      font-familly：' 阿里巴巴-普惠体 '【永久免费 】 - 下载与使用
      草巾冒小子的博客
      10-10 2412
      入哪里找？ font-familly：' 阿里巴巴-普惠体 ' - 下载与使用 【官方称 永久免费 】 上图官网： https://www.iconfont.cn/ 阿里官方demo地址： 点击地址1 · 查看详情 如何使用和下载？ 可以选择使用官方地址自行学习下载; 也可以通过本文提供的（总结性资源，含文件说明，效果图、视频教程、文件内含字体文件、线上调用代码、demo.html...
      小程序引用第三方字体（阿里巴巴普惠体）
      weixin_47124112的博客
      10-25 4744
      有两个必填的参数，见上图，其中第一个必填参数用于给字体起名字，第二个必填参数为字体的url地址，这里建议使用。该方式比较简洁，但加载速度略慢，上代码。第二种方式（直接放入wxss）阿里巴巴普惠体2.0。
      超详细保姆级教程：AnythingLLM搭配Deepseek
      最新发布
      02-11
      ### 超详细教程：AnythingLLM 搭配 Deepseek 使用指南 #### 准备环境 为了确保能够顺利使用 AnythingLLM 和 Deepseek 构建个人知识库，需先确认计算机已安装必要的依赖项。通常情况下，这涉及到 Python 环境以及 Git 的配置。 #### 下载并启动 Deepseek 大模型 通过 CMD 命令行工具来获取指定版本的 Deepseek 模型，并立即执行该模型。具体操作是在命令提示符下键入 `ollama run deepseek-r1:7b` 来实现自动化安装过程[^2]。 ```bash ollama run deepseek-r1:7b ``` 此指令不仅会下载所需的 Deepseek 模型文件，还会初始化其运行环境以便后续调用。 #### 配置 AnythingLLM 接口 为了让 AnythingLLM 正确识别并与 Deepseek 进行交互，可能需要调整一些参数设置或编写特定脚本来定义两者之间的通信协议。这部分的具体实施取决于所选框架的支持程度和个人需求偏好。 考虑到数据隐私的重要性，采用离线方式部署 DeepSeek R1 可有效减少外部风险，同时允许更灵活的应用场景设计[^3]。 #### 测试连接与功能验证 一旦完成了上述准备工作，则可以通过简单的查询请求测试整个系统的连通性和响应效率。例如向系统提交一个问题或者一段文本片段，观察返回的结果是否符合预期。 对于希望进一步优化性能或是探索更多高级特性的用户来说，深入研究官方文档和技术社区中的案例分享将是不可或缺的学习途径之一。
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

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

      抵扣说明：

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

      余额充值