智慧的网络爬虫之CSS概述

最新推荐文章于 2024-09-17 19:26:23 发布
最新推荐文章于 2024-09-17 19:26:23 发布
阅读量1.3k 收藏 19
点赞数 20
分类专栏： Python-爬虫知识解析 文章标签： 爬虫 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiao_yue/article/details/140049012
版权

智慧的网络爬虫之CSS概述

​ CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式。如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式。

CSS样式

1. 行内样式

行内样式：直接定义在 HTML 标签的 style 属性中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--行内样式-->
    <p style="color: green;">段落</p>
    <p style="color: blueviolet;">段落</p>
    <p style="color: plum;">段落</p>
  </body>
</html>
2. 内嵌样式

在 HTML 头部（<head>标签内）的<style>标签中定义 CSS 样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: black;
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <p>第一段落</p>
    <p>第二段落</p>
    <span>一个span标签</span>
</div>
</body>
</html>
3. 外部样式

将 CSS 样式定义在一个 .css 格式的文件中，然后使用 HTML 的<link>标签将这个 .css 格式的样式文件应用到 HTML 文档中。

css文件

div{
    background: aquamarine;
}
p{
    color: red;
    background: black;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="d1.css">
</head>
<body>
<div>
    <p>这是第一段落</p>
    <p>这是第二段落</p>
    <span>这是一个span标签</span>
</div>
</body>
</html>

样式优先级

行内样式 > 内嵌样式 > 外部样式 注意：尽量不要在同一个Html文件中使用多种样式

  • 如果样式是固定并且不修改并且很少情况，使用内部样式
  • 如果样式针对当前html页面做的样式，并且代码量不是很大的的情况下， 使用内联样式
  • 如果样式是通用，且css代码很多，使用外部样式，需要创建一个css文件，引入。

CSS选择器

1. 通用选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距

通用选择器格式：*{}

* {
    margin: 0 auto;
    padding: 0;
}
2. 标签选择器

根据标签的名字 进行选择匹配

标签选择器格式：标签名{}

p{
	color: red
}
span{
	color: blue
}
3. ID选择器/类选择器

根据标签的ID属性或者class属性来匹配，ID选择器的定义需要用到#，后面紧跟ID属性值，类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值

ID选择器格式： #ID名{}
#d1{
	background: aquamarine;
}

类选择器格式：.类名{}
.c1{
	background: black;
}

<div>
    <span id="d1">ID选择器</span>
	<span class="c1">类选择器</span>
</div>
4. 层级选择器
  • 后代选择器
  • 子选择器
<div>
    <span id="d1">ID选择器</span><br>
	<span class="c1">类选择器</span><br>
    <a href="#"><span>这是一个超链接</span></a>
    <ul>
        <li><span>这是第一项</span></li>
        <li><span>这是第二项</span></li>
    </ul>
</div>

span标签是div标签的后代标签，a标签也是div的后代标签

后代选择器的格式： 父标签名 子标签名{}  通过父标签去定位找到子标签 能够匹配到div下面所有符合条件的标签
子代选择器的格式： 父标签 > 子标签{}  通过父标签去定位找到子标签 能够匹配到div下直系的子标签

后代选择器使用
div span{
	color: red
}

子代选择器使用
div > span{
	background: black;
}
5. 组合选择器

组合选择器可以将同样的样式应用到多个选择器中，每个选择器中用逗号隔开

<div>
    <span id="d1">ID选择器</span><br>
	<span class="c1">类选择器</span><br>
    <a href="#"><span>这是一个超链接</span></a>
    <ul>
        <li><span>这是第一项</span></li>
        <li><span>这是第二项</span></li>
    </ul>
</div>

样式代码
span,a{
	color:red
} /* 该样式将会运用在所有的span标签和a标签中  */

#d1,.c1{
	color:blue
} /* 该样式将会运用在所有id属性为d1,class属性为c1的标签中  */
6、伪类选择器

伪类选择器是一种特殊的选择器，可以用来选择处于特定状态的元素，例如未被访问的链接、已被访问的链接、鼠标悬停在上面的元素、活动元素和获得焦点的表单元素等

  • :link伪类选择器：选择所有未被访问的链接。
  • :visited伪类选择器：选择所有已被访问的链接。
  • :hover伪类选择器：选择鼠标悬停在上面的元素。
  • :active伪类选择器：选择活动元素，即鼠标按下未弹起的元素。
  • :focus伪类选择器：选择获得焦点的元素，一般是表单元素，如类。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span:hover{
            color: red;
        }

        a:link{
            color: red;
        }
        a:active{
            color: blue;
        }
        a:visited{
            color: yellow;
        }
        a{
            font-size: larger;
        }
    </style>
</head>
<body>
<div class="f">
    <div class="box1"><span>这是一个span标签</span></div>
    <div class="box2"><a href="#">这是一个链接</a></div>
</div>
</body>
</html>

CSS盒子模型

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin），CSS 为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

在这里插入图片描述

盒子的组成

  • 外边距：margin
  • 内边距：padding
  • 边框：border
  • 内容：content
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		div {
			background-color: lightgrey;
			width: 300px;
			border: 25px solid green;
			padding: 25px;
			margin: 25px;
		}
	</style>
</head>
<body>
	<h2>盒子模型演示</h2>
	<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
	<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
1. margin
  • 盒子的外边距，是透明的 只能设置他的边距
  • margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

在这里插入图片描述

2. padding

  • 盒子的内边距

  • 与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

  • 与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
3.border
  • border表示盒子的边界，它可以设置成可见的，样式多样的。
  • border像margin和padding一样可以分别对每一条边进行设置。
border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止 float 属性有三个可选值，如下表所示：

值描述
left元素向左浮动
right元素向右浮动
none默认值，元素不浮动

当父元素未设置高度时，父元素的高度会取决于子元素的高度。当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现，这种情况下，父元素的高度可能会塌陷到0

<!DOCTYPE html>
<html>
<head>
    <style>
        .box{
            border: 2px solid red;
            height: 400px;
            width: 312px;
        }
        .div1{
            height: 100px;
            width: 100px;
            float: left;
            border: 2px solid yellow;
        }
        .div2{
            float: left;
            height: 100px;
            width: 100px;
            border: 2px solid blue;
        }
        .div3{
            height: 100px;
            width: 100px;
            float: left;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
</body>
</html>
清除浮动

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性的可选值如下：

值描述
left左侧不允许浮动元素
right右侧不允许浮动元素
both左右两侧均不允许浮动元素

定位

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position常用的属性值有relative, absolute, fixed

属性名描述
position: relative相对定位，即相对于元素的正常位置进行定位，不会对其他元素造成影响
position: absolute绝对定位，相对于第一个带有定位属性的父元素进行定位 默认是浏览器
position: fixed固定定位，相对于浏览器的创建进行定位
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 0.5; /*透明度*/
            position: relative;
            left: 150px;
            top: 150px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 0.5; 
            /*绝对定位 不会保留原来的位*/
            position: absolute;
            left: 150px;
            top: 150px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

th: 100px;
height: 100px;
background-color: black;
opacity: 0.5;
/绝对定位 不会保留原来的位/
position: absolute;
left: 150px;
top: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}

~~~
温轻舟
关注
专栏目录
Python 数据分析竞赛实战：收集、整理、分析竞赛数据，为比赛提供数据支持，并用Python代码展示分析结果
程序员光剑
08-04 1647
16年，机器学习、深度学习爆炸式增长，无论是作为一种新兴技术还是技术的普及，数据科学的重要性都在逐渐上升。2019 年，中国大学生机器学习大赛评测协会（ACM）发布了“2019 大数据与人工智能专业人才创新训练计划”（Data and AI Skills Development Training for College Students），旨在鼓励青年学生进行科研和项目开发，提高青年人对数据科学技术的认识和能力。
网络安全资料汇总！
weixin_46159811的博客
01-07 3891
1.网络安全资料汇总 web security： 《http权威指南》【图灵出品】   深入理解web http/https协议 ，了解超文本传输协议是如何进行传输和编译的。 《javascript权威指南》   淘宝前端团队翻译，深入了解前端js变量，注释，函数，表达式等，学习xss必备书籍。还提及了jquery类库。 《xs...
简单认识HTML和CSS
tzy2358的博客
03-13 871
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它由一系列的标签组成，这些标签用于定义网页的结构、样式和内容。HTML标签包括开标签和闭标签，它们之间用于包裹网页中的内容。TML定义了文本、图像、链接、表格等元素的语义标签，这些标签描述了元素的含义和作用，使得浏览器能够正确地解释和渲染网页。同时，HTML也支持添加样式和脚本，使得网页更加丰富和交互。WEB前端：HTML+CSS+JavaScriptHTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。
2021-11-03大数据学习日志——数据埋点+网络爬虫——后端开发入门
tingbaobaoo的博客
11-03 1426
01_mini-web 本章节学习目标 能够知道Web开发流程 能够知道使用web应用程序处理客户端的动态资源请求操作 能够知道路由列表的实现 能够知道装饰器方式的添加路由 能够知道logging日志的使用 本章节常用单词 request英 [rɪ'kwest] 请求；需要 response英 [rɪ'spɒns] 响应；反应； route英 [ruːt] 按某路线发送 ; 路由 template英 ['templeɪt; -plɪt] 模板，样板 source英 [sɔːs...
[爬虫]4.数据解析及应用 之 bs4【爬取一部小说的文本】
雾狼的游戏屋
10-21 5123
解析的局部的文本内容都会在标签之间或者标签对应的属性中进行存储，列如图片在标签中，列表数据在标签中bs4数据解析的原理;1.实例化一个BeautifulSoup对象，并且将页面源码数据加载到该对象中2.通过调用BeautifulSoup对象中相关的属性或者方法进行标签定位和数据提取。
Python爬虫北京景点数据可视化和景点推荐系统
m0_60634964的博客
04-30 612
Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！
零基础简单爬虫制作（以wjyt-china企业黄页爬虫为例）（上）
wld22145的博客
09-07 1021
本教程目的为帮助零基础人群尽快掌握制作网络爬虫的技能，了解通过编程解决问题的一些基本思想。 笔者对于爬虫技术一直抱有好奇与向往，囿于缺少契机一直没有进行学习。机缘巧合下接到了一个任务，需要制作一个爬虫对wjyt-china企业黄页进行爬取，并且在公司简介中搜索“研制”或“研发”关键字。借此机会，笔者进行了数小时的爬虫技术学习与实践（之前已经有一定Python，HTML，JavaScript基础）
区块链最全线下培训大纲——尹成学院
尹成的技术博客
04-28 8613
区块链乃大势所趋，尹成学院联合微软加清华名师打造最强教学团队。传播智慧我们用心，人生冲锋你们用力第一阶段：区块链及其行业及Golang编程第一周- Go语言快速入门：（a）了解区块链从业人员的薪资结构组成（b）了解区块链公司中的职能分类（c）如何快速转型成为区块链高端人才（d）如何得到区块链公司就业机会（e）区块链现状（f）区块链趋势（g）区块链的前景 Go语言基础：1.1初识go语言1.2开发环...
常见的反爬虫和应对方法
sheji888的专栏
09-16 1077
在网络爬虫技术日益成熟的今天，反爬虫技术也随之发展，以应对日益增长的爬虫访问。以下是对常见反爬虫技术及其应对方法的详细概述。
Python实现一个简单的爬虫程序（爬取图片）
月亮的技术博客
09-14 747
进入spiders目录，创建baiduSpider.py，域名是要爬取的网站，写错了就无法爬取图片。首先查看请求的URL：在图片搜索框中输入”壁纸“，鼠标往下滚动，可以看到右侧”网络“中多次发送请求，响应中的”data“即是搜索出来的图片。百度搜索出来的图片是动态的，随着鼠标的动作自动发送下一页的请求，本文的目的是快速写出一个爬虫程序，实现爬取功能，所以在此忽略一些技术细节，不仔细去分析它的请求机制。首先贴出baiduSpider.py完整代码，一共30多行代码，就能实现自动爬取30张图片的功能。
初识爬虫4
2301_77869606的博客
09-11 812
3.防止频繁向同一个域名发送请求被封ip,需使用代理ip。2.代理ip分类，根据匿名度分类：透明，匿名，高匿。1.理解代理ip，正向代理和反向代理。5.简易爬虫，实现金山翻译的爬取。
基于大数据爬虫的高校网络舆情管控可视化大屏分析系统 8ov8c
QQ1304979694的博客
09-12 667
Django是一个开放源码的 Web架构，它是 Python开发的，它拥有完全的架子功能。大学期间的学习时光对于我来说是美好而短暂的，在这期间我也接触了许多可爱的大学同学们，以及兢兢业业教学的老师们，在我的毕业论文即将完成之际，我想对那些曾经给予我支持，帮助，还有鼓励的同学和老师以及家人们表达我内心的无比感激之情。
数据爬虫中遇到验证码的解决方法
sheji888的专栏
09-17 834
数据爬虫中遇到验证码是一个复杂而常见的问题，需要综合考虑多种因素并采取合适的解决策略。通过避免触发验证码、手动输入验证码、使用验证码识别技术、绕过验证码机制以及采用分布式爬虫和代理IP等方法，可以在一定程度上提高爬虫的稳定性和效率。然而，需要注意的是，爬虫的使用必须遵守相关法律法规和网站爬虫协议的要求，确保数据抓取活动的合法性和合规性。
Python3网络爬虫开发实战（17）爬虫的管理和部署（第一版）
最新发布
bigcrab的博客
09-17 1296
第一版的爬虫的管理和部署，有时间更新第二版的
航空航司reese84逆向
qq_53593099的博客
09-14 400
对于航空公司等高度保护的网站，使用这些技术来抓取诸如航班时刻表、票价等数据时，还需要注意法律和道德问题，因为擅自抓取可能会违反网站的服务条款，甚至触犯相关法规。：通过使用无头浏览器（如 Puppeteer 或 Selenium），模拟真实的用户行为，比如正常的鼠标移动、点击、滚动等操作，以避免被识别为机器人。在开发爬虫时，最好优先考虑使用航空公司提供的合法 API 服务，很多航空公司会通过 API 提供结构化的数据访问，这是更为安全和合规的途径。
大模型训练数据库Common Crawl
u013308709的博客
09-11 529
‌‌Common Crawl是一个非营利组织，致力于通过大规模分布式爬虫系统定期抓取整个Web并将其存储在一个可公开访问的数据库中。Common Crawl的数据收集和处理过程包括使用Python开源爬虫工具收集全球范围内的网站数据，并将其上传到‌Common Crawl基金会的数据仓库中。该项目从2008年开始，至今已经积累了大量的原始网页数据、元数据和文本提取数据。这些数据经过处理后，可以用于自然语言处理和机器学习的训练。
哪一种反爬虫策略更加人性化，不让用户感知到
KookeeyLena8的博客
09-12 588
在数字时代，网络爬虫已成为数据获取和分析的重要工具，但过度的爬虫活动会对网站性能、用户体验及数据安全构成威胁。因此，实施有效的反爬虫策略对于保护网站和用户体验至关重要。然而，如何在确保网站安全的同时，不影响用户的正常访问体验，成为了一个值得探讨的问题。本文将介绍几种人性化的反爬虫策略，旨在实现安全与用户体验的平衡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温轻舟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值