Web前端CSS教程
前面說了HTML，現(xiàn)在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。
什么是CSS？
Cascading Style Sheet
層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數(shù)據(jù)類型、控制語句...）
CSS其實(shí)是專門用來修飾HTML的，讓HTML更好看。
CSS是HTML的化妝品。
CSS是為HTML服務(wù)的，所以HTML還是主體，CSS是依附在HTML上的，
所以進(jìn)行CSS的開發(fā)，我們還是需要新建html/htm文件。
在HTML中怎么嵌入CSS樣式呢？
第一種方式：內(nèi)聯(lián)定義
第二種方式：定義內(nèi)部樣式塊對象
第三種方式：鏈入外部樣式表文件（這種方式最常用?。?/p>
關(guān)于選擇器的優(yōu)先級(jí)：
標(biāo)簽選擇器優(yōu)先級(jí)最低。
其次是類選擇器。
最高優(yōu)先級(jí)是id選擇器。
CSS設(shè)置背景(background)
背景顏色 background-color
背景圖片 background-image
背景重復(fù) background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景關(guān)聯(lián) background-attachment:fixed/scroll
綜合寫法：
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}
CSS設(shè)置文本格式
通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等。
文本縮進(jìn) ：Text-indent:2em
文本對齊方式：Text-align:left/right/center/ justify
文本修飾：Text-decoration:underline/line-through/overline/none
字符間距：Word-spacing:px/em 英文單詞之間的間隔；
Letter-spacing:px/em漢字和英文字母之間的間隔；
文本轉(zhuǎn)換：Text-transform:uppercase/lowercase/ capitalize
行與行間距：Line-height:px/%
垂直對齊圖像： vertical-align：text-top/text-bottom
文本陰影：text-shadow:水平偏移，垂直偏移 顏色
字體
字體類型:font-family:”sans-serif”;
字體樣式:font-style:normal ;
字體大小:font-size:20px/3.75em/100%;默認(rèn)大小為16px,字體為宋體
字體加粗:font-weight:normal;
字體的轉(zhuǎn)變:font-variant:normal/smallcaps;
CSS鏈接
鏈接的四種狀態(tài)
【注意】當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請按照以下次序規(guī)則：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
去掉a鏈接默認(rèn)的下劃線
text-decoration:{none/underline}
創(chuàng)建鏈接塊
display:block;
列表樣式
在一個(gè)無序列表中，列表項(xiàng)的標(biāo)志 (marker) 是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號(hào)。
要修改用于列表項(xiàng)的標(biāo)志類型，可以使用屬性 list-style-type：
上面的聲明把無序列表中的列表項(xiàng)標(biāo)志設(shè)置為方塊。
列表項(xiàng)圖像
你可能想對各標(biāo)志使用一個(gè)圖像，這可以利用 list-style-image 屬性做到：
列表標(biāo)志位置
CSS表格
表格邊框
折疊邊框
表格的寬度和高度
width,height
表格的文字水平對齊
text-align:center/right/left;
表格的文字垂直對齊
vertical-align:bottom;
表格的內(nèi)邊距
padding
表格的背景顏色
background
盒子模型
margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級(jí)元素之間的距離, 它們是透明不可見的。
根據(jù)上, 右, 下, 左的順時(shí)針規(guī)則, 簡寫為
margin: 40px 40px 40px 40px;
為便于記憶, 請參考下圖：
當(dāng)上下, 左右margin值分別一致, 可簡寫為:
margin: 40px 40px;
前一個(gè)40px代表上下margin值, 后一個(gè)40px代表左右margin值.
當(dāng)上下左右margin值均一致, 可簡寫為:
margin: 40px;
padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級(jí)元素內(nèi)部, content與border之間的距離
【注意】當(dāng)你想讓兩個(gè)元素的content在垂直方向(vertically)分隔時(shí), 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達(dá)到你的目的, 這是因?yàn)閏ss中存在Collapsing margins(折疊的margins)的現(xiàn)象.
邊框
邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
邊框?qū)挾龋篵order-width
邊框顏色：border-color
綜合寫法：
border:1px solid red;
輪廓(outline)
可以按順序設(shè)置如下屬性：
outline-color
outline-style
outline-width
CSS所有尺寸
寬度
width/min-width/max-width
高度
height/min-height/max-height
行高
line-height
display顯示類型
隱藏元素—–display:none或者visibility:hiddden
display通?？梢栽O(shè)置為none、inline、block
visibility通常可以設(shè)置為hidden、visible
二者的區(qū)別在于display會(huì)將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來的位置。
CSS塊級(jí)元素和內(nèi)聯(lián)元素—-display:block/inline/inline-block;
CSS定位(position)
position 屬性值的含義：
static
元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative
元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。
CSS浮動(dòng)
設(shè)置浮動(dòng)：float:left/right;
清除浮動(dòng)：clear:both/left/right/null;
浮動(dòng)的兩個(gè)影響因素：1、文檔流 2、顯示類型
元素內(nèi)容溢出
溢出滾動(dòng)條
overflow:scroll（不管是否溢出都會(huì)有滾動(dòng)條）、auto（自動(dòng)添加）
溢出隱藏
overflow:hidden;
CSS的相關(guān)特性
1、繼承性
它不僅允許樣式應(yīng)用于某個(gè)特定的html標(biāo)簽元素，而且還可引用于其后代；
2、CSS層疊
當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會(huì)被應(yīng)用，后面的CSS樣式會(huì)覆蓋前面的樣式。
總而言之：內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)>嵌入樣式表(當(dāng)前文件中)>外部樣式表(外部引入文件)
最后奉上視頻教程??，視頻觀看效果更佳！！走過路過別忘素質(zhì)三連哦~~
