css概述
css简介
css，也就是层叠样式表，是网页中常用的html，css，javascript，最重要的三部分之一
html已经完成了网页的内容和结构，为什么还需要css呢？事实上，在比较早的时候，人们对于网页的要求没有那么高，在html中就可以完成页面的结构和样式了，但是随着网页的不断发展，在html中同时完成网页的结构和样式的行为就渐渐的不再适宜了，主要原因在于，页面的样式写在了html里面，分散而混乱，没有一个整体的规划，修改起来也很不方便
因此，页面的结构和样式就分离了，成为了html和css两个部分，css就负责页面的样式，也就是页面的美观。也可以简单理解为，css就是让页面变得更好看的，可以使文字变大，变小，变漂亮
当然，早期的css确实也主要只做页面样式。但是随着flash的淘汰，以及javascript做动画的性能不高，主要在css3以后，css又增加了一个主要的功能，也就是只做动画。比如说页面等待时会出现的转圈圈的图标，有的时候会遇到的大风车等等，现在也是由css制作的
css的使用
使用css是很简单的，首先选择一个标签，然后为其设置属性即可，比如说，我们有以下的一个简单的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>css测试页面</title>
</head>
<body>
<h1>这是一个h1标题</h1>
</body>
</html>我们希望改变其中页面标题，也就是h1的样式，那么只要这样做即可，其中，在css里，注释使用/* */，这一点和html也很不一样
<style type="text/css">
h1{
color: red; /* 设置字体颜色 */
font-size: 30px; /* 设置字体的大小 */
text-align: center; /* 设置文字居中显示 */
background-color: springgreen; /* 设置背景颜色 */
padding: 20px 0px; /* 设置内部填充 */
}
h1:hover{ /* 设置鼠标悬浮样式 */
color: gold;
font-size: 50px;
background-color: violet;
}
</style>如此简单设置以后，就可以看到一个很基础的页面效果了
css的引入方式
css可以在html的页面中直接使用，例如在head部分，加上style标签以后，就可以使用css了
当然，这种内嵌式的css很少会在比较大的网站，或者具有一定规模的网站上出现，一般都是通过link标签引入写好的css文件的
css文件一般的后缀名就是css，因此如果在请求中看到了.css的文件，我们基本上就可以确定，这是引入了一个样式文件
css对于爬虫的意义
本系列是爬虫攻略，自然不是主要用来介绍如何写css样式的，那么还是回到我们的最关心的问题。既然css是做页面样式的，那么它对于爬虫来说有什么意义呢？我们需要关心页面样式吗？
当然，通常意义上来说，css对于爬虫意义不大，一般不需要关注css的样式，这一点确实没错。不过css并非是对于爬虫没有用的。比如说，css选择器的使用，对于数据提取就是有意义的
除此之外，现在很多的页面反爬，也会用到css，比如说，在css中设置字体，使得html中全都是看不懂的文字，但是在浏览器的页面上就可以正常显示，再比如说，通过css将某些链接标签设置为了隐藏，在正常的页面中是看不到这些标签内容的，只有不正常的爬虫程序，才会在批量提取的时候，把这些隐藏标签提取出来，这样一点击，就会出现问题。当然，css反爬的内容十分复杂，并非本文的重点
总而言之，css虽然一般来说不是爬虫主要关注的内容，但是并非是没有作用的。尤其是css的选择器，是应该要掌握的内容
css选择器
基本选择器
最常用的选择器，也就是标签选择器，id选择器和类选择器，是必须要会使用的
类选择器使用.作为开头
<!-- 像这样一个class，我们应该使用的选择器是.content -->
<div class="content">这是一个普通无奇的div标签</div>id选择器使用#作为开头
<!-- 像这样一个id，我们应该使用的选择器是#content -->
<div id="content">这是一个普通无奇的div标签</div>标签选择器直接使用标签名即可
<!-- 像这样一个div标签，我们应该使用的选择器是div -->
<div id="content" class="content">这是一个普通无奇的div标签</div>如果要选择全部，使用*即可
层级选择器
逗号和空格是不同的，这一点一定要注意区别，具体例子如下
<!-- 如果我们使用div, p，表示我们同时选中div标签和p标签 -->
<div id="content" class="content">这是一个普通无奇的div标签</div>
<p id="content" class="content">这是一个普通无奇的p标签</p>如果使用空格的话，代表的是当前层次中的下一层，或者说嵌套在内部的那一层
<!-- 如果我们使用div p，表示我们选中的是div中的p标签 -->
<div id="content" class="content">
<p>这是一个在div内部的p标签</p>
</div>其他选择器
如果使用>，代表父节点是某个标签的标签，比如说div>p，这个选择器表示所有父节点是div标签的p标签
如果使用+，代表紧邻某个标签的标签，比如说div+p，这个选择器表示的是紧跟在div之后的所有p标签
如果使用[]，代表存在某个属性的标签，比如说[href]，这个选择器就表示所有有href属性的标签
如果使用[a=b]，代表某个属性是某个值的标签，比如说[href=index]，这个选择器就表示所有href属性为index的标签
如果使用[a~=b]，代表某个属性中有某个值的标签，比如说[href~=index]，这个选择器就表示所有href属性中有index的标签
css的选择器还有很多，当然很多选择器在爬虫中并不常用，因此在这里就不特别描述了。如果你有这方面的需求，可以查看css选择的文档，比如说查看菜鸟教程
css总结
css作为web页面的样式，自然是非常重要的存在。无论是文本，图片的属性样式的设置，css盒子模型的布局，伪类和伪元素的选择器，或者是css的动画，变形的制作，在web前端之中，都是极其重要的部分，是绝对不可以忽视的
当然，如同我们之前分析的那样，css对于爬虫的意义，相对而言就没有那么大了，至少对于爬虫来说，如果你没有学过css的话，并没有必要花很大力气去学习如何使用css设置样式，进行盒子布局等等
当然，我们之前也分析了，由于近些年反爬力度的提高，使用css进行反爬也比以前更多了，而恰恰由于很多爬虫程序员对于css的知识的不了解，在面对css反爬上，没什么好的办法，这也是事实
所以，最终，我的结论是，如果你觉得自己需要用到css的话，那么就有必要再专门进行一些学习。如果你并非专业人士，只是爬虫入门的话，那么对于css只需要进行简单的了解，学会基本的选择器就可以了，不需要现在就在这个方面上投入更多的时间学习了
查看更多python爬虫攻略，请点击这里
更多推荐
【爬虫攻略】爬虫所需的css基础
发布评论