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

最新推荐文章于 2024-05-07 10:59:40 发布
最新推荐文章于 2024-05-07 10:59:40 发布
阅读量348 收藏 6
点赞数 5
分类专栏： 程序员 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83916283/article/details/137133729
版权
  • 在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式

请添加图片描述

在这里插入图片描述

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

好好学习 天天向上

在这里插入图片描述

（五）、复合选择器

在这里插入图片描述

后代选择器

在这里插入图片描述

在这里插入图片描述

交集选择器

在这里插入图片描述

并集选择器

并集选择器也叫做分组选择器，逗号表示分组

在这里插入图片描述

（六）、伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态

在这里插入图片描述

a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题

在这里插入图片描述

百度

京东

淘宝

慕课

![在这里插入图片描述](https://img-blog.csdnimg.cn/866c6e88022c4c288f3ee78a8b74c6e0.png?x-oss-process=image/watermark,type_ZHJ

（七）、元素关系选择器

在这里插入图片描述

（七）、子选择器

当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

在这里插入图片描述

在这里插入图片描述

（八）、相邻兄弟选择器

  • 相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

  • 说白了，a+b就是选择紧跟在a后面的一个b

请添加图片描述

(九）、通用兄弟选择器（~）

通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素请添加图片描述

（十）、序号选择器

（十一）、：first-child

first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p

在这里插入图片描述

(十二)、：last-child

：last-child表示选择最后一个子元素，比如下面的例子

在这里插入图片描述

（十二）、： nth-child()

： nth-child()可以选择任意序号的子元素

在这里插入图片描述

：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

在这里插入图片描述

（十三）、序号选择器的兼容性

在这里插入图片描述

（十四）、属性选择器

在这里插入图片描述

在这里插入图片描述

Document 北京故宫 北京鸟巢 北京十七孔桥 参赛作品-无锡体育场 手机拍摄 无锡太湖 无锡美景 无锡夜景

在这里插入图片描述

（十五）、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
    2401_83916283
    关注
    • 5
      点赞
    • 踩
    • 6
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    DFS与BFS保姆级教学!!超级详细.txt
    05-06
    DFS与BFS保姆级教学!!超级详细
    Python 的环境搭建安装保姆级教程（超详细）
    01-14
    Python 的环境搭建安装教程
    CSS笔记汇总-最全最仔细（会时刻更新）
    小女不才
    09-21 1104
    样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页 ，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ，多个块级盒子水平显示就用浮动布局。定位。
    2024年最全保姆级教程 CSS 知识点梳理大全，超详细！！！，2024最新前端面试笔试
    2301_79985012的博客
    05-07 297
    打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader（七）、元素关系选择器（七）、子选择器当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系（八）、相邻兄弟选择器。
    保姆级教程 CSS 知识点梳理大全，超详细！！！，web开发入门
    2401_84091993的博客
    04-05 644
    技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。（十二）— background-position属性。
    保姆级教程 CSS 知识点梳理大全，超详细！，妈妈再也不用担心我的面试
    m0_60452134的博客
    03-21 395
    （一）、标签选择器标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅标签选择器的覆盖面非常大，所以通常用于标签的初始化（二）、id选择器标签可以有id属性，它是这个标签的唯一标识id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母同一个页面上不能有相同的id标签CSS选择器可以使用#井号选择指定的id标签（三）、类选择器。
    微信小程序开发（超详细保姆式教程）上
    于高山之巅，方见大河奔涌；于群峰之上，更觉长风浩荡。
    01-19 1145
    rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位。使用 WXSS 提供的@import语法，可以导入外联的样式表。tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。底部 tabBar顶部 tabBartabBar 中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：①、 链接上拉触底。
    怒肝最新保姆级前端学习路线，速成贴心全面！
    努力做最接地气的编程干货分享，感谢关注
    06-07 2万+
    这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。 大家好，我是鱼皮，肝了几天终于完成了这份保姆级前端学习路线。 ???? + ???? = ???????? 先放一张图： 是不是有点儿长，感觉要被劝退了？不过不用担心，为了帮助大家更轻松地了解前端知识体系，我对这份路线撒了点 糖 ~ 建议大家观看 B 站视频讲解，会清晰很多~ 地址：https://www.bilibili.com/video/BV1nh411e7oG/ 在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线
    Java面试八股文 很详细了！！！
    不去想做的结果，只在乎自己有没有认真做。之后就是方法，选择，胆识。人生无几载，追风赶月莫停留。
    03-23 984
    Java面试八股文，很全面了！
    前端面试必备知识点总结(持续更新)
    Laollaoaolao的博客
    03-08 4963
    这篇博客是对前端面试所必须掌握的知识点的总结,并且这篇博客正在持续更新中… 1.JavaScript 基础 1.执行上下文/作用域/闭包 1.什么是执行上下文? 执行上下文是评估和执行JavaScript代码环境的抽象概念。每当JavaScript代码在运行时，他都是在执行上下文中运行。 执行上下文的类型 JavaScript共有三种执行上下文类型 全局执行上下文 这是基础的上下文,任何不在函数内部的代码都在全局上下文中.他会执行两件事:创建一个全局的window对象(浏览器环境的情况下),并且设
    2023闲鱼无货源超详细保姆级教程-视频教程网盘链接提取码下载.txt
    12-18
    本课程将深入探讨2023年闲鱼无货源情况，为您提供超详细的解决方案。我们将详细介绍如何寻找替代货源、建立稳定的供应链以及利用社交媒体拓展...这是一份保姆级的教程，确保您能迅速适应并获得成功。 视频大小：772M
    vscode远程连接保姆级教程！！一学就会
    10-28
    有时候我们用minipc不方便修改代码，一个是性能不好容易卡顿，还有就是很麻烦！还要连一堆乱七八糟的线。然而vscode远程连接就能很好的解决这个问题，相对于ssh和文件管理器连接相对更加优雅一些，连接也很简洁，不...
    最强音乐类 AI-Suno 快速入门手册！（保姆级教程）
    04-24
    最强音乐类 AI——Suno 快速入门手册！（保姆级教程）
    Mysql超详细安装配置教程(保姆级).md
    最新发布
    06-03
    ### MySQL超详细安装配置教程（保姆级） #### 1. 下载MySQL安装包 - **访问官网**：打开MySQL官方网站（https://dev.mysql.com/downloads/mysql/）。 - **选择版本**：在下载页面，选择适合你操作系统的MySQL版本。...
    谷粒商城基础篇（保姆级总结）
    热门推荐
    唐尧的博客
    10-24 2万+
    谷粒商城基础篇 文章目录谷粒商城基础篇项目相关基础知识介绍微服务架构图和项目描述**微服务划分图**Vrgrantsystemctl命令配置环境Docker自启动命令下载mysql5.7检查所有镜像配置git创建仓库创建其他微服务安装10.15.1node.js,逆向工程Spring Cloud Alibabanacos作为注册中心Fegin声明式远程调用如何使用nacos作为配置中心统一管理配置nacos核心加载多配置集GateWay网关前端基础Vuevue模块化开发三级分类开发配置网关路由与位置重写配置
    CSS的保姆级基础知识
    09-28
    CSS的保姆级基础知识
    MySQL安装配置教程（超级详细、保姆级）.pdf
    01-09
    MySQL安装配置教程（超级详细、保姆级） MySQL安装配置教程（超级详细、保姆级） 二、 安装MySQL 1. 选择设置类型 双击运行mysql-installer-community-5.7.31.0.msi，这里选择是自定义安装，所以直接选择“Custom”...
    vue3 tailwindcss使用保姆级教程
    05-25
    Vue3 和 Tailwindcss 都是现代化的前端技术，它们的结合可以让开发者更加高效地开发出优雅、精美的 UI 界面。下面是一份保姆级教程，帮助您快速上手 Vue3 和 Tailwindcss。 ## 1. 安装 Vue3 在使用 Vue3 之前，我们需要先安装 Vue3。 可以通过以下命令来安装最新版本的 Vue3： ```bash npm install vue@next ``` ## 2. 创建 Vue3 项目 在安装完 Vue3 之后，我们需要通过 Vue3 CLI 创建一个新的项目。在命令行中输入以下命令： ```bash vue create my-project ``` 这个命令将创建一个名为 `my-project` 的新项目，并自动安装所需的依赖项。 ## 3. 安装 Tailwindcss 接下来，我们需要安装 Tailwindcss。可以通过以下命令安装： ```bash npm install tailwindcss ``` ## 4. 配置 Tailwindcss 安装好 Tailwindcss 之后，我们需要进行一些配置才能在 Vue3 项目中使用。 首先，我们需要在项目的根目录下创建一个 `tailwind.config.js` 文件，用于配置 Tailwindcss。可以使用以下命令创建： ```bash npx tailwindcss init ``` 然后，打开 `tailwind.config.js` 文件，找到并修改以下配置： ```js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [], } ``` 将 `purge` 字段设置为 `['./src/**/*.{js,jsx,ts,tsx,vue}']`，用于在构建时删除未使用的样式。这个配置可以有效减小最终构建的文件大小。 ```js module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx,vue}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [], } ``` ## 5. 集成 Tailwindcss 到 Vue3 项目中 接下来，我们需要将 Tailwindcss 集成到 Vue3 项目中。 打开 `main.js` 文件，添加以下代码： ```js import { createApp } from 'vue' import App from './App.vue' import './index.css' createApp(App).mount('#app') ``` 这段代码将 `index.css` 文件导入到 Vue3 项目中。 然后，我们需要在 `index.css` 文件中导入 Tailwindcss 样式。可以使用以下命令将样式导入到 `index.css` 文件中： ```bash npx tailwindcss-cli@latest build -o ./src/index.css ``` 这个命令将会在 `./src/index.css` 文件中生成所有的 Tailwindcss 样式。 最后，我们需要在 `App.vue` 文件中使用 Tailwindcss 样式。打开 `App.vue` 文件，修改 `<template>` 标签中的内容： ```html <template> <div class="bg-gray-100 p-4"> <h1 class="text-2xl font-bold mb-4">Hello World!</h1> <p class="text-gray-600">This is a Vue3 project with Tailwindcss.</p> </div> </template> ``` 这个修改将会在页面中显示一个灰色背景，一个标题和一段文字。 ## 6. 运行 Vue3 项目 现在，我们已经完成了 Vue3 和 Tailwindcss 的集成。可以通过以下命令来启动 Vue3 项目： ```bash npm run serve ``` 然后打开浏览器，访问 `http://localhost:8080/`，就可以看到页面中显示的内容了。 至此，我们已经完成了 Vue3 和 Tailwindcss 的集成。希望这份保姆级教程能够帮助您快速上手 Vue3 和 Tailwindcss。

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

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

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值