目錄
- 一、什麼是 CSS
- 二、CSS
-
- 1、文法說明
- 2、選擇器
- 3、外部樣式表
- 4、盒子模型
- 5、定位
- 6、溢出
- 7、浮動
- 8、組合選擇器
- 三、網頁結果呈現
一、什麼是 CSS
- CSS是級聯樣式表（Cascading Style Sheets）的縮寫。HTML 用于撰寫頁面的内容，而 CSS 将決定這些内容該如何在螢幕上呈現。
- 網頁的内容是由 HTML的元素建構的，這些元素如何呈現，涉及許多方面，如整個頁面的布局，元素的位置、距離、顔色、大小、是否顯示、是否浮動、透明度等等。
二、CSS
1、文法說明
一條CSS樣式規則由兩個主要的部分構成：選擇器，以{}包裹的一條或多條聲明:
這條規則表明，頁面中所有的一級标題都顯示為藍色，字型大小為12像數。
說明：
1、選擇器是您需要改變樣式的對象（上圖的規則就一級标題生效）。
2、每條聲明由一個屬性和一個值組成。（無論是一條或多條聲明，都需要用{}包裹，且聲明用;分割）
3、屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒号分開。
2、選擇器
一個頁面上的元素衆多，選擇器就用于在頁面中找到/選擇需要應用這個樣式的對象。
除我們前示的元素選擇器外，還有id和class選擇器。其中class選擇器使用非常普遍。
- id選擇器
#sky{
color: blue;
}
注意：id選擇器前有 # 号。 這條規則表明，找到頁面上id為sky的那個元素讓它呈現藍色。因為在HTML中，元素的id值必須唯一。 是以，id 選擇器适用範圍隻有一個元素。
- class 選擇器
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
注意：class選擇器前有 . 号。 以上代碼定義了三條規則，分别應用于頁面上對應的元素，如隻要頁面上某元素的class為red，那麼就讓它呈現紅色。元素的class值可以多個，也可以重複。
3、外部樣式表
建立如下内容的一個 HTML檔案（字尾為.html)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面這個語句，将導入外部的 mycss.css 樣式表檔案 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>頁面标題</title>
</head>
<body>
<h1>我是有樣式的</h1>
<hr>
<p class="haha">還是有點醜：)</p>
</body>
</html>
在同一目錄建立一個樣式表檔案mycss.css（注意字尾名為css）如下：
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
引入外部樣式表是我們使用樣式的主流方式，因為衆多的樣式規則單獨放在一個檔案中，與 HTML 内容分開，結構清晰。同時其它頁面也可使用，達到複用的目的。
除外部樣式表之外還有内部樣式表和内聯樣式，一般而言，隻有頁面的樣式規則較少時可采用。内聯樣式是最不靈活的一種方式，完全将内容和樣式合在一起，實際應用中非常少見。
樣式的優先級，從高到低分别是：内聯樣式、内部樣式表或外部樣式表、浏覽器預設樣式。可總結為哪個樣式定義離元素的距離近，哪個就生效。
4、盒子模型
盒子模型指的是一個 HTML 元素可以看作一個盒子。從内到外，這個盒子是由内容 content, 内邊距 padding, 邊框 border, 外邊距 margin構成的。
- Content 盒子的内容，如文本、圖檔等
- Padding 填充，也叫内邊距，即内容和邊框之間的區域
- Border 邊框，預設不顯示
- Margin 外邊距，邊框以外與其它元素的區域
5、定位
position屬性用于對元素進行定位。該屬性有以下一些值：
static 靜态：設定為靜态定位position: static;，這是元素的預設定位方式，也即你設定與否，元素都将按正常的頁面布局進行。
即：按照元素在 HTML出現的先後順序從上到下，從左到右進行元素的安排。
- relative 相對：設定為相對定位position: relative;，這将把元素相對于他的靜态（正常）位置進行偏移
fixed 固定：設定為固定定位position: fixed;，這将使得元素固定不動（即使你上下左右拖動浏覽器的滾動條）。
此時元素固定的位置仍由top, bottom, left, right屬性确定，但相對的是視口（viewport，就是浏覽器的螢幕可見區域）
absolute 絕對：設定為絕對定位position: absolute;，将使元素相對于其最近設定了定位屬性（非static）的父元素進行偏移。
如果該元素的所有父元素都沒有設定定位屬性，那麼就相對于這個父元素。
設定了元素的position屬性後，我們才能使用top, bottom, left, right屬性，否則定位無效。
6、溢出
當元素内容超過其指定的區域時，我們通過溢出overflow屬性來處理這些溢出的部分。
溢出屬性有一下幾個值：
- visible 預設值，溢出部分不被裁剪，在區域外面顯示
- hidden 裁剪溢出部分且不可見
- scroll 裁剪溢出部分，但提供上下和左右滾動條供顯示
- auto 裁剪溢出部分，視情況提供滾動條
7、浮動
在一個區域或容器内，我們可以設定float屬性讓某元素水準方向上向左或右進行移動，其周圍的元素也會重新排列。我們常用這種樣式來使圖像和文本進行合理布局。
8、組合選擇器
前面我們學習了 CSS有三種選擇器：元素、id 和 class 。但我們也可以進行組合，以得到簡潔精确的選擇。下面我們介紹兩種組合選擇器。
-
後代選擇器
以空格作為分隔，如：.haha p 代表在div元素内有.haha這種類的所有元素。
-
子選擇器
也稱為直接後代選擇器，以>作為分隔，如：.haha > p 代表在有.haha類的元素内的直接
<p>
三、網頁結果呈現
