Python爬虫之CSS基础知识

CSS是层叠样式表（Cascading Style Sheets用的缩写，用来定义HTML元素属性，使HTML文档显示多样化。在HTML中，CSS一般有三种用法：

1）内联样式表。直接将CSS代码写在HTML标记中（<body> </body>里），使用style属性改变其样式。

2）嵌入式样式表。将CSS代码写在<style> </style>之间，<style>内容写在<head> </head>之间。

3）外部样式表。首先将CSS代码写一个单独的外部文件，命名为“.css”格式。在<head>内使用<link>标记将CSS样式链接到HTML文件内。eg: <link rel = "StyleSheet" type = "text/css" href = "style.css">.

CSS由两个主要的部分构成：选择器和一条或者多条声明。根据选择器的定义方式，可以将样式表的定义分为三种方式：

1）HTML标记定义。如果想修改<p>...</p>的样式，可以定义CSS为：p{属性1：属性值1；属性2：属性值2}。p可以叫做选择器。

2）ID选择器定义。ID选择器可以为特有ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器。CSS中ID选择器以“#”来定义。eg：#word{text-align:center,color:red;}

3）class选择器定义。class选择器用于描述一组元素的样式，class选择器有别于ID选择器，它可以在多个元素中使用。

1.颜色属性color。

文本颜色的定义方式：

颜色名称：color:green。

扫描二维码关注公众号，回复： 3763863 查看本文章

十六进制：color:#ff6600。

RGB方式：rgb(255,255,0).

RGBA方式：color:rgba(255,255,255,1)

2.字体属性

字体大小：font-size:15px

字体类型：font-family:宋体

字体加粗：font-weight:bold/bolder/lighter。或者font-weight:100~900(400=normal)

3.背景属性：

背景颜色：background-color:red.

背景图片：background-image:url（图片路径）

背景重复：background-repeat：repeat（整体重复平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）

背景位置：background-position：（横向）left、center、right；（纵向）top、center、bottom。

4.文本属性。

对齐方式：text-align：left、center、right

文本行高：line-height:数值

首行缩进:text-indent:50px

字符间距：letter-spacing：3px

5.列表属性。

在HTML中，列表有两种类型：有序和无序。如果使用CSS列表可以用图像作为列表项标记。

list-style-type:设置列表项标记类型，常用的属性有：none、disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha。

list-style-position：设置列表项中标记的位置。属性：inside（文本内）、outside（文本左侧）、inherit。

list-style-image：设置图像列表标记。属性：URL（图像路径）、none、inherit。eg：ul{list-style-image:url('img.gif');}

例子：

<!DOCTYPE html>
<html>
<head>
	<title> Python 爬虫开发---CSS </title>
<style>
h1
{
	background-color: yellow; /*--背景颜色--*/
	color: red; /*--字体颜色--*/
	text-align: center;
	font-size: 40px; /*--字体大小--*/
}
p
{
	background-color: pink;
	text-align: 50px;
	font-family: "Times new Roman", Times, serif;
}
p.ex { color: rgb(0, 0, 255);}
div
{
	background-color : #b0c4de
}

ul.a {list-style-type : square;}
ul.b {list-style-type : upper-roman;}
ul.c {list-style-image : url('http://www.cnblogs.com/images/logo_small.gif');}
</style>
</head>

<body>
<h1> CSS background-color 演示 </h1>
<div>
该文本插入div元素中
<p> 该段落有自己的背景颜色 </p>
<p class = "ex"> 这个是一个类为“ex”的段落。这个文本是蓝色的。</p>
我们仍然在同一个div中。
</div>
<p> 无序列表实例： </p>

<ul class = "a">
	<li> Coffee </li>
	<li> Milk </li>
	<li> Tea </li>
</ul>

<p> 有序列表实例： </p>
<ol class = "b">
	<li> Coffee </li>
	<li> Milk </li>
	<li> Tea </li>
</ol>

<p> 图片列表实例：</p>
<ul class = "c">
	<li> Coffee </li>
	<li> Milk </li>
	<li> Tea </li>
</ul>
</body>
</html>

其他详细应用请看CSS参考手册：点击打开链接

Python爬虫之CSS基础知识

猜你喜欢