Web前端總結(jié)：
Web前端：HTML最強(qiáng)總結(jié) 附詳細(xì)代碼
Web前端：CSS最強(qiáng)總結(jié) 附詳細(xì)代碼
Web前端：JavaScript最強(qiáng)總結(jié) 附詳細(xì)代碼
Web前端：CSS最強(qiáng)總結(jié) 附詳細(xì)代碼
基本知識(shí)
基本概念
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。
層疊:多個(gè)樣式可以作用在同一個(gè)html的元素上，同時(shí)生效
-
樣式定義如何顯示HTML 元素
-
樣式通常存儲(chǔ)在樣式表中
-
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
-
外部樣式表可以極大提高工作效率
-
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)CSS很像化妝，通過不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。 所以，前端程序員相互表白的時(shí)候可以說:you are the CSS to my HTML. 這是不是CSS是對(duì)HTML進(jìn)行美化和布局作用的最好總結(jié)?
優(yōu)點(diǎn)
-
功能強(qiáng)大
-
將內(nèi)容展示和樣式控制分離
降低耦合度。解耦
讓分工協(xié)作更容易
提高開發(fā)效率
CSS的使用
CSS與html結(jié)合使用
根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式
行內(nèi)樣式
也稱為內(nèi)聯(lián)樣式
直接在標(biāo)簽中編寫樣式，通過使用標(biāo)簽內(nèi)部的style屬性;
代碼樣式：
弊端:只能對(duì)當(dāng)前的標(biāo)簽生效，沒有做到內(nèi)容和樣式相分離，耦合度太高。
內(nèi)部樣式
定義在head標(biāo)簽內(nèi)，通過style標(biāo)簽，該標(biāo)簽內(nèi)容就是CSS代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>內(nèi)部樣式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>
區(qū)別
-
作用域的范圍：外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表
-
優(yōu)先級(jí)：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;
-
同樣的樣式作用在同一個(gè)標(biāo)簽身上：就近原則。
-
不同樣式作用在同一個(gè)標(biāo)簽身上，疊加生效。
CSS語法
基本格式由兩個(gè)主要的部分構(gòu)成：
基本選擇器
篩選具有相似特征的元素
id選擇器
選擇具有相同id屬性值的元素，建議html頁(yè)面中的id值唯一
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 “#” 來定義。
PS: ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個(gè)元素可以使用同一個(gè)id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對(duì)多個(gè)標(biāo)簽生效， 使用class選擇器。
class選擇器
選擇具有相同的class屬性值的元素。
-
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器。
-
class可以在多個(gè)元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示
PS：類名的第一個(gè)字符不能使用數(shù)字!它無法在 Mozilla 或 Firefox 中起作用
元素選擇器/標(biāo)簽選擇器
選擇具有相同標(biāo)簽名稱的元素。
定義選擇器語法:標(biāo)簽名稱{};PS:標(biāo)簽名稱必須是html提供好的標(biāo)簽。
使用標(biāo)簽選擇器:自動(dòng)使用在所有的同名的標(biāo)簽上
優(yōu)先級(jí)
選擇器的優(yōu)先級(jí)
ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
當(dāng)多個(gè)選擇器作用在同一個(gè)標(biāo)簽上的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突，樣式疊加生效
樣式表的優(yōu)先級(jí)
行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式
同樣，三個(gè)樣式表中都有內(nèi)容作用在同一個(gè)html標(biāo)簽的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突， 樣式疊加生效
CSS常用樣式
color：字體顏色
跟顏色相關(guān)的取值分3種:
-
顏色的單詞 red blue…
-
rgb(紅，綠，藍(lán))三色的取值范圍是0-255 rgb(255,0,0)
rgba(紅，綠，藍(lán),透明度)，透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
-
#值1值2值3 :值的范式是00-FF 十六進(jìn)制數(shù)字組成的 例如:#FF0000
width height：寬高
PS:只有塊狀元素可以設(shè)置寬高，行級(jí)元素設(shè)置不生效
取值方式有2種:
-
數(shù)值 絕對(duì)數(shù)字 單位是像素PX
-
百分比:占據(jù)父元素的比例
背景樣式
文本樣式
列表樣式
邊框樣式
HTML&CSS調(diào)試?yán)?
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁(yè)面的所有標(biāo)簽，在styles中可以看到html元素對(duì)應(yīng)的樣式。
交集選擇器
條件:交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足:既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)。
語法:h3.class{ color:red; } 其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即…又…的意思
例如: table.bg 選擇的是: 類名為 .bg 的 表格標(biāo)簽，但用的相對(duì)來說比較少。
后代選擇器
概念
后代選擇器又稱為包含選擇器。
作用
用來選擇元素或元素組的子孫后代
其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔，先寫父親爺爺，再寫兒子孫子。
格式:父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}
語法:.class h3{color:red;font-size:16px;}
當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。 子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。
子元素選擇器
作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。 其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接。
語法:.class>h3{color:red;font-size:14px;}
比如：
.demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3
轉(zhuǎn)自：csdn論壇 ，
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
