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

1、-css3 總結(jié)01前綴 chrome: -webkit- safari: -webkit- firefo*: -moz- ie: -ms- opera: -o-書寫的時候應該先用有前綴的樣式，再用無前綴的樣式顏色 rgb(red, green, blue); rgba(red, green, blue, opacity0-1); hsl(色度， 飽和度， 亮度)；色度為色輪的度數(shù)，0/360d代表紅色，120代表綠色，240代表藍色；飽和度百分比值，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;漸變默認下漸變是垂直方向的；也可以傳遞一個位置參數(shù)來改變方向linear-gradient(*ccc, *ddd, white);/設(shè)定一個傾斜度linear-gradient(-45deg, *ccc, *fff);/水平漸變linear-gradient(left, *ccc, *fff);/設(shè)置顏色停頓值linear-gradient(white, *ddd 20%, black);選擇器/選中的第一個元

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

5、e-in;定時函數(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è)置或檢索彈性盒模型對象的子元素如何分配其剩余空間。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*只是動態(tài)分配父元素的剩余空間，而不是整個父元

8、素的空間。如上例，父元素*bo*的寬度為240p*，如果你認為a,b,c的寬度分別為60, 60, 120則就錯了，因為bo*-fle*只是分配父元素的剩余空間而已，所以a,b,c所分到的應該是除容外所剩余下來的寬度bo*-fle*-group: 設(shè)置或檢索彈性盒模型對象的子元素的所屬組。bo*-ordinal-group: 設(shè)置或檢索彈性盒模型對象的子元素的顯示順序。bo*-direction: 設(shè)置或檢索彈性盒模型對象的子元素的排列順序是否反轉(zhuǎn)。bo*-lines: 設(shè)置或檢索彈性盒模型對象的子元素是否可以換行顯示。.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è)置子元素布局的方向。默認情況下，所有子元素都將自動擴大為父元素一樣的大小。但通過設(shè)置bo*-fle*屬性卻可以修改默認行為*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，就指定了該元素不允許擴大；相反設(shè)置1或更大的數(shù)值該元

11、素會自動擴大可利用的容空間。上面對側(cè)邊欄設(shè)置fle*為0；而主容區(qū)設(shè)置fle*為1字體font-face font-family: Bitstream src: url(/Bitstream.ttf);*font-e*ample font-family: Bitstream;css實例-文字/字體使用自定義字體： 在CSS2中font-family屬性只能使用兩個字體： 通用字體：Serif字體，Sans-serif字體，Monospace字體，Cursive字體,Fantasy字體; 特定字體：如Times,Courier等，要求計算機已經(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;文本縮進和首字符下沉： 縮進：te*t-indent; 首字符設(shè)置： :first-letter;文本被選中：123:selection/老版本的firefo*:-moz-selection調(diào)整文字，字符間距： demo: word-spacing：空格距離； letter-spacing：子間距離； line-heigh：文本行間距； white-space：空格，換行符的控制； 強制換行：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：主要在對高度的處理，如果寬度不夠，默認會換行； te*t-overflow：主要對寬度的處理，在設(shè)置white-space: nowrap; 阻止換行之后可以設(shè)置默認clip或省略ellipsis;高級文字設(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標準通用標記語言下的一個應用中，根元素永遠是HTML構(gòu)造性偽類E:nth-child(n)匹配父元素中的第n個子元素E構(gòu)造性偽類E:nth-last-child(n)匹配父元素中的倒數(shù)第n個構(gòu)造子元素E構(gòu)造性偽類E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素E構(gòu)造性偽類E:nth-last-of-type(n)匹配同類型中的倒數(shù)第n個同級兄弟元素E構(gòu)造性偽類E:last-child匹配父元素中最后一個E元素構(gòu)造性偽類E:first-of-type匹配同級兄弟元素中的第一個E元素構(gòu)造性偽類E

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

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

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

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

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

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

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

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

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

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

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

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

28、st都匹配到了p這個標簽上，則會顯示哪種顏色呢.green是正確的顏色，則為什么呢.是因為瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。下面是權(quán)值的規(guī)則：標簽的權(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*/注意：還有一個權(quán)值比較特殊-繼承也有權(quán)值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權(quán)值最低。CSS的層疊性層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當有一樣權(quán)重的樣式存在時，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應用。如下面代碼:pcolor:red;pcolor:green;三年級時，我還是一個膽小如鼠的小女孩。最后 p 中的文本會設(shè)置為green，這個層疊很好理解，理解為后面的樣式會覆蓋前面的樣式。所以前面的css樣式優(yōu)先級就不難理解了：聯(lián)樣式表標簽部 嵌入樣式表當前文件中 外部樣式表外部文件中。CSS重要性我們在做網(wǎng)頁代碼的時，有些特殊的情況需