CSS技術主要是美化頁面，並提供了通用的美化樣式的設計——選擇器。
使用CSS，要先定義樣式表，然後使用該樣式表。
一、樣式表的定義
CCS樣式表的定義就是定義CCS選擇器，有3種定義方式。
1> 標記選擇器——通過HTML標籤定義樣式表
// 基本語法格式：
// 引用樣式的對象{標籤屬性:屬性值;標籤屬性:屬性值;……}
// 例如：定義標籤選擇器p
p{
color:#0000FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
// 使用標籤選擇器：
<body> <p>這是第1行正文內容……</p> </body>
2> 類別選擇器——使用class定義樣式表
// 基本語法格式：
// 格式1： 標籤名.類名{標籤屬性:屬性值;標籤屬性:屬性值;……}
// 格式2： .類名{標籤屬性:屬性值;標籤屬性:屬性值;……}
// 例如：定義類別選擇器p
p.x{
color:blue;
font-weight:bold;
font-size:25px;
}
.info{
font-size:12px;
color:red;
}
// 使用標籤選擇器：
<body>
<p class="x">這是第1行正文內容……</p>
<p class="info">這是第2行正文內容……</p>
</body>
3> ID選擇器——使用標籤的id屬性定義樣式表
// 基本語法格式：
// #id名稱{標籤屬性:屬性值標籤屬性:屬性值;……}
// 例如：定義ID選擇器
#x{
color:red;
font-weight:bold;
font-size:25px;
}
// 使用標籤選擇器：
<body>
<p>這是第1行正文內容……</p>
<p id=“x">這是第2行正文內容……</p>
</body>
二、樣式表的使用
1> 行內式【不需要定義選擇器】
利用style屬性直接爲元素設置樣式，只對當前的標籤起作用
<body>
<p style="color:#FF0000;
font-size:20px;
text-decoration:underline;">正文內容1</p>
<p style="color:#000000;
font-style:italic;">正文內容2</p>
</boby>
2> 內嵌式
在<head></head>標籤對之間，利用<style></style>標籤對定義選擇器， 內嵌式樣式表的作用範圍是本HTML文檔內。
<head>
//定義兩個選擇器，標籤選擇器p和類選擇器info
<style type="text/css">
p{
color:#0000FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
.info{font-size:12px;color:red;}
</style>
</head>
<body>
<p>這是第1行正文內容……</p>
<p class="info">這是第2行正文內容……</p>
</body>
3>鏈接式
外聯式樣式表是將定義好的CSS單獨放到一個以.css爲擴展名的文件中，再使用<link>標籤鏈接到所需要使用的網頁中，在<head>與</head>之間。
//<link>標籤鏈接到網頁的格式：
<link href="*.css文件路徑" type="text/css" rel="stylesheet">
// 例如：
// 首先定義一個sheet_x.css文檔，其代碼如下：
h2{ color:#0000FF; }
p{
color:#FF0000;
text-decoration:underline;
font-weight:bold;
font-size:15px;
}
// 其次，在HTML中使用：
<html>
<head>
<link href="sheet_x.css"
type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS標題1</h2>
<p>這是正文內容1……</p>
</body>
</html>
3》CSS常用屬性
CSS美化網頁是通過設置網頁元素的屬性來實現的，主要有字體屬性、顏色屬性、背景屬性、文本段落屬性等。
1>字體屬性
|
屬性名 |
屬性含義 |
屬性值 |
|
font-family |
字體 |
取值（如“宋體”） |
|
font-size: |
字體大小（字號） |
取值單位：pt（點數），例“12pt” |
|
font-style |
字體風格 |
normal（普通，默認值），italic斜體，oblique中間狀態 |
|
font-weight |
字體加粗 |
normal（普通，默認值），bold（一般加粗），bolder（重加粗），lighter（輕加粗），number:100-900之間的加粗 |
|
font |
字體複合屬性 |
用來簡化css代碼，可以取值以上所有屬性值，之間用空格分開 |
2>顏色和背景屬性
顏色和背景屬性主要有：color、background-color、background-image、background
|
屬性名 |
屬性含義 |
屬性值 |
|
color |
顏色 |
（顏色值是英文名稱或16進制RGB值）例，red爲#ff0000） |
|
background-color |
背景顏色 |
同color屬性 |
|
background-image |
背景圖像 |
none:不用背景；url：圖像地址 |
|
background-position |
背景圖片位置 |
top，left，right，bottom，center等 |
|
background |
背景複合屬性 |
簡化css代碼，可取值以上所有屬性值，之間用空格分開 |
3>文本段落屬性
文本段落的屬性，包括字符間隔、文字修飾、縱向排列、文本轉換、文本排列水平對齊方式、文本縮進，文本行高等。
|
屬性名 |
屬性含義 |
屬性值 |
|
text-decoration |
文字修飾 |
none,underline:下劃線,overline:上劃線,line-through:刪除線,blink：文字閃爍 |
|
vertical-align |
垂直對齊 |
baseline:默認的垂直對齊方式，super文字的上標，sub文字的下標，top垂直靠上，text-top使元素和上級元素的字體向上對齊，middle垂直居中對齊，text-bottom使元素和上級元素的字體向下對齊 |
|
text-align |
水平對齊 |
left,right,center,justify:兩段對齊 |
|
text-indent |
文本縮進 |
縮進值（長度或百分比 |
|
line-height |
文本行高 |
行高值（長度，倍數，百分比） |
|
white-space |
處理空白 |
normal將連續的多個空格合併,nowrap強制在同一行內顯示所有文本，直到文本結束或者遇到<br>對象 |