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。
十六進位制：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參考手冊：點選開啟連結