CSS介紹
css是層疊樣式表（Cascading Style Sheets）的縮寫瘦锹，用于定義HTML元素的顯示形式鸯旁，是W3C推出的格式化網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)技術(shù)亭螟。用來表現(xiàn) HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言碾褂。在HTML文檔中加入 CSS 樣式表可分為嵌入式樣式表、外部樣式表和內(nèi)聯(lián)樣式表三種暂殖，在同一文檔內(nèi)可以同時(shí)使用三種方法价匠。
有以下三種方式插入樣式表
*內(nèi)聯(lián)樣式
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式呛每。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性踩窖。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距晨横。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
*內(nèi)部樣式表
當(dāng)單個(gè)html文件需要特別樣式時(shí)洋腮，就可以使用內(nèi)部樣式表，此時(shí)添加的樣式是對(duì)這一整個(gè)html文件全局作用手形∩豆可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
*外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候库糠，外部樣式表將是理想的選擇伙狐。使用外部樣式表，你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀瞬欧。此時(shí)通過文件鏈接來實(shí)現(xiàn)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS作用
CSS 的作用就是可以改變html文檔的顯示界面外觀贷屎，讓網(wǎng)頁界面更加美觀。
CSS選擇器
CSS改變界面的方式是通過其選擇器進(jìn)行屬性定義
其中包含以下幾種選擇器:
*元素選擇器
元素即指的是HTML元素黍判，HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼豫尽。而元素選擇器就是在CSS文件中選擇某一個(gè)HTML元素進(jìn)行屬性編輯
語法格式 ---> 元素 { 屬性 : 屬性對(duì)應(yīng)的值 }
例如:
body, div, span, h1, h2, h3 { font-size: 16px ; color : blue; }
將body,div,span,hi,h2,h3這幾個(gè)html元素模塊都設(shè)置成了字體大小為16像素，顏色為藍(lán)色
*類選擇器
類選擇器即為開發(fā)者自定義一個(gè)樣式類顷帖，該類中包含相應(yīng)的屬性修改美旧，然后只要是在應(yīng)用到這個(gè)類的地方就會(huì)調(diào)用這個(gè)類選擇器中定義的屬性樣式
語法格式 .類名{屬性1: 屬性值1；屬性2:屬性值2贬墩；屬性3:屬性值3 }
例如:
table .detail { font-size: 16px ; color : red; }
<tr class = "detail">這里有一句話</tr>
這樣就把<tr>標(biāo)簽中的內(nèi)容改為了字體大小16像素和顏色為紅色
*通配符選擇器
通配符選擇器榴嗅，就是將所有的元素或標(biāo)簽進(jìn)行屬性設(shè)置，在通配符前加標(biāo)簽名則會(huì)匹配所有該標(biāo)簽進(jìn)行屬性設(shè)置
語法格式 ---> * { 屬性 : 屬性對(duì)應(yīng)的值 }
或者 標(biāo)簽名 * { 屬性 : 屬性對(duì)應(yīng)的值 }
例如:
* { font-size: 16px ; color : red; }
所有的標(biāo)簽都會(huì)變?yōu)樽煮w大小16像素和紅色陶舞，如果是這樣
div * { font-size: 16px ; color : red; }
則所有的<div></div>標(biāo)簽中的內(nèi)容會(huì)進(jìn)行相應(yīng)改變
*偽類選擇器
這個(gè)選擇器的語法結(jié)構(gòu)同上嗽测，這里只介紹最常用的錨(a)偽類，記憶方法：a Love or Hate肿孵，對(duì)應(yīng)的分別是a:link 唠粥、a:visited 、a:hover 停做、a:active
偽類選擇器可以以不同方式格式化超級(jí)鏈接元素的四種不同狀態(tài)：以下順序依次寫
a:link 是用在未訪問的鏈接的選擇器
a:visited 是用在已訪問過的鏈接的選擇器
a:hover 是用在鼠標(biāo)光標(biāo)放在其上的鏈接的選擇器
a:active 是用在獲得焦點(diǎn)（比如晤愧，被點(diǎn)擊）的鏈接的選擇器
如果需要，我們可以組合這幾個(gè)狀態(tài)蛉腌，按順序?qū)懀?/p>
a:link官份，a:visited { color :blue;}
a:hover 只厘，a:active { color :blue;}
這樣就是連接被訪問過或者當(dāng)鼠標(biāo)進(jìn)行操作時(shí)應(yīng)用該選擇器的標(biāo)簽會(huì)變?yōu)樗{(lán)色
*偽元素選擇器
標(biāo)準(zhǔn)的選擇器不能格式化一個(gè)元素內(nèi)容的第一個(gè)字母或者第一行，而偽元素選擇器能實(shí)現(xiàn)：
所有瀏覽器支持的有兩種： ：first-line和 ：first-letter
例：段落的第一行：p：first-line {屬性：值舅巷；}
例：段落的第一個(gè)字母：p：first-letter {屬性：值羔味；}
常用屬性
以下是常用的屬性，以作參考:
color : #999999 文字顏色
font-family :宋體文字字型
font-size: 10pt 文字大小
font-style:italic 文字斜體
font-variant:small-caps 小字體
letter-spacing: 1pt 文字間距
line-height: 200% 設(shè)定行高
font-weight:bold 文字粗體
vertical-align:sub 下標(biāo)字
vertical-align:super 上標(biāo)字
text-decoration:line-through 加刪除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none 除連接底線
text-transform: capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文小寫
text-align:right 文字右對(duì)齊
text-align:left 文字左對(duì)齊
text-align:center 文字置中對(duì)齊
這些是一些簡(jiǎn)單的文字效果钠右，可以應(yīng)用到css的頁面中赋元。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復(fù)排列-網(wǎng)頁預(yù)設(shè)
background-repeat : no-repeat 不重復(fù)排列
background-repeat : repeat-x 在x軸重復(fù)排列
background-repeat : repeat-y 在y軸重復(fù)排列
background-position : 90% 90% 背景圖片x與y軸的位置
鏈接
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過的連接文字格式
A:active 按下連接的格式
A:hover 鼠標(biāo)移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線
style="border:1px dashed pink
實(shí)線
style="border:1px solid pink
解析優(yōu)先級(jí)
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序爬舰。
內(nèi)聯(lián)樣式(inline style) > ID選擇符 > 類選擇符(class), 偽類(pseudo-class)和屬(attribute)選擇符 > 類別(type)们陆，偽對(duì)象(pseudo-element)
其中多重CSS樣式定義遵循一條原則:屬性追加寒瓦、重復(fù)最后優(yōu)先原則*
就是說兩個(gè)或多個(gè)或重復(fù)的樣式名定義情屹，瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復(fù)的屬性值杂腰，以最后定義的為準(zhǔn)垃你，如果應(yīng)用了兩個(gè)或多個(gè)樣式名，里面不重復(fù)定義的屬性值就追加上去喂很，重復(fù)的屬性值就以最后一個(gè)為準(zhǔn)。這里要注意的是，樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序针饥，而是樣式表里的樣式順序笤成。
