CSS知識點筆記
1.作用:美化和修飾HTML。又叫層疊樣式表,樣式表,級聯樣式表。
2.優點:
1.可以更好的將格式與結構分離。
2.可以更好的控制頁面的佈局。
3.可以製作體積更小,下載更快的網頁。
4.可以將多個網頁同時更新,比以前更快更容易。
3.使用CSS的三種方式:
1.內聯式,即將樣式定義在單個HTML元素中。
語法:<ANY style="樣式宣告1:值1;樣式宣告2:值2;-----">。
2.內部樣式表,將樣式定義在<head><style>選擇器(即標記名如p.div){ 若干樣式宣告 }</style></head>標記中。
3.外部樣式表,將樣式宣告定義在獨立的css檔案(.css)中,在網頁中使用。語法:<head><link rel="Stylesheet" href=".css"><head>
4.CSS的特徵:
1.繼承性,即父元素的一些樣式,可以繼承給子元素直接使用。
2.層疊性,一個元素宣告多個不衝突的樣式規則,可以全部應用。
3.優先性,瀏覽器的預設設定(User Agent Stylesheet)<內部樣式表和外部樣式表(後定義者優先)<內聯方式。
4.!important,在屬性值後面新增!important強調其最優先。
5.選擇器:
1).定義作用:規範哪些元素可以用宣告好的樣式。
2).基礎選擇器的分類:
1.通用選擇器:語法:*{若干樣式宣告}。
2.元素選擇器:某標記對應的所有元素。語法:標記名{若干樣式宣告}。
3.類選擇器:標記元素的class屬性值加上前面的 . 號作為選擇器。語法: .類名{若干樣式宣告}。用法:1.執行一個元素同時又多個類選擇器<ANY class="class1 class2class3">。2.元素名 . 類名{若干樣式宣告} 。
4.ID選擇器:元素的ID值作為選擇器。語法:#ID值{若干樣式宣告}。
5.群組選擇器:多個或多種選擇器放在一起,用逗號隔開一起宣告。語法:選擇器1,選擇器2,選擇器3---{若干樣式宣告}。
6.後代選擇器: 語法:選擇器1 選擇器2{若干樣式宣告}。
7.子代選擇器: 語法:選擇器1>選擇器2{若干樣式宣告}。
8.偽類選擇器:匹配某些元素的不同狀態,如超連結單擊前中後字型顏色效果。
語法: (選擇器):偽類選擇器{若干樣式宣告}。
分類:
1、連結偽類:專門控制 a 標記效果的偽類選擇器
(1)、:link:定義超連結未被訪問時的樣式效果
(2)、:visited:定義超連結訪問後的樣式效果。
2、動態偽類:
(1)、:hover:定義滑鼠懸停在元素上的時候的效果。
(2)、:active:定義元素被啟用的瞬間的樣式效果(被點選的一瞬間)。
(3)、:focus:定義元素獲取焦點時的樣式效果。
9.複雜的選擇器;
(1)兄弟選擇器:兄弟元素——具備相同父元素的平級元素稱之為“兄弟元素”。
注意:兄弟選擇器,只能向後找,不能向前找。
1).相鄰兄弟選擇器:作用——獲取緊緊挨在某元素後的兄弟元素。語法:選擇器1+選擇器 2{ 若干樣式宣告 }。
2).通用兄弟選擇器:作用——獲取某元素後所有滿足條件的兄弟元素。語法:選擇器1~選 擇器2 { 若干樣式宣告 }。
(2)屬性選擇器:作用——允許通過元素所附帶的屬性及其值來匹配元素。語法:
1.[attr ] attr表示頁面中所有元素的任意屬性名稱。如[id] [class],表示匹配頁面 中所有附帶id ,class屬性的元素。
2.選擇器[ attr ],表示匹配附帶attr屬性並滿足指定選擇器的元素。 如div[id], .ipc[name]。
3.[attr2][attr1],表示匹配同時附帶attr1,attr2屬性的頁面元素。
4.[attr=value],表示匹配attr屬性值為value的元素,其中這個value,可以用引號也可不用引號。
5.[attr&=val][attr^=val][attr*=val],分別表示屬性值以val開頭,以val結尾,包含val;
(3)偽類選擇器:作用——為了匹配元素不同的狀態。
1.目標偽類;突出顯示獲得的html錨點元素。即跳到錨點記號上時,記號的樣式,匹配被啟用的錨點。語法: :target{} ,如:div:target{}.
2.結構偽類:作用——通過元素之間的結構關係來匹配元素。
1). :first-child;表示匹配的元素是屬於父元素的第一個子元素。
2). :last-child;表示匹配的元素是屬於父元素的最後一個子元素。
3). :nth-child(n),表示匹配元素是屬於其父元素中的第n個子元素,如 :nth-child(1) ===first-child;
4).empty 匹配沒有子元素的元素。
5).only-child,匹配只有其父元素只有唯一一個子元素的元素。
3.否定偽類:作用——將滿足指定選擇器的元素給排除出去。語法: :not(元素選擇器 )。如 tr:not(:first-child){};
4.偽元素選擇器:偽類——匹配的是完整的元素;偽元素——某元素中的部分內容。語法:1.:first-letter(::first-tletter),匹配某個元素的首字元。
2. :first-line(::first-line),匹配某個元素的首行。
3. ::selection,匹配被使用者選取的內容。注意:此選擇器只能修改背景顏色和文字顏色,需要2個冒號。
5.內容生成;:after/:before{content:""}使用css向某元素內插入一段內容。content:該屬性也可應用於div中新增圖片content:url(...);
6.:enabled/:disabled/:checked/;分別表示被啟用,被禁用,被選中(單選/複選按鈕);
7.新增一個屬性值initial:可直接取消某個元素的指定樣式使其變為預設值;如color:initial;
(4)偽元素選擇器:
1. : before(::before),匹配到某元素內容區域之前。
2. :after(::after),匹配到某元素內容區域之後。
3.屬性——content,向匹配到的位置處增加內容。如: div:before{ content:"字串"/url();} 在:after/before{這裡面的屬性都是針對content}。
4.解決浮動元素父元素高度的問題,解決外邊距的溢位問題。
(5).彈性佈局(Flexible Layout ,又叫可伸縮佈局,常用來替換<frame>);
1).為了解決某元素中子元素的佈局方式,為佈局提供最大的靈活性。
2).彈性佈局的容器,即父元素。彈性佈局的專案,即要實現佈局效果的元素,簡稱為專案。
主軸(Aain Axsis),決定專案們排列順序的一根軸,如果按X(Y)軸排列,那X(Y)就是主軸。交叉軸(Cross Axsis),與主軸相交叉的那根軸。
3).語法:
1.彈性佈局的容器,只有將元素變為彈性佈局的容器後,子元素們才能按照彈性佈局的方式進行排列。將該父元素新增一個屬性display:flex/inline-flex;分別表示將塊級元素邊彈性容器,將行內元素邊彈性容器。注意:元素變彈性容器後,子元素的float,clear,vertical-align將全部失效,且子元素變為塊級元素,可以修改尺寸,且容器的text-align也會失效。
2.容器的屬性,該組屬性載入容器上,負責控制所有專案的特徵的。屬性——
1).flex-direction;指定容器的主軸及其排列方向,X軸為預設主軸。取值:row/row-reverse/column/columu-reverse分別表示預設值主軸為X軸且從左到右排列,主軸為X軸且從右向左排列,主軸為Y軸且起點在頂端,主軸為Y軸且起點在底端。
2).flex-wrap;當一個主軸排列顯示不了所有子元素(專案)時,可以指定換行方式。取值:nowrap/wrap/wrap-reverse/;分別表示預設值不換行直接壓縮子元素(專案)寬度,向下左邊換行,向上左邊換行。
3).flex-flow;是flex-direction和flex-wrap的縮寫;取值:row nowrap/direction wrap;分別表示預設值,分別取值。
4).justify-content;作用——定義專案在主軸上對齊方式。取值:flex-start/flex-end/center/space-between/space-around;分別表示在主軸的起點對齊,在主軸的終點對齊,在 主軸的居中對齊,兩端對齊,讓每個專案兩端的距離是相等的。
5).align-items,定義專案在交叉軸上的對齊方式。取值:flex-start/flex-end/center/baseline/strentch;分別表示在交叉軸的起點對齊,終點對齊,居中對齊,基線對齊,將在交叉軸上佔滿所有的空間。
6.尺寸;
(1).尺寸單位:px,pt(磅/點 1pt=1/72英寸),%,cm,mm,em(佔父元素倍數),rem(佔根元素倍數),in(1英寸=2.54cm)。
1).顏色單位:rgb,rgba,#rrggbb,#rgb,英文單詞。
2).尺寸的屬性:width/height,max-width/height,min-width/height。
(2).允許修改尺寸的元素:所有的塊級元素(div,p,h#---),除單複選外的控制元件,img和table。
(3).溢位處理:屬性——overflow,overflow-x,overflow-y。
取值——visible(預設值,溢位可見),hidden(溢位隱藏),scroll(顯示滾動條),auto(溢位才顯示滾動條)。
7.邊框:邊框的屬性語法:border:width style(solid/dotted/dashed) color; 表示四邊的設定線寬,線型別,線顏色。
(1).邊框的細分:單邊多屬性(border-方向:width style color),單邊單屬性(border-方向-屬性:屬性值),多邊單屬性(border-屬性:屬性值)。
(2).特殊情況:不顯示邊框,邊框矩形由4個三角形組成。
(3).邊框倒角:屬性——border-(某個角)-radius: 表示4個角(某個角)的倒角。取值——以px,或百分比為單位的數值。
(4).邊框的陰影:屬性——box-shadow;取值——h-shadow v-shadow blur spread color insert; 分別表示水平,垂直位移(正負,以px,或百分比為單位),模糊大小,陰影大小,陰影顏色,內陰影。
(5).邊框輪廓:指在邊框外加一層輪廓。屬性——outline:width style color;
8.框模型:頁面元素皆為框,框模型(Box-Model)定義了內容,內邊距,外邊距的一種方式。
(1).外邊距:屬性——margin-(某個方向);表示四個方向(某個方向的外邊距距離),多個方向取值可以簡寫。取值——1.以px,百分比為單位的正負數字。其中正負表示上下左右移動。2.auto,必須是塊級元素設定了寬度下,水平居中。
(2).預設具有外邊的元素——body,h#,p,pre,ol,ul,dd,dl; 可以通過margin:0px設定外邊距為0。
(3).外邊距的合併以及外邊距的溢位。
(4).內邊距:屬性——padding;與外邊一樣的用法。
(5).重置框模型的計算方式:屬性——box-sizding:content-box(預設值)/border-box;
9.背景屬性:
(1).背景顏色——background-color :顏色值;
(2).背景圖片——background-image: url(圖片的路徑);
(3).背景圖片重複——background-repeat: repeat/repeat-x/repeat-y/no-repeat;分別表示預設值,橫向,縱向,不平鋪。
(4).背景圖片大小——background-size: x y/x% y%/cover/contain; 分別表示以px為單位,百分為單位,全覆蓋,不一定全覆蓋。
(5).背景圖片的固定——background-attachment: scroll/fixed; 分別表示預設值隨滾動條滾動,固定不隨滾動條滾動。
(6).背景圖片位置——background-position: x y/x% y% / 關鍵字 關鍵字; 分別表示以x y 方向的pt為單位的位置,百分比為單位的位置,左右上下中關鍵字。
(7).背景圖片的簡寫——background: color url() repeat attachment position;定義多背景圖,即在一個元素中顯示多個背景影象,還可以將背景影象進行重疊,即將上面屬性依次賦值多個並用逗號隔開;
10.漸變:
(1).漸變的主要因素——色標:即顏色和位置。
(2).漸變的三種方式——線性,徑向,二者組合。
(3).線性漸變:屬性——background-image: linear-gradient(angle,color- point1,...);angle-填充方向,取值為to top/to right/toleft/tobottom或者以deg為單位的0~360度。color-point:色標,即顏色和位置。如red 0%,blue 50% 。
(4).瀏覽器的相容——在linear-gradient前加瀏覽器字首。
11.文字格式化屬性:
1).字型屬性——
1.字型型別——font-family:取值為字型型別,中文型別需要加引號。
2.字型大小——font-size: 取值為以 px 或 pt 或em 或 rem 為單位的數字。
3.字型加粗——font-weight: normal/bold/value; 分別表示預設值正常,加粗,無單位數字。
4.字型樣式——font-style: normal/italic; 分別表示預設值正常,斜體。
5.字型小型大寫字母—font-variant: normal/small-caps; 分別表示預設正常,小型大寫字母。
6.字型屬性的簡寫——font: style variant weight sizefamily;注意:簡寫時是必須有font-family。
7.自定義字型——@font-face{....}:是由以上屬性及值組成的物件;
2).文字屬性——
1.文字顏色——color:顏色值;
2.文字水平排列方式——text-align:left/right/center/justify;
3.文字的劃線修飾——text-decoration:none/underline/line-through/overline; 表示無劃線,下劃線,刪除線,上劃線。
4.文字的行高——line-height: 取值為以px為單位的數值或無單位的字型倍數。
5.文字首行縮排——text-indent: 取值以px 為單位的數值。
6.文字陰影——text-shadow: h-shadow v-shadow blurcolor;文字陰影屬性接收一個以逗號分隔的陰影效果的列表,陰影效果按照給的的順序,可以出現相互覆蓋的效果。
7.文字溢位——text-overflow:clip/ellipsis/ellipsis-word;表示文字超出顯示框的處理,取值分別表示不顯示(...)直接裁剪/顯示(...)省略標記插入的位置是最後一個字元/顯示(...)省略標記插入的位置是最後一個詞。
3).文字多列布局——適合純文字設計
1.column-width:表示一篇文字中定義文字每列寬度;
2.column-count:表示將一篇文字分成幾列顯示;
3.column-gap:定義相鄰列之間的距離;
4.column-rule:style width color;表示相鄰列之間的分割線的樣式(dashed/dotted/solid/none等),寬度,顏色;
5.column-span:none/all表示標題只在本欄顯示/橫跨所有欄顯示;
6.column-fill:auto/balance表示欄的高度是否統一。Auto表示隨內容變化,balance表示以內容最多的那列高度統一;
12.表格的屬性:
1).表格的常用屬性——
1.邊框屬性——border; css中只有table,td才有邊框屬性。
2.尺寸屬性——width,height;
3.框模型——padding;
4.文字屬性——1.font-*; 2.text-*;3.line-height;
5.單元格的資料垂直對齊方式——vartical-align:top/center/bottom;
2).表格的特有屬性——
1.邊框合併;即將雙線邊框合併成單線邊框。屬性——border-collspase: sparate/collspase; 表示預設值,合併成單線邊框。
2.邊框邊距;相鄰邊框的距離。屬性——border-spading:x y; 表示水平,垂直間距,需要在邊框合併預設值下才能有效。
3.表格標題的位置——caption-side:top/bottom;
4.顯示規則,即td寬高由內容還是設定值決定——table-layout:auto/fixed; 分別表示預設值以內容決定,有設定tr值決定。
13.定位:定位的分類:
1.普通流定位(即文件流定位),預設定位方式。
2.浮動定位(專門解決多個塊級元素在一行顯示)。
3.相對定位。
4.絕對定位。
5.固定定位。
1).普通流定位:特點:
1、每個元素在頁面上都有自己的空間。
2、每個元素都是從其父元素的左上角開始排列。
3、頁面中的塊級元素,都是按照從上到下的方式逐個排列,每個元素獨佔一行。
4、頁面中的每個行內元素 和 行內塊元素都是按照從左到右的方式來排列的。
2).浮動定位:屬性——float: left/right/none;特徵——
1、元素會被排除在文件流之外(即脫離文件流),元素就不再佔據頁面空間,其它未浮動元素要上前佔位。
2、浮動元素會停靠在其父元素的左邊或右邊,或其它已浮動元素的邊緣上。
3、浮動元素只能在當前行浮動。
4、浮動定位解決的問題:讓多個塊級元素在一行內顯示。
效果——
1、父元素顯示不下所有浮動子元素時,最後一個將換行,但是,有可能被卡住。
2、元素一旦浮動起來之後,寬度將以內容為準(未指定寬度的情況下)。
3、元素一旦浮動起來之後,將變成塊級元素(允許修改尺寸,能正常處理外邊距)行內元素 和 行內塊元素 浮動起來之後,就變成塊級元素。
4、文字,行內元素,行內塊元素是採用環繞的方式來排列的,是不會被浮動元素壓在底下的,而是會巧妙的避開浮動元素。
清除浮動——清除前面元素浮動對本元素產生的位置的影響。
1. 屬性:clear:none/left/right/both;分別表示預設值不清
除,清除前面元素左浮動帶來的影響,右浮動帶來的影響,清除浮動帶來的影響。
2. 浮動元素對父元素高度的影響及其解決方案。顯示方式——屬性——display:none/block/inline/inline-block/table;分別表示預設值不顯示,將元素邊塊級,將元素邊行內級,將元素邊行內塊級,將元素邊table一樣的表現形式。
顯示效果——
(1)顯示/隱藏屬性——visibility;不脫離文件流,仍然佔據空間。取值——visible(預設值,可見的) / hidden (隱藏);
(2)透明度屬性——opacity;改變整個元素的透明度。取值——0.0~1.0之間的小數。
(3)垂直對齊屬性——vertical-align;設定td,img,行內塊級元素2端的文字相對於它們的垂直對齊方式。img後垂直對齊取值——top/middle/bottom/baseline(預設值,基線對齊);在網頁開發過程中,通常會將頁面所有圖片的。預設值baseline修改成其他值,消除基線對齊。用於圖片後面文字的對齊方式。
游標——滑鼠懸停在元素上時,滑鼠的表現形式,如小手,沙漏,旋轉,十字----屬性—cursor:default(預設值)/pointer(小手)/crosshair(十字)/text(I)/wait(等待旋轉圖形)/help(幫助)。
3).相對/絕對/固定定位:
1.屬性——position:static(預設值)/relative/absolute/fixed;分別表示預設值,相對定位,絕對定位,固定定位。
2.偏移屬性——top/bottom/right/left:取值以px為單位的正負數值。並以其為基準線的移動。
3.相對定位——元素會相對於它自己原來的位置,偏移某個距離。相對定位的元素,原位置(空間)會被保留,不允許被其他元素所佔據。語法: position:relative;top/right/left/bottom: 正負值。
4.絕對定位——
(1).特證:脫離文件流,不佔頁面空間,後面元素上前補位。絕對定位的元素會相對於離它最近的,已定位的祖先元素去實現位置的初始化和偏移。如果不存在已定位的祖先的元素,那麼就相對於body取實現位置的初始化和偏移(其top/right/bottom/left都是相對於祖先已定位元素或body左上角的偏移位 置)。
(2).語法:position:absolute;top/right/left/bottom: 正負值。
(3).特點:絕對定位的元素會脫離文件流,所有會壓在其他元素之上。絕對元素會變成塊級元素。絕對定位的元素,margin可以正常使用,在正常下,margin:0 auto; 會失
效,但是在該絕對元素top/right/left/bottom:取值全都是0的非正常情況下下margin:auto;有效。
5.固定定位——
1).讓元素始終固定在頁面的某個位置處,不受到滾動條滾動而正規化位置的影響。
2).語法:position:fixed;配合top/right/left/bottom實現位置的改變。
3).特點:脫離文件流,固定元素會變塊級。可修改尺寸。永遠都是相對於body實現位置的固定。
6堆疊順序:
1).改變元素定位方式之後,有可能會發生堆疊效果,實際上是由堆疊順序來決定排位效果的。如紙牌遊戲出牌那張高出其他張。
2).語法:屬性——z-index:取值為沒有單位的數值,數值越大,越靠前,越面向使用者更近。前後移動,取值為負表示正常之下。
3).注意:必須是已定位元素才能用z-index。如果z-index相同的話,則後出現的在上面。在父子級元素中,永遠都是子壓在父元素之上,不受到z-index控制的。