文章目錄
- 1. CSS簡介
- 2. CSS選擇器
- 3. CSS常見的屬性
- 3.1 顔色屬性
- 3.2 字型屬性
- 3.3 背景屬性
- 3.4 文本屬性
- 3.5 清單
- 4. 執行個體
1. CSS簡介
CSS指層疊樣式表 （
Cascading Style Sheets
），用來定義如何顯示HTML元 素，一般和HTML配合使用。CSS樣式表的目的是為了解決内容與表現分離的問題， 即使同一個HTML文檔也能表現出外觀的多樣化。在HTML中使用CSS樣式的方式，一 般有三種做法：
- ·内聯樣式表：CSS代碼直接寫在現有的HTML标記中，直接使用style屬性改變 樣式。例如，
<body style="background-color:green; margin:0; padding:0;"></body>
- ·嵌入式樣式表：CSS樣式代碼寫在
<style type="text/css"></style>
标記之間，一般情況下嵌入式CSS樣式寫在之間。
·
- 外部樣式表：CSS代碼寫一個單獨的外部檔案中，這個CSS樣式檔案以“.css”為擴充名，在内（不是在
2. CSS選擇器
CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。選擇器通常是 需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成。屬性 （property）是希望設定的樣式屬性（style attribute）。每個屬性有一個值。 屬性和值由冒号分開。例如：
h1{color：blue；font-size：12px}
。其中h1為選 擇器，color和font-size是屬性，blue和12px是屬性值，這句話的意思是将h1标 記中的顔色設定為藍色，字型大小為12px。根據選擇器的定義方式，可以将樣式表 的定義分成三種方式：
-
HTML标記定義
<p>...</p>
的樣式，可以定義CSS：p{屬性：屬性值；屬性1：屬性值1}。p可以叫做選擇器，定義了标記中内容所執行的樣式。一個選擇器可以控制若幹個樣式屬性，他們之間 需要用英語的“；”隔開，最後一個可以不加“；”。
·
-
ID選擇器定義
：ID選擇器可以為标有特定ID的HTML元素指定特定的樣式。
HTML元素以ID屬性來設定ID選擇器，CSS中ID選擇器以“#”來定義。假如定義為
#word{text-align：center；color：red；}
- ·
class選擇器定義
：class選擇器用于描述一組元素的樣式，class選擇器有别
于ID選擇器，它可以在多個元素中使用。class選擇器在HTML中以class屬性表示，在CSS中，class選擇器以一個點“.”号顯示。例如，
.center{text-align：center；}
3. CSS常見的屬性
介紹完選擇器，接着說一下CSS中一些常見的屬性。常見屬性主要說明一下顔色 屬性、字型屬性、背景屬性、文本屬性和清單屬性。
3.1 顔色屬性
顔色屬性color用來定義文本的顔色，可以使用以下方式定義顔色：
·顔色名稱，如color：green。
·十六進制，如color：#ff6600。
·簡寫方式，如color：#f60。
·RGB方式，如rgb（255，255，255），紅（R）、綠（G）、藍（B）的取值範 圍均為0～255
·RGBA方式，如color：rgba（255，255，255，1），RGBA表示Red（紅色）、 Green（綠色）、Blue（藍色）和Alpha的（色彩空間）透明度。
3.2 字型屬性
可以使用字型屬性定義文本形式，有如下方法：
- ·
font-size
- ·
font-family
- ·
font-weight
3.3 背景屬性
可以用背景屬性定義背景顔色、背景圖檔、背景重複和背景的位置，内容如
下：
- ·
background-color
- ·
background-image
- ·
background-repeat
- ·
background-position
·簡寫方式可以簡化背景屬性的書寫，同時定義多個屬性，格式為background： 背景顔色url（圖像）重複位置。如background：#f60url（images/bg、jpg）
no-repeat top center。
3.4 文本屬性
可以用文本屬性設定行高、縮進和字元間距，具體如下：
- ·
text-align
- ·
line-height
- ·
text-indent
- ·
letter-spacing
3.5 清單
在HTML中，有兩種類型的清單：無序和有序。其實使用CSS，可以列出進一步 的樣式，并可用圖像作清單項标記。接下來主要講解以下幾種屬性：
- ·
list-style-type
用來指明清單項标記的類型。常用的屬性值有：none（無标
記）、disc（預設，标記是實心圓）、circle（标記是空心圓）、square（标記是實心方塊）、decimal（标記是數字）、decimal-leading-zero（0開頭的數字标記）、lower-roman（小寫羅馬數字i、ii、iii、iv、v等）、upper-roman（大寫羅馬數字I、II、III、IV、V等）、lower-alpha（小寫英文字母a、b、c、d、e等）、upper-alpha（大寫英文字母A、B、C、D、E等）。例如，
ul.a{liststyle-type：circle；}
- ·
list-style-position
- ·
list-style-image
ul{list-style-image：url（‘image.gif’）；}
4. 執行個體
接下來通過一個綜合的例子将所有知 識點進行融合，采用嵌入式樣式表的方式，HTML文檔如下：
<!DOCTYPE html>
<html>
<head>
<meta ;charset="utf-8">
<title>Python爬蟲開發</title>
<style>
h1
{
background-color:# 6495ed;/*--背景顔色--*/
color:red;/* 字型顔色 */
text-align:center;/* 文本居中 */
font-size:40px;/* 字型大小*/
}
p
{
background-color:# e0ffff;
text-indent: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;}
ol.b {list-style-type:upper-roman;}
ul.c{list-style-image:url('');}
</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>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序清單執行個體:</p>
<ol ;class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>圖檔清單示例</p>
<ul ;class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html> 效果:
Python爬蟲開發
CSS background-color示範
該文本插入在 div 元素中。
該段落有自己的背景顔色。
這是一個類為"ex"的段落。這個文本是藍色的。
我們仍然在同一個 div 中。
無序清單執行個體:
- Coffee
- Tea
- Coca Cola
有序清單執行個體:
- Coffee
- Tea
- Coca Cola
圖檔清單示例
- Coffee
- Tea
- Coca Cola
- html快速基礎入門詳解
- CSS快速入門詳解
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)