后端也得会的两万字CSS技术【建议收藏】(上篇)

语言: CN / TW / HK
ead>

theme: channing-cyan

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

❤️CSS必备知识详解❤️

👻上两篇博文保姆级教程HTML两万字笔记大总结【建议收藏】(上篇)保姆级教程HTML两万字笔记大总结【建议收藏】(下篇)被众多小伙伴们阅读之后,很多小伙伴私信我——催我出CSS和JavaScript的版本\~👻

😬(苦笑)既然小伙伴们学习热情那么强烈,那我怎么着也不能辜负了你们!所以本博主又连夜苦肝,苦苦熬制出了CSS版本的(篇幅过长,依旧分为上下两篇:上篇是基础,下篇是进阶\~)😬

😜在这两篇博文中,本博主就带领小伙伴们认真地学习一下CSS(Cascading Style Sheets,翻译:层叠(级联)样式表)相关的必备知识——如果说我们上两篇讲的HTML是网页的结构,那么CSS就是网页化妆师。😜

请添加图片描述


重点来啦!重点来啦!!💗💗💗

小伙伴们,快拿出你们的笔记本,开始上课啦!(要打起十足的精神哦\~)


第一部分:CSS的基本使用

(1)CSS是什么?

CSS全称Cascading Style Sheets,翻译:层叠(级联)样式表。\ 如果说HTML是网页的结构,那么CSS就是网页化妆师。

(2)CSS写在哪里?

CSS有三种写法:

  1. 直接写在标签内
  2. 写在style标签内
  3. 使用外部.css文件

(对应CSS的三种写法,就有三种引入CSS的方式,见下:)

(3)CSS的三大引入方式:

1.直接写在标签内(直接在标签内设置)

```python

CSS的引入方式1

我是段落标签

```

小知识点:

在设置属性color属性时,如下图操作,可以对颜色进行更加直观详细的选择:\ 在这里插入图片描述

2.写在style标签内(在< head > 标签内加入< style >标签进行设置)

```python

CSS的引入方式2

我是段落标签

```

3.使用外部.css文件设置css文本,如1.css

第一种:用@import "1.css"将css文件引入;

第二种:通过< link >将css文件引入。

本处用的1.css文件内容:\ 在这里插入图片描述

```python

CSS的引入方式3

<!--第一种:链接式(建议使用)-->
<!--rel属性(relation)是当前这个HTML页面与链接进来的样式表之间的关系,在此链接进来的是本页面的样式表
    href属性写样式表的路径-->
<link rel="stylesheet" href="1.css">

<!--第二种:导入式(不建议使用)-->
<style>
    @import "1.css";
</style>

可通过——>关注本人运营 **公众号**———【孤寒者】 公众号后台回复【CSS上篇】,可得本文所有代码压缩包~

我是段落标签2

```

小知识点:

@import导入式不推荐使用,因为存在缺陷:在整个网页装载完之后再装载.CSS文件,如果网页文件过大时,会导致先出现无样式的页面,闪烁以后再出现样式网页。\ 而推荐使用< link >,因为它是先装载.css文件,再装载网页

总结—上述三种引入方式的异同:

```powershell 在实际开发中我们不使用行内样式! 使用最多的是外部样式。

一般写demo的时候使用内部样式————因为给别人发demo的时候,只发一个文件即可。

无论是外部样式,内部样式还是行内样式,都会生效,它们共同为标签添加样式。

如果一个标签通过外部样式,内部样式设置了同一类样式(值不同),会产生覆盖效果————覆盖的原则:后写的样式覆盖先写的样式! ```

第二部分:选择器

(1)选择器权重:

现实生活中—谁的权利大,就听谁的,同理,选择器权重也是一样,谁的权重值高,应用谁的。这里的权重高低通过精确度评判,精确度越高,权重越大。

(2)选择器的用处:

用于准确的选中元素(就是HTML种讲的标签),并赋予样式。

1.标签选择器:

| 作用:根据标签的名字找到标签; | | --------------- |

| 注意:它会找到所有的同名标签。 | | --------------- |

```html

标签选择器

<style>
    /*标签选择器。直接把页面中的标签当做一个选择器进行选择*/
    p{
        color: chartreuse;

    }
</style>

我是段落标签1

我是段落标签2

```

注意:

你可以理解为下图这个整体叫做选择器!!!\ 在这里插入图片描述

2.类选择器(class选择器)

| 通过标签的class属性,选择对应的元素,借助了一个类的概念,一处定义,可以多处使用。 | | ------------------------------------------- |

| 使用场景:它的作用对多个标签(往往需要相同的样式)设置样式。 | | ------------------------------ |

| 一个标签可以设置多个class值,值与值之间用空格隔开,这个标签会具有所有class包含的样式。 | | ------------------------------------------------ |

```html

类选择器

<style>
    /*类选择器,也称class选择器。通过.进行选择*/
    .p1{
        color:red;
    }
</style>

我是段落标签

```

小tip:

类选择器可以选择多个,因为class属性不唯一;\ 但是id选择器只能选择一个,因为id是唯一的。

3.id选择器

| 通过标签的id属性,选择对应的元素。 | | ------------------ |

```html

id选择器

<style>
     /*第三种选择器:id选择器  通过#进行选择*/
    #p2{
        color:cadetblue;
    }
</style>

我是段落标签

```

小tip:

以上三个选择器的权重: id选择器 > 类选择器 >标签选择器

拓展:如果一个标签同时通过id选择器和类选择器设置了同一个样式,而我们想要其类选择器设置的样式(background-color)生效,但是看上面选择器权重——类选择器的权重是低于id选择器的,应该是id选择器设置的样式生效。但是我们可以通过在指定样式后添加!import来使其生效!!!

!important是权重最大的!!!\ 注意:!important只能作用于单个样式的值,它不是选择器!\ 在这里插入图片描述

4.群组选择器

| 群组选择器是可以同时选择多个标签的选择器。 | | --------------------- |

```html

群组选择器

<style>
    /*第四种选择器:群组选择器  不同选择器之间用逗号隔开。*/
    p,span{
        color: #ff82c1;
    }
</style>

我是段落标签

我是文本标签

我是一级标签

```

5.全选择器

| 顾名思义,选择所有标签! | | ------------ |

```python

全选择器

<style>
    /*第五种选择器:全选择器 通过*选择此页面的所有元素,进行统一的样式设置*/
    *{
        color: #a3ff50
    }
</style>

我是段落标签

我是一级标题

我是二级标签

我是文本标签

```

6.层次选择器(分为后代,子代,相邻和兄弟四种选择器)

注       意:块状标签可以嵌套内联标签和其他块状标签;内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。\ 有个特例:p标签和h标签不能嵌套块状标签,也不能嵌套本身,只能嵌套内联标签!!!

(1)后代选择器

```html

后代选择器

<style>
    /*层次选择器第一种:后代选择器  用空格隔开*/
    /*后代是它里面嵌套的所有标签*/
    /*此例就是div标签里的所有的ol标签,不管ol里嵌套多少ol,都是div的后代*/
    div ol{
        list-style: none;
    }
</style>

  1. 我是有序列表1
  2. 我是有序列表2
  3. 我是有序列表3
    1. 我是有序列表111
    2. 我是有序列表222

```

(2)子代选择器(可以往里一层一层的选)

```html

子代选择器

<style>
    /*层次选择器第二种:子代选择器 用>隔开*/
    /*子代选择器只能选择他的儿子,在此就是选择id为ul1的无序列表的儿子*/
    /* 上述语法格式中的选择器可以是id选择器,class选择器也可以是标签名选择器 */
    #ul1>li{
        list-style: none;       /*这个属性作用是去除列表的样式,代表去掉无序列表前面的小圆圈*/
    }
</style>

  • 1
  • 2
  • 3
    • 11
    • 22
    • 33

```

(3)兄弟选择器

```html

兄弟选择器

<style>
    /*层次选择器第三种:兄弟选择器  用~进行选择*/
    /*只要是有同一个父亲的就称为兄弟*/
    /*在本例中,id为p2的父亲是body,所以body里都是他的兄弟
    又因为代码是从上向下执行的,所以不会选中  我是段落标签1*/
    #p2~p{
        color:#ff8971
    }
</style>

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

```

(4)相邻选择器(相邻兄弟选择器)

```python

相邻兄弟选择器

<style>
    /*层次选择器第四种:相邻选择器(相邻兄弟选择器)  用+进行选择*/
    /*先是找兄弟,然后选择其中相邻的*/
    /*在本例中,因为代码是从上向下执行的,所以不会选中  我是段落标签1*/
    #p2+p{
        color:#ff8971
    }
</style>

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

```

7.属性选择器

```python

可通过——>关注本人运营 公众号———【孤寒者】

公众号后台回复【CSS上篇】,可得本文所有代码压缩包~

属性选择器

<style>
    /*属性选择器  选中所有p标签里有name属性的   常用于Input里
       如果只想选中   我是段落标签1  ,那么就改为p[name="p1"]即可*/
    p[name]{
        color: red;
    }
</style>

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

```

选择器的一个使用总结:

权重大小比较总结一句话:越具体(就是一开始说的准确度)权重越大;越模糊权重越小!\ 在这里插入图片描述\ 在这里插入图片描述

8.伪类选择器

```python

伪类选择器

<!--伪类选择器-->
<!-- 语法格式——  选择器:伪类名 -->
<!-- 如果要给一个元素加4个伪类,一定要遵守一个顺序(link  visited  hover   active) -->
<style>
    /*未访问超链接时的样式    有超链接地址时(仅适用于a标签)*/
    a:link{
        color: #ff25ec;
    }
    /*鼠标悬浮时的样式     适用于所有标签*/
    a:hover{
        color: #3b29ff;
    }
    /*激活状态时,即点击的时候    适用于所有标签*/
    a:active{
        color: #ff9d47;

    }
    /* 访问过后,点击完超链接之后 (仅适用于a标签)*/
    a:visited{
        color:green;
    }
</style>

我是超链接

```

第三部分:常用的字体的样式

```html 可通过——>关注本人运营 公众号———【孤寒者】

公众号后台回复【CSS上篇】,可得本文所有代码压缩包~

字体的常用样式

我是段落标签

```

(本人运营微信公众号:孤寒者)

(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦\~)

第五部分:背景的常用样式

```html

背景的常用样式

```

(本人运营微信公众号:孤寒者)

(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦\~)

(2)渐变色之径向渐变

```html 可通过——>关注本人运营 公众号———【孤寒者】

公众号后台回复【CSS上篇】,可得本文所有代码压缩包~

渐变色之径向渐变

我是渐变的文字,我超级帅!

```

In The End!

在这里插入图片描述

| 从现在做起,坚持下去,一天进步一小点,不久的将来,你会感谢曾经努力的你! | | ------------------------------------ |

本博主会持续更新爬虫基础分栏及爬虫实战分栏(为了小伙伴们更好的进行页面解析,也会更新部分前端必备知识点博文!),认真仔细看完本文的小伙伴们,可以点赞收藏并评论出你们的读后感。并可关注本博主,在今后的日子里阅读更多爬虫文!

powershell 如有错误或者言语不恰当的地方可在评论区指出,谢谢! 如转载此文请联系我说明用以意并标注出处及本博主名,谢谢!