Python爬虫(3)网页信息

Python爬虫（3）认识CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名.css的外部样式单文档中

详细的CSS教程，点开前几个了解个大概就行。
https://www.w3school.com.cn/css/index.asp

本节简单聊聊CSS。预计10min。

---

---

前言

打个比方，HTML是素颜，CSS就是化妆。

要一层层的化妆，补水啊，护肤啦，遮暇啦，也就七八层吧。
每层实现的妆容效果自然是不一样的。比如粉底全脸都要，高光是最后的两三层，然后只是局部吧。。。
CSS和这个如出一辙，结构自然是HTML的结构，你肯定要按照脸去化妆是不是？然后也是由整体到局部。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS的直观认识

CSS是绑定在HTML元素上的。没有对应元素的CSS是不会有效果的。

如何找到一个网站的CSS

我们以上一讲的网页为例
https://blog.csdn.net/qq_34786604/article/details/126551361?spm=1001.2014.3001.5502

我们直接选择全部的body
我们发现右边的栏里面有样式的字样，那没问题了这就是CSS了。不同的浏览器显示不一样，但是都不难找到样式
大部分点击HTML元素自动就打开了，没自动打开的右击元素，看看有没有样式或者style的字样。

总体说来，长得很像Python的字典，只不过使用；隔开。

字典前面的是需要作用到的要素。

注意：
1. 不同要素可以有一样的后面的字典，也就是样式配置单。
2. 同一个元素可以有多个样式单。重复的，我记得后面的会覆盖前面的。

同志们想过为啥没有？

第一点很正常啊，不同的元素分享同样的style，这样style是不是就复用了呢？

第二点则是前端的一个槽点。前端很累，没啥技术含量，就是因为CSS的功劳。就是累代码。。。
所以这个时候程序员大部分都很像复制同类或者相似网站的配色啦，效果之类的。不同的地方，下面再写东西覆盖。
当然也有一部分原因是为了继承。。。

网站全部的CSS可以点击样式编辑器。或者自己找网站传过来的所有的css文件。我是不会看的，多的要命！！！
看看整体网页用到的CSS，累死人，有没有。。。
所以说学前端要慎重，你不加班是不可能的。。。

二、CSS的组成

1.选择器

我更喜欢成为元素域。
标志了后面的规则作用后到的集合。往往不是一个。因为相同style的元素是很多的。
往往同一层次，同一目的的元素都是同样的style。比如标题的格式。。。

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

常用的是简单选择器、属性选择器。

具体的的CSS选择器内容我会单独拆开来作为一节来讲。因为十分重要

2.属性

属性里面的键和值不是随意的，是有共有标准的。虽然还是各有差异。但是总体上大同小异。
前端的又一个坑爹的点。。

看看就好

大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)

行高 line-height:normal;(正常) 单位：PX、PD、EM

粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常)

色彩background-color:#FFFFFF;

图片background-image:url();

重复background-repeat:no-repeat;

滚动background-attachment:fixed;(固定) scroll;(滚动)

字间距letter-spacing:normal; 数值

对齐text-align:justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进text-indent: 数值px;

垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;

词间距word-spacing:normal; 数值

没啥作用，混个眼熟。然后后面才知道用哪些东西定位呢！！！

---

三、总结

CSS最为基础的部分是格式的修改，一般是字体的属性，元素的各个颜色，等等

中级的部分是CSS选择器。

高级的部分其实CSS可以画出图形和动画，但是对于我们用不到，也基本是复制粘贴现有的动画效果之类。
我记得有个机器人的还挺酷炫。

请大家思考一个问题：CSS在不同的浏览器解析的时候有差异，不同的CSS版本也有小差异，是不是有点麻烦？

肯定是麻烦的，所以一般CSS只会最一些基础的，共有的美化布局操作。
高级的部分留给了JavaScript。所以我们看到越来越多的css.js结尾的文件。
这样统一性就会提高！！！

下一讲CSS的选择器中级部分。