前言：
前面學習了html，今天學習一下css的基本使用，看下html與css之間是如何結合來編寫前端網頁的。
CSS 是什么？
CSS 是 Cascading Style Sheets（級聯樣式表）的縮寫。 CSS 是一種樣式表語言，用於為 HTML 文檔定義布局。例如，CSS 涉及字體、顏色、邊距、高度、寬度、 背景圖像、高級定位等方面。
CSS 跟 HTML 的區別在哪里？
HTML 用於結構化內容；CSS 用於格式化結構化的內容。
采用 CSS 有哪些好處？
CSS 是 Web 設計界的一次革命。CSS 的具體優點包括：
- 通過單個樣式表控制多個文檔的布局；
- 更精確的布局控制；
- 為不同的媒體類型（屏幕、打印等）采取不同的布局；
- 無數高級、先進的技巧。
基本的 CSS 語法
先舉個簡單的例子，比如我們要為一個網頁設置一個背景色
采用html方式我們會給body添加下面屬性
<body bgcolor="aliceblue">
采用css方式
<style type="text/css"> body{ background-color: aliceblue; } </style>
上例也向你展示了基本的 CSS 模型
selector:{property:value}
- selector選擇器代表花括號中的屬性設置將應用於哪個html元素
-
property 屬性 設置html標簽的屬性
- value 值 設置html標簽屬性的值
為一個 HTML 文檔應用 CSS
為HTML文檔應用CSS有以下三種方法可供選擇。下面對這三種方法進行了概括。我們建議你對第三種方法 （即外部樣式表）予以關注。
-
行內樣式表（style 屬性）
-
內部樣式表（style 元素）
-
外部樣式表（引用一個樣式表文件）
下面以給段落設置字體顏色和字體大小為例說明三種使用方式
1.）行內樣式表（style屬性）
為 HTML 應用 CSS 的一種方法是使用 HTML 屬性 style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css樣式</title> </head> <body> <div> <p style="color: green;font-size: 5rem "> 行內樣式表 </p> </div> </body> </html>
2.）內部樣式表（style 元素）
為 HTML 應用 CSS 的另一種方法是采用 HTML 元素 style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css樣式</title> <style type="text/css" > p{ color: green; font-size: 5rem; } </style> </head> <body> <div> <p> 內部樣式表 </p> </div> </body> </html>
3.）外部樣式表（引用一個樣式表文件）
這里推薦采用這種引用外部樣式表的方法，外部樣式表就是一個擴展名為 css 的文本文件。跟其他文件一樣，你可以把樣式表文件放在 Web 服務器 上或者本地硬盤上。
比如我這里在styles文件中新建一個global.css 目錄如下：
然后在index.html的HTML 代碼的頭部（header）中添加引用<link rel="stylesheet" type="text/css" href="../styles/global.css" />
global.css代碼如下：
p{ color: green; font-size: 5rem; }
index.html代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css樣式</title> <link rel="stylesheet" type="text/css" href="../styles/global.css" /> </head> <body> <div> <p> 外部樣式表 </p> </div> </body> </html>
元素的分類與標識
1.）使用css樣式類
用 class 對元素進行分類 ，根據上面的我們可以為標簽<p>創建一個樣式，但是我們一個html網頁中也行會用到好多種樣式<p>標簽，這時怎么辦呢？這時我們可以采用樣式類，為每個標簽創建多個樣式類，比如我們一篇文章，開頭，內容，結尾三個段落的字體顏色不一樣，我們可以創建三個不同需要的樣式類，如下：
p{， font-size: 5rem; } p.header{ color: green; } p.content{ color: orangered; } p.footer{ color: blue; }
從上可以看出一個標簽元素后面加上一個點（.）跟上你的樣式類名稱即可，看下如何在html上使用的，采用class屬性即可選擇使用哪個樣式類。
<div>
<p class="header">
這是文章開頭
</p>
<p class="content">
這是文章內容
</p>
<p class="footer">
這是文章結尾
</p>
</div>
2.）使用樣式id
除了可以對元素進行分類以外，你還可以標識單個元素。這是通過 HTML 屬性 id 實現的。 HTML 屬性 id 的特別之處在於，在同一 HTML 文檔中不能有兩個具有相同 id 值的元素。文檔中的每個 id 值都必須是唯一的。
還接着上面的例子來說明，比如現在我們需要自定一個<p>標簽的title。
p#title{ color:red; }
在html中引用
<p id="title"> 這是文章題目 </p>
樣式id常用於布局的目的，定義頁面的特殊部門，比如標題區域、頁腳區域，頁面區域。
常用css樣式舉例
1.）顏色與背景
CSS 屬性 color 用於指定元素的前景色。
h1{ color: aliceblue; }
CSS 屬性 background-color 用於指定元素的背景色。
body { background-color: aliceblue; }
CSS 屬性 background-image 用於設置背景圖像。
body{ background-image: url("../../images/bg_post_activity_5.png"); }
上面使用背景圖片發現圖片縱向橫向都平鋪了，使用CSS 屬性 background-repeat 就是用於 控制平鋪的。
- background-repeat:repeat-x 圖像橫向平鋪
- background-repeat:repeat-y 圖像縱向平鋪
- background-repeat:repeat 圖像橫向和縱向都平鋪
- background-repeat:no-repeat 圖像不平鋪
body{ background-image: url("../../images/bg_post_activity_5.png"); background-repeat:no-repeat; }
CSS 屬性 background-attachment 用於指定背景圖像是固定在屏幕上的、還是隨着它所在的元素而滾動的。
一個固定的背景圖像不會隨着用戶滾動頁面而發生滾動（它是固定在屏幕上的），而一個非固定的背景 圖像會隨着頁面的滾動而滾動。
- background-attachment:scroll 圖像會跟隨頁面滾動——非固定的
- background-attachment:fixed 圖像是固定在屏幕上的
body{ background-image: url("../../images/bg_post_activity_5.png"); background-repeat:no-repeat; background-attachment: scroll; }
CSS 屬性 background-position設置圖像放置在屏幕的位置
- background-position:2cm 2cm 圖像被放置在頁面內距左邊 2 厘米、頂部 2 厘米的地方
- background-position:50% 25% 圖像被放置在頁面內水平居中、離頂部四分之一處
- background-position:top right 圖像被放置在頁面的右上角
body{ background-image: url("../../images/bg_post_activity_5.png"); background-repeat:no-repeat; background-attachment: scroll; background-position:center; }
CSS 屬性 background 是上述所有與背景有關的屬性的縮寫用法
body{ background: aliceblue url("../../images/bg_post_activity_5.png") no-repeat scroll center; }
2.）字體
CSS 屬性 font-family 的作用是設置一組按優先級排序的字體列表，如果該列表中的第一個字體未在訪 問者計算機上安裝，那么就嘗試列表中的下一個字體，依此類推，直到列表中的某個字體是已安裝的
有兩種類型的名稱可用於分類字體：字體族名稱（family-name）和族類名稱（generic family）。下 面來解釋這兩個術語
- 字體族名稱（family-name） 字體族名稱（就是我們通常所說的“字體”）的例子包括“Arial”、“Times New Roman”、“宋體”、“黑體”等等。
- 族類（generic family） 一個族類是一組具有統一外觀的字體族。sans-serif 就是一例，它代表一組沒有“腳”的字體。
p.header{ color: green; font-family: 華文楷體, 華文宋體,新宋體; }
CSS 屬性 font-style 定義所選字體的顯示樣式
- normal（正常）
- italic（斜體）
- oblique（傾斜）
p.header{ color: green; font-family: 華文楷體, 華文宋體,新宋體; font-style: italic; }
CSS 屬性 font-variant 的值可以是：normal（正常）或 small-caps（小體大寫字母）。
p.content{ color: orangered; font-variant: small-caps; }
CSS 屬性 font-weight 指定字體顯示的濃淡程度。其值可以是 normal（正常）或 bold（加粗）
p.content{ color: orangered; font-variant: small-caps; font-weight:bold; }
CSS 屬性 font-size 來設置字體大小，字體大小可通過多種不同單位（比如像素或百分比等）來設置。
p.content{ color: orangered; font-variant: small-caps; font-weight:bold; font-size: 2em; }
一般都會使用px,pt,%,em這四種，‘px’和‘pt’將字體設置為固定大小，而‘%’和‘em’允許頁面瀏 覽者自行調整字體的顯示尺寸
CSS 屬性 font 是上述各有關字體的 CSS 屬性的縮寫用法。
p.footer{ color: blue; font: bold italic 3em 華文宋體,新宋體; }
3.）文本
CSS 屬性 text-indent 用於為段落設置首行縮進，以令其具有美觀的格式
p#title{ color:red; text-indent: 20%; }
CSS 屬性 text-align 與 HTML 屬性 align 的功能相同。該屬性的值可以是：left（左對齊）、right（右 對齊）或者 center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設為 justify（兩端對齊）， 即伸縮行中的文字以左右靠齊
p.footer{ color: blue; font: bold italic 3em 華文宋體,新宋體; text-align: center; }
CSS 屬性 text-decoration 令我們可以為文本增添不同的“裝飾”或“效果”。
p.footer{ color: blue; font: bold italic 3em 華文宋體,新宋體; text-align: center; text-decoration: underline; }
CSS屬性letter-spacing用於設置文本的水平字間距
p.footer{ color: blue; font: bold italic 3em 華文宋體,新宋體; text-align: center; text-decoration: underline; letter-spacing: 0.50em; }
CSS 屬性 text-transform 用於控制文本的大小寫。無論字母本來的大小寫，你可以通過該屬性令它首字 母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase）
p#label{ color: orangered; text-transform: uppercase; }
鏈接
上面學習了屬性（比如修改顏色、字體、添加下划線等）也可以用在鏈接標簽上。但不同的是， CSS 允許你根據鏈接是未訪問的、已訪問的、活動的、是否有鼠標懸停等分別定義不同的屬性。這樣， 我們便可為網站增添奇特而有用的效果。你需要通過偽類（pseudo-class）來控制這些效果。
先看下什么是偽類？
偽類（pseudo-class）令你可以在為 HTML 元素定義 CSS 屬性的時候將條件和事件考慮在內。
偽類:link 用於瀏覽者從未訪問過的鏈接。
a:link{ text-decoration: none; color: blue; }
偽類:visited 用於瀏覽者已訪問過的鏈接
a:visited{ text-decoration: none; color: green; }
偽類:active 用於活動的鏈接（即獲得當前焦點的鏈接
a:active{ text-decoration: none; color: gold; }
偽類:hover 用於有鼠標懸停的鏈接
a:hover{ text-decoration: none; color: orangered; }
組織元素（span 和 div）
span 和 div 元素用於組織和結構化文檔，並經常聯合 class 和 id 屬性一起使用。
在這一課中，我們將進一步探究 span 和 div 的用法，因為這兩個 HTML 元素對於 CSS 是很重要的。
- 用 span 組織元素
- 用 div 組織元素
用 span 組織元素
span 元素可以說是一種中性元素，因為它不對文檔本身添加任何東西。但是與 CSS 結合使用的話，span 可以對文檔中的部分文本增添視覺效果
用 div 組織元素
div 可以被用來組織一個或多個塊元素。
盒狀模型
CSS 中的盒狀模型（box model）用於描述一個為 HTML 元素形成的矩形盒子。盒狀模型還涉及為各個元 素調整外邊距（margin）、邊框（border）、內邊距（padding）和內容的具體操作。下圖顯示了盒狀 模型的結構： 
外邊距和內邊距
你學習了盒狀模型。在這一課，我們將了解如何通過設置 margin（外邊距）和 padding（內邊 距）這兩個 CSS 屬性來改變元素的顯示
為元素設置外邊距
一個元素有上（top）、下（bottom）、左（left）、右（right）四個邊。外邊距（margin）表示從一 個元素的邊到相鄰元素(或者文檔邊界)之間的距離
p#label{ color: orangered; text-transform: uppercase; margin-top: 5em ; margin-right: 3em ; margin-bottom:5em ; margin-left: 3em; }
等同於
p#label{ color: orangered; text-transform: uppercase; margin: 5em 3em 5em 3em; }
為元素設置內邊距
p#title{ color:red; padding: 5em 3em 5em 3em; }
等同於
p#title{ color:red; padding-top: 5em; padding-right: 3em; padding-bottom: 5em ; padding-left: 3em; }
邊框
邊框（border）可以有多種用途，比如作為裝飾元素或者作為划分兩物的分界線。在設置邊框方面，CSS 為你提供了無盡選擇。
- 邊框寬度由 CSS 屬性 border-width 定義，其值可以是“thin”（薄）、“medium”（普通）或“thick” （厚）等，也可以是像素值。
- CSS 屬性 border-color 用於定義邊框的顏色。
- 邊框樣式[border-style]
p.footer{ color: blue; font: bold italic 3em 華文宋體,新宋體; text-align: center; text-decoration: none; letter-spacing: 0.50em; border:0.05em dotted gold; }
高度和寬度
- 設定寬度[width]
- 設定高度[height]
p.content{ color: orangered; font-variant: small-caps; font-weight:bold; font-size: 2em; width: 50%; height: auto; }
浮動元素（float）
我們可以通過 CSS 屬性 float 令元素向左或向右浮動。也就是說，令盒子及其中的內容浮動到文檔（或 者是上層盒子）的右邊或者左邊。比如我們要實現一個圖文混排的效果
定義一個css Id
#picture{ float: left; width: 200px; }
html代碼
<div> <div id="picture"> <img src="../../images/bg_post_activity_1.png" alt="這是一張圖片" width="200px" > </div> <p> 實現圖文混排，實現圖文混排，實現圖文混排，實現圖文混排，實現圖文混排，實現圖文混排,........，實現圖文混排，實現圖文混排，實現圖文混排， </p> </div>
元素的定位
CSS 定位令你可以將一個元素精確地放在頁面上你所指定的地方
- 絕對定位
- 相對定位
絕對定位
要對元素進行絕對定位，應將 position 屬性的值設為 absolute。接着，你可以通過屬性 left、right、 top 和 bottom 來設定將盒子放置在哪里。
#box1 { position:absolute; bottom: 50px; right: 50px; }
html代碼
<div id="box1"> <p> <a href="#" target="_blank">測試css樣式的偽類</a> </p> </div>
總結：
今天大致學習了一下css的基本使用，以及一些常用的css樣式。