- Python网络爬虫入门到实战
- 杨涵文 周培源 陈姗姗
- 998字
- 2025-02-23 15:06:54
1.7 CSS和HTML的结合方式
CSS与HTML结合，能够设计出更加优美的布局，它们之间有以下4种结合方式：
1）行内样式。
2）内嵌样式。
3）链接样式。
4）导入样式。
下面依次进行介绍。
1.7.1 行内样式
可以直接在标签中添加属性style,style的值其实就是CSS代码。案例：第一个p标签添加为红色背景，字体为黑色，大小为20；第二个p标签设置为蓝色字体，字体类型设置为：italic（文件：CSS/8.html）。
执行效果如图1-53所示。
•图1-53 执行效果
1.7.2 内嵌样式
内嵌样式就是在<head>标签中使用<style>标签。它的优点是所有的CSS代码集中在一个区域中，方便后期维护，实现了HTML和CSS代码的分离。它的缺点是，仅仅适合单个页面的管理，如果是多个页面，实现起来依然很费力。
案例：两个<p>标签设置为居中，字体大小设置为50，背景设置为黄色（案例文件：CSS/9.html），案例代码如下。
执行效果如图1-54所示。
•图1-54 执行效果
1.7.3 链接样式
链接样式最为常用，也适用于多个页面。如果多个页面需要同样的修改，那么每个页面只需要直接导入CSS文件即可，而不用对每一个页面写＜style＞标签。它的基本形式为：＜link href=＂外部css文件的路径＂type=＂MIME类型＂rel=＂文本类型＂＞。
具体参数说明如下。
1）href:css文件的路径，一般使用相对路径。
2）rel：一般设置为stylesheet。
3）type参数根据格式选择，如文本为“css:text/css”；JS为“ext/javascript”；图片为“image/jpg”，所有图片为“image/*”。
案例：对两个<p>标签设置为居中，字体大小为50，整体背景设置为黄色，创建html文件（案例文件：CSS/10.html），案例代码如下。
创建一个名为CSS的文件夹，在CSS文件夹中创建一个名为1.css的文件，案例代码如下。
文件目录如图1-55所示。
•图1-55 目录
执行效果如图1-56所示。
•图1-56 执行效果
1.7.4 导入样式
导入样式与链接样式类似，它们是同等级的，将该样式添加到style中。CSS文件夹中有刚刚创建的1.css文件，有以下几种导入方式。
1）@importurl（css/1.css）
2）@importurl（＂css/1.css＂）
3）@importurl（css/1.css'）
案例代码如下（文件：CSS/11.html）。
执行效果如图1-57所示。
•图1-57 执行效果
1.7.5 优先级
综上所述，通过各种组合方式的作用范围，即可对比出各自的缺点。
1）行内样式：只作用于当前标签。
2）内嵌样式：只作用于当前页面。
3）链接样式和导入样式：可以同时作用于多个页面。
各组合方式优先级对比如下。
1）行内样式的优先级最高。
2）内嵌样式、链接样式和导入样式：内嵌式＞导入式＞链接式。
案例如下。
执行效果如图1-58所示。
•图1-58 执行效果
上述代码中先设置内嵌样式，且字体设置为红色，然后以链接样式导入了CSS文件。从执行的效果可以看出最终执行的是链接样式，因为链接样式的优先级高于内嵌样式。