CSS層疊樣式學(xué)習(xí)總結(jié)

1、-css3 總結(jié)01前綴 chrome: -webkit- safari: -webkit- firefo*: -moz- ie: -ms- opera: -o-書(shū)寫(xiě)的時(shí)候應(yīng)該先用有前綴的樣式，再用無(wú)前綴的樣式顏色 rgb(red, green, blue); rgba(red, green, blue, opacity0-1); hsl(色度， 飽和度， 亮度)；色度為色輪的度數(shù)，0/360d代表紅色，120代表綠色，240代表藍(lán)色；飽和度百分比值，100%表示完全顯示該顏色；亮度百分比值，0%代表黑色，100%代表白色，50%平均值圓角border-radius: 20p*;/水平，垂直b

2、order-radius: 20p*，20p*;/左上，右上，右下，左下border-radius: 20p*，20p* 20p* 20p*;下拉陰影/水平；垂直；模糊直徑；顏色bo*-shadow: 10p* 5p* 15p* *000;/陰影bo*-shadow: 10p* 5p* 15p* *000 inset;/水平；垂直；模糊直徑；延展距離;顏色bo*-shadow: 10p* 5p* 15p* 15p* *000;/多陰影bo*-shadow: 0 1p* 1p* *fff inset, 5p* 5p* 10p* *000;chromw:-webkit-;safari:-webki

3、t-;ie=9文本陰影/水平;垂直;顏色te*t-shandow: 1p* 1p* *fff;/水平;垂直;模糊直徑;顏色te*t-shandow: 1p* 1p* .3em *fff;漸變默認(rèn)下漸變是垂直方向的；也可以傳遞一個(gè)位置參數(shù)來(lái)改變方向linear-gradient(*ccc, *ddd, white);/設(shè)定一個(gè)傾斜度linear-gradient(-45deg, *ccc, *fff);/水平漸變linear-gradient(left, *ccc, *fff);/設(shè)置顏色停頓值linear-gradient(white, *ddd 20%, black);選擇器/選中的第一個(gè)元

4、素:first-child/選中的最后一個(gè)元素:last-child/選中的元素是其父元素的唯一子元素:only-child/選中當(dāng)前URL的哈希中的目標(biāo)元素:target/選中復(fù)選框以被勾選的元素:checked nth-child選擇器nth-child(n);nth-child(even);/nth-child(2n);nth-child(odd);/nth-child(2n+1); 直接后代選擇器 否認(rèn)選擇器:not(.current)ie=9過(guò)渡transition: 持續(xù)時(shí)間， 屬性， 動(dòng)畫(huà)類型;/多個(gè)動(dòng)畫(huà)transition: 2s opacity, .5s height eas

5、e-in;定時(shí)函數(shù)種類 linear ease-in ease-out ease-in-out例子div background: pink; width: 50p*; height: 50p*; -moz-transition: 2s width ease-in, 2s height ease-out; /* Firefo* 4 */ -webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */ -o-transition: 2s width ease-in, 2s height ease-o

6、ut; /* Opera */ transition: 2s width ease-in, 2s height ease-out;div:hover width: 100p*; height: 150p*;div position: absolute; left: 10p*; -moz-transition: 2s left -webkit-transition: 2s left; -o-transition: 2s left ; transition:2s left; div:hover position: absolute; left: 100p*; firefo*:-moz-;chrom

7、e:-webkit-; safari: -webkit-; ie=10; opear: -o-;css3 總結(jié)03bo*-fle*: 設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配其剩余空間。abc*bo*display:bo*;width:240p*;height:100p*;margin:0;padding:10p*;list-style:none;*bo* li:nth-child(1)bo*-fle*:1;*bo* li:nth-child(2)bo*-fle*:1;*bo* li:nth-child(3)bo*-fle*:2;注意bo*-fle*只是動(dòng)態(tài)分配父元素的剩余空間，而不是整個(gè)父元

8、素的空間。如上例，父元素*bo*的寬度為240p*，如果你認(rèn)為a,b,c的寬度分別為60, 60, 120則就錯(cuò)了，因?yàn)閎o*-fle*只是分配父元素的剩余空間而已，所以a,b,c所分到的應(yīng)該是除容外所剩余下來(lái)的寬度bo*-fle*-group: 設(shè)置或檢索彈性盒模型對(duì)象的子元素的所屬組。bo*-ordinal-group: 設(shè)置或檢索彈性盒模型對(duì)象的子元素的顯示順序。bo*-direction: 設(shè)置或檢索彈性盒模型對(duì)象的子元素的排列順序是否反轉(zhuǎn)。bo*-lines: 設(shè)置或檢索彈性盒模型對(duì)象的子元素是否可以換行顯示。.hbo* display: -webkit-bo*; -webkit-b

9、o*-orient: horizontal; -webkit-bo*-align: stretch; -webkit-bo*-pack: start; display: -moz-bo*; -moz-bo*-orient: horizontal; -moz-bo*-align: stretch; -moz-bo*-pack: start; .vbo* display: -webkit-bo*; -webkit-bo*-orient: vertical; -webkit-bo*-align: stretch; display: -moz-bo*; -moz-bo*-orient: vertica

10、l; -moz-bo*-align: stretch; 上面將display設(shè)置為-webkit-bo*或-moz-bo*-，然后設(shè)置子元素布局的方向。默認(rèn)情況下，所有子元素都將自動(dòng)擴(kuò)大為父元素一樣的大小。但通過(guò)設(shè)置bo*-fle*屬性卻可以修改默認(rèn)行為*sidebar -webkit-bo*-fle*: 0; -moz-bo*-fle*: 0; bo*-fle*: 0;width: 200p*;*content -webkit-bo*-fle*: 1; -moz-bo*-fle*: 1; bo*-fle*：1；如果設(shè)置bo*-fle*為0，就指定了該元素不允許擴(kuò)大；相反設(shè)置1或更大的數(shù)值該元

11、素會(huì)自動(dòng)擴(kuò)大可利用的容空間。上面對(duì)側(cè)邊欄設(shè)置fle*為0；而主容區(qū)設(shè)置fle*為1字體font-face font-family: Bitstream src: url(/Bitstream.ttf);*font-e*ample font-family: Bitstream;css實(shí)例-文字/字體使用自定義字體： 在CSS2中font-family屬性只能使用兩個(gè)字體： 通用字體：Serif字體，Sans-serif字體，Monospace字體，Cursive字體,Fantasy字體; 特定字體：如Times,Courier等，要求計(jì)算機(jī)已經(jīng)安裝該字體；使用font-face：1234567f

12、ont-facefont-family:e*ample;src:url(e*ample.ttf) , url(e*ample.eot);/*IE9+*/divfont-family:e*ample;文本縮進(jìn)和首字符下沉： 縮進(jìn)：te*t-indent; 首字符設(shè)置： :first-letter;文本被選中：123:selection/老版本的firefo*:-moz-selection調(diào)整文字，字符間距： demo: word-spacing：空格距離； letter-spacing：子間距離； line-heigh：文本行間距； white-space：空格，換行符的控制； 強(qiáng)制換行：wor

13、d-wrap: break-word;word-break: normal;文字陰影/框陰影： te*t-shadow： h-shadow(必須) v-shadow(必須) blur color; 文字毛玻璃效果： bo*-shadow:h-shadow(必須) v-shadow(必須) blur spread color inset;文本溢出處理： demo: overflow：主要在對(duì)高度的處理，如果寬度不夠，默認(rèn)會(huì)換行； te*t-overflow：主要對(duì)寬度的處理，在設(shè)置white-space: nowrap; 阻止換行之后可以設(shè)置默認(rèn)clip或省略ellipsis;高級(jí)文字設(shè)置： 金

14、屬質(zhì)感文字 linear-gradient:(direction, color-stop1, color-stop2, .);隱藏文本： 使用display; 使用opacity; 使用te*t-indent;1234h1te*t-indent:-9999p*. 使用定位；12345h1position:absolute;top:-9999p*;left:-9999p*;文字旋轉(zhuǎn)：123-ms-transform: rotate(30deg);/* IE 9 */-webkit-transform: rotate(30deg);/* Chrome, Safari, Opera */transf

15、orm: rotate(30deg);構(gòu)造性偽類E:root匹配文檔的根元素。在HTML標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用中，根元素永遠(yuǎn)是HTML構(gòu)造性偽類E:nth-child(n)匹配父元素中的第n個(gè)子元素E構(gòu)造性偽類E:nth-last-child(n)匹配父元素中的倒數(shù)第n個(gè)構(gòu)造子元素E構(gòu)造性偽類E:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素E構(gòu)造性偽類E:nth-last-of-type(n)匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E構(gòu)造性偽類E:last-child匹配父元素中最后一個(gè)E元素構(gòu)造性偽類E:first-of-type匹配同級(jí)兄弟元素中的第一個(gè)E元素構(gòu)造性偽類E

16、:only-child匹配屬于父元素中唯一子元素的E構(gòu)造性偽類E:only-of-type匹配屬于同類型中唯一兄弟元素的E構(gòu)造性偽類E:empty匹配沒(méi)有任何子元素包括te*t節(jié)點(diǎn)的元素E一、E:root，匹配文檔的根元素二、E:nth-child(n),匹配父元素的第n個(gè)孩子元素Enth-child選擇的是父元素的子元素，其中要滿足兩個(gè)條件：沒(méi)有規(guī)定確切的類型，只要是子元素；該元素要在第n的位置。只需要看在父元素下的第n個(gè)孩子是否是E，如果是則就匹配否則就不匹配。 p:nth-child(2):選擇的是父元素的第二個(gè)P類型的孩子節(jié)點(diǎn)，p:nth-of-type(2)：選擇的是父元素的所有孩子

17、節(jié)點(diǎn)的P類型的第二個(gè)。對(duì)于理解了E:nth-child(n)之后，對(duì)于構(gòu)造偽類的理解很有幫助，其他類型都是在這個(gè)的根底上的特殊情況。另外，構(gòu)造偽類中一個(gè)比較特殊的用法是選擇指定的元素的位置。nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)中的N在選擇器中的使用，這個(gè)參數(shù)可以是整數(shù)(1、2、3、4)、關(guān)鍵之(odd、even)，還可以是公式2n+1、-n+5.但參數(shù)n的起始值始終是1而不是0.1、參數(shù)可以是數(shù)值；2、參數(shù)n為表達(dá)式【n*length】:單length為整數(shù)1時(shí)，將選擇整個(gè)系列中的所有元素，直到元素?zé)o

18、法選擇為止。例如：:nth-child(2n)n = 0時(shí)，2*0 = 0,不選任何元素；n = 1時(shí)，2*1 = 2，選中的是系列中的第2個(gè)元素；3、參數(shù)n為表達(dá)式n+length，例如：:nth-child(n+3)n = 0時(shí)，0 + 3 = 3，選中的是第3個(gè)元素；n = 1時(shí)，1 + 3 = 4，選中的是第4個(gè)元素；4、參數(shù)n為表達(dá)式【-n+length】，例如：:nth-child(-n+3) n = 0時(shí)，-0 + 3 = 3，選中的是第3個(gè)元素；n = 1時(shí)，-1 + 3 = 2，選擇的是第2個(gè)元素； 當(dāng)為負(fù)數(shù)的時(shí)候，不選擇任何元素。5、如果n的表達(dá)式為【2*n+1】或者【2*

19、n-1】，則此時(shí)與odd的效果一樣，一樣的【2n】與even的效果是一樣的這里有一個(gè)比較特別的用法就是從父元素的相反方向進(jìn)展匹配，:last-child,:nth-last-child,:nth-last-of-type(n),:last-of-type，這幾個(gè)選擇器都是從父元素的最后一個(gè)開(kāi)場(chǎng)匹配。為了方便記憶和查詢，把CSS的構(gòu)造偽類選擇器歸為四類：1通用子元素過(guò)濾器：E:nth-child(n)順序過(guò)濾和E:nth-last-child(n)(逆序過(guò)濾)2通用子類型元素過(guò)濾器：E:nth-of-type順序過(guò)濾和E:nth-last-of-type(n)(逆序過(guò)濾)3特定位置的子元素：E:

20、first-child,E:last-child,E:first-of-type,E:last-of-type4特定狀態(tài)的元素：E:root根節(jié)點(diǎn)、E:only-child獨(dú)子元素、E:only-of-type獨(dú)子類型元素和E:empty孤節(jié)點(diǎn)CSS介紹CSS全稱為“層疊樣式表 (Cascading Style Sheets)，它主要是用于定義HTML容在瀏覽器的顯示樣式，如文字大小、顏色、字體加粗等。選擇符：又稱選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的元素。聲明：在英文大括號(hào)“中的的就是聲明，屬性和值之間用英文冒號(hào)“：分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;分隔，如下所示：pfont-size:

21、12p*;color:red;注意：1、最后一條聲明可以沒(méi)有分號(hào)，但是為了以后修改方便，一般也加上分號(hào)。2、為了使用樣式更加容易閱讀，可以將每條代碼寫(xiě)在一個(gè)新行，如下所示：pfont-size:12p*;color:red;CSS中也有注釋語(yǔ)句：用/*注釋語(yǔ)句*/來(lái)標(biāo)明，Html中使用。CSS樣式的根本知識(shí)CSS 樣式代碼插入的形式來(lái)看根本可以分為以下3種：聯(lián)式、嵌入式和外部式三種。一、聯(lián)式css樣式表就是把css代碼直接寫(xiě)在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：這里文字是紅色。二、嵌入式css樣式，就是可以把css樣式代碼寫(xiě)在標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把標(biāo)簽中的文字設(shè)置為紅色：spancolor:

22、red;嵌入式css樣式必須寫(xiě)在之間，并且一般情況下嵌入式css樣式寫(xiě)在之間。三、外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫(xiě)一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css為擴(kuò)展名，在不是在標(biāo)簽使用標(biāo)簽將css樣式文件到HTML文件，如下面代碼：注意：1、css樣式文件名稱以有意義的英文字母命名，如 main.css。2、rel=stylesheet type=te*t/css 是固定寫(xiě)法不可修改。3、標(biāo)簽位置一般寫(xiě)在標(biāo)簽之。三種方法的優(yōu)先級(jí)，聯(lián)式 嵌入式 外部式，就近原則離被設(shè)置元素越近優(yōu)先級(jí)別越高。但注意上面所總結(jié)的優(yōu)先級(jí)是有一個(gè)前提：聯(lián)式、嵌入式、外部式樣式表中css樣式是

23、在的一樣權(quán)值的情況下。CSS選擇器每一條css樣式聲明定義由兩局部組成，形式如下：選擇器樣式；在之前的局部就是“選擇器，“選擇器指明了中的“樣式的作用對(duì)象，也就是“樣式作用于網(wǎng)頁(yè)中的哪些元素。一、標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。例如下面代碼：pfont-size:12p*;line-height:1.6em;上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12p*字號(hào)，行間距設(shè)置1.6em的樣式。二、類選擇器：先在元素中設(shè)置class屬性及屬性名，然后在嵌入、外部樣式中以.類名 樣式 “選中并設(shè)置樣式；注意點(diǎn).“要在英文輸入法下輸入，可別忘記哦。class名可任意取，但不可為中文。語(yǔ)法：.類名

24、樣式三、ID選擇器在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：1、為標(biāo)簽設(shè)置id=ID名稱，而不是class=類名稱。2、ID選擇符的前面是井號(hào)*號(hào)，而不是英文圓點(diǎn).。ID選擇器與類選擇器一樣點(diǎn)：可以應(yīng)用于任何元素不同點(diǎn)：1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用屢次。四、子選擇器，即大于符號(hào)(),用于選擇指定標(biāo)簽元素的第一代子元素。如下代碼：.foodliborder:1p* solid red;這行代碼會(huì)使class名為food下的子元素li參加紅色實(shí)線邊框。五、包含選擇器，即參加空格,

25、用于選擇指定標(biāo)簽元素下的后代元素。如下代碼：.first spancolor:red;請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器child selector僅是指它的直接后代或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素后代選擇器通過(guò)空格來(lái)進(jìn)展選擇，而子選擇器是通過(guò)“進(jìn)展選擇。總結(jié)：作用于元素的第一代后代，空格作用于元素的所有后代。六、通用選擇器它使用一個(gè)*號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：*color:red;七、偽類選擇符，它允許給html不存在的標(biāo)簽標(biāo)簽的*種狀態(tài)設(shè)置樣式，比方說(shuō)我

26、們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過(guò)的狀態(tài)來(lái)設(shè)置字體顏色：a:hovercolor:red;上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過(guò)的狀態(tài)設(shè)置字體顏色變紅。八、分組選擇符，當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符，如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：h1,spancolor:red;它相當(dāng)于下面兩行代碼：h1color:red;spancolor:red;CSS的繼承性、特殊性、層疊性、重要性CSS的繼承性繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于*個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。pcolor:red;三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小

27、女孩。這個(gè)顏色設(shè)置不僅應(yīng)用p標(biāo)簽，還應(yīng)用于p標(biāo)簽中的所有子元素文本，這里子元素為span標(biāo)簽。但注意有一些css樣式是不具有繼承性的。如border:1p* solid red;pborder:1p* solid red;三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框?yàn)?像素、紅色、實(shí)心邊框線，而對(duì)于子元素span是沒(méi)用起到作用的。CSS的特殊性有的時(shí)候我們?yōu)橥粋€(gè)元素設(shè)置了不同的CSS樣式代碼，則元素會(huì)啟用哪一個(gè)CSS樣式呢?我們來(lái)看一下面的代碼：pcolor:red;.firstcolor:green;三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。p和.fir

28、st都匹配到了p這個(gè)標(biāo)簽上，則會(huì)顯示哪種顏色呢.green是正確的顏色，則為什么呢.是因?yàn)闉g覽器是根據(jù)權(quán)值來(lái)判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。下面是權(quán)值的規(guī)則：標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。例如下面的代碼：pcolor:red; /*權(quán)值為1*/p spancolor:green; /*權(quán)值為1+1=2*/.warningcolor:white; /*權(quán)值為10*/p span.warningcolor:purple; /*權(quán)值為1+1+10=12*/*footer .note pcolor:yellow; /*權(quán)值為100+10+1

29、=111*/注意：還有一個(gè)權(quán)值比較特殊-繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。CSS的層疊性層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有一樣權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來(lái)決定，處于最后面的css樣式會(huì)被應(yīng)用。如下面代碼:pcolor:red;pcolor:green;三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。最后 p 中的文本會(huì)設(shè)置為green，這個(gè)層疊很好理解，理解為后面的樣式會(huì)覆蓋前面的樣式。所以前面的css樣式優(yōu)先級(jí)就不難理解了：聯(lián)樣式表標(biāo)簽部 嵌入樣式表當(dāng)前文件中 外部樣式表外部文件中。CSS重要性我們?cè)谧鼍W(wǎng)頁(yè)代碼的時(shí)，有些特殊的情況需