資訊專欄INFORMATION COLUMN
摘要：語法基礎(chǔ)語法規(guī)則由兩個主要部分構(gòu)成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。
1 什么是CSS？
CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），
主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
CSS以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設(shè)置不同的樣式。
CSS規(guī)則由兩個主要部分構(gòu)成：選擇器以及一條或多條聲明。
每條聲明由一個屬性和一個值組成。屬性(property)是設(shè)置的樣式屬性，每個屬性有一個值，屬性和值被冒號分開。
比如 selector{property：value}
選擇器通常是需要改變樣式的HTML元素。
比如 h1{color:red; font-size:14px;} h1是選擇器，color和font-size是屬性，red和14px是值。
注意：
如果定義不止一個聲明則需要用分號將每個聲明分開。例如：p{text-align:center;color:red}
如果值為若干單詞，則要給值加引號： 例如：p {font-family: "sans serif";}
選擇器的分組
h1,h2,h3,h4,h5,h6 {
color: green;
}
繼承及其問題：根據(jù) CSS，子元素從父元素繼承屬性。
body {
font-family: Verdana, sans-serif;
}
3 創(chuàng)建CSS
CSS 創(chuàng)建樣式表分為三種情況：
內(nèi)部樣式表
行內(nèi)式(內(nèi)聯(lián)樣式)
外部樣式表(外鏈式)
樣式優(yōu)先級：內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式
三種樣式表區(qū)別：
樣式表 優(yōu)點 缺點 使用情況 控制范圍 行內(nèi) 書寫方便 沒有實現(xiàn)樣式和結(jié)構(gòu)相分離 較少 控制一個標簽(少) 內(nèi)部 部分結(jié)構(gòu)和樣式相分離 沒有徹底分離 較多 控制一個頁面(中) 外部 完全實現(xiàn)結(jié)構(gòu)和樣式相分離 需要引入 最多，推薦 控制整個站點(多)4 id和class選擇器 ID選擇器：
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證一樣具有唯一性。
HTML元素以 id 屬性來設(shè)置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。
注意： id 屬性不能以數(shù)字開頭。
語法：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
class選擇器：
class 選擇器用于描述一組元素的樣式，也叫做類選擇器。
class 可以在多個元素中使用，并且一個元素也可以指定多個類名。
在 CSS 中，類選擇器以一個點 "." 號來定義。
同樣的類名的第一個字符也不能使用數(shù)字。
語法：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
ID 選擇器和類（class）選擇器的區(qū)別：
相同點：
都可以應(yīng)用于任何元素
不同點：
ID 選擇器只能在文檔中使用一次，而類選擇器可以使用多次。
可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式(也就是一個元素可以制定多個類名)，而ID只能指定一個。
5 CSS元素選擇器最常見的CSS選擇器就是元素選擇器，也就是標簽選擇器，也就是在HTML中元素的最基本的選擇器。
語法：
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是他的缺點，不能設(shè)計差異化樣式。
6 CSS背景(background)background 屬性用于定義 HTML 元素的背景。
定義元素背景效果的 CSS 屬性有五種：
background-color 背景顏色
background-image 背景圖像
background-repeat 背景圖像設(shè)置水平或垂直平鋪或不平鋪
background-position 背景圖像設(shè)置定位
background-attachment 背景圖像設(shè)置固定或滾動
背景屬性簡寫：
body{
background:green url("images/fix.gif") no-repeat fixed 12px 24px;
}
當使用簡寫屬性時，屬性值的順序依次為：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
7 CSS外觀屬性
CSS文本格式主要分為：文本顏色(color)、文本對齊方式、文本修飾、文本陰影、文本縮進、文本間距、字間距、文本空白處理、文本轉(zhuǎn)換。
文本對齊方式:text-align屬性有四個值：left,center,right,justify(兩端對齊)。屬性默認值為auto。
文本修飾：text-decoration 屬性用來設(shè)置或刪除文本的修飾。
主要是用來刪除超鏈接的下劃線，也可以使用其他值來設(shè)置文本的修飾。
text-decoration:overline， 設(shè)置文本上劃線。
text-decoration:line-through， 設(shè)置文本中間劃線。
text-decoration:underline， 設(shè)置文本下劃線。
文本陰影：text-shadow: x y shadow color；
其中 x 是水平陰影的偏移值，
y 是垂直陰影的偏移值，
shadow 用于指定陰影的模糊值，即模糊效果的作用距離，不允許負值。
color 指定陰影的顏色。該屬性有兩個作用，產(chǎn)生陰影和模糊主體。
文本縮進：用來指定文本的首行縮進，允許為負值，如果值是負數(shù)，第一行則向左縮進。
CSS表示為：text-indent:2em，em 是相對文字大小的單位，1em 就是1個文字大小，2em 就是兩個文字大小。
文本間距：行高，也就是文本行的高度。例如：line-height：22px；
字間距：letter-spacing 和 word-spacing 這兩個屬性都可用來增加或減少文本間的空白，即字間距。
不同的是：
letter-spacing 屬性設(shè)置字符間距，而 word-spacing 屬性設(shè)置單詞間距。
注意：
word-spacing 屬性對中文無效，因此在設(shè)置中文的字間距時請使用 letter-spacing 屬性。
letter-spacing 和 text-align:justify 是兩個沖突的屬性，不能同時使用；
text-align:justify 是設(shè)置內(nèi)容根據(jù)寬度自動調(diào)整字間距，使各行的長度恰好相等，實現(xiàn)文本兩端對齊效果，
而 letter-spacing 是指定一個固定的字間距。
文本空白處理：white-space 屬性指定元素內(nèi)的空白如何處理，默認值為 normal 空白會被瀏覽器忽略。
該屬性還有4個值：
nowrap 文本不會換行，禁止換行，文本會在同一行上繼續(xù)，直到遇到
標簽為止。
pre 空白會被瀏覽器保留，這種方式類似 HTML 中的
標簽，用于定義預(yù)格式文本。
pre-wrap 指定保留空白符序列，但是正常地進行換行。
pre-line 指定合并空白符序列，但是保留換行符，并允許自動換行。文本轉(zhuǎn)換：text-transform 屬性控制文本中的字母。
8 CSS字體 (font)
是用來指定在一個文本中的大寫和小寫字母，可用于將所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
text-transform:capitalize; 定義文本中的每個單詞以大寫字母開頭。
text-transform:uppercase; 定義文本僅有大寫字母。
text-transform:lowercase; 定義文本僅有小寫字母。font 屬性可用于設(shè)置文本字體，定義樣式，如加粗，大小等，屬于復(fù)合屬性，也叫做簡寫屬性。
簡寫順序：
font-style(字體樣式) --> font-variant(字體變形) --> font-weight(字體加粗) --> font-size(字體大小)/line-height --> font-family(設(shè)置文本字體)
注意，font-size 和 font-family 的值是必需的，否則無效。(1)是絕對或相對大小，可以使用px、em、%和em組合來設(shè)置。
使用px設(shè)置：通過像素設(shè)置文本大小是設(shè)置的整個頁面。
使用em設(shè)置：1em等于當前的字體尺寸，比如設(shè)置的默認字體是12px，因此1em的默認大小就是12px。像素轉(zhuǎn)換em：px/12 = em
使用%和em組合設(shè)置：在所有瀏覽器的解決方案中，設(shè)置
元素的默認字體大小是 100%，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。使用%和em組合設(shè)置
(2)font-style 屬性主要用于指定斜體文字。
屬性有三個值：normal正常顯示文本
italic 定義斜體
oblique 定義傾斜的文字
9 CSS鏈接鏈接的四種狀態(tài)是：
a:link - 正常，未訪問過的鏈接。
a:visited - 已訪問過的鏈接。
a:hover - 當鼠標滑動到鏈接上時。
a:active - 鏈接被點擊的那一刻。
10 CSS列表作用：1 設(shè)置不同的列表項標記 2 設(shè)置列表項標記為圖像
無序列表：
修改列表項標記使用 list-style-type，使用圖像作為標記可以利用 list-style-image 屬性完成。無序列表經(jīng)常用來做導(dǎo)航欄菜單，通常都需要隱藏?zé)o序列表項的標記，那么就使用 list-style-type:none，表示無標記。
有序列表：
list-style-type 屬性的默認值為 disc 實心圓，即小黑點。
除了無標記還可以修改標記，例如circle空心圓，square實心方塊。有序列表項標記默認使用數(shù)字樣式顯示，即 list-style-type:decimal。
圖像作為列表項標記要指定列表項標記的圖像，可以使用 list-style-image 屬性，只需要簡單地設(shè)置一個 url() 值，就可以將圖像作為標記類型。
列表屬性簡寫：list-style：list-style-type，list-style-position，list-style-image;
11 CSS表格表格邊框： border
表格寬度和高度：width 和 height
表格對齊:text-align 和 vertical-align
表格內(nèi)邊距:tr,td的padding設(shè)置
| 粗糧 | 蔬菜 | 水果 |
|---|---|---|
| 大豆 | 黃瓜 | 香蕉 |
| 高粱 | 菠菜 | 檸檬 |
| 燕麥片 | 白菜 | 西瓜 |
分組選擇器，例如：
h1{color:gray;}
p{color:gray;}
可以寫成：h1, p{color:gray;}
嵌套選擇器，例如：
.div1 p{
color:white;
}
.div1 p a{
color:yellow;
font-weight:bold;
}
嵌套選擇器
深層嵌套選擇器
通配符選擇器
*{
padding:0;
margin:0;
}
屬性選擇器
屬性選擇器：屬性選擇器使用[attr]，例如：把所有帶有 title 屬性的元素的字體設(shè)置為紅色
h1 標題不帶有 title 屬性
h2 可以設(shè)置樣式
超鏈接可以設(shè)置樣式
屬性和值選擇器：屬性選擇器使用[attr=value]
h1 標題 title="Hello world"
h2 可以設(shè)置樣式
超鏈接可以設(shè)置樣式
屬性和多個值的選擇器：使用有兩種情況：屬性值用空格分隔使用：[attr~=value]
屬性值用連字符分隔則使用：[attr|=value]
例如：把包含 title="Hello" 的元素的字體設(shè)置為綠色，使用 ~ 分隔屬性和值
h1 標題 title="world"
h2 可以設(shè)置樣式
h3 可以設(shè)置樣式
超鏈接可以設(shè)置樣式
超鏈接可以設(shè)置樣式
表單樣式：屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時特別有用。例如：
3 組合選擇器：合選擇符是包括各種簡單選擇器的組合方式，組合選擇符說明了兩個選擇器直接的關(guān)系。
后代選則器：又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。
子元素選擇器：子元素選擇器只能選擇作為某元素子元素的元素，以 > 分隔，子元素選擇器只能選擇作為某元素子元素的元素。
相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
普通相鄰兄弟選擇器：選取所有指定元素的相鄰兄弟元素，以 ~ 分隔。
選擇器組合：多種選擇器可以結(jié)合起來使用。
13 CSS偽類(不區(qū)分大小寫)CSS 偽類是用來向一些選擇器添加特殊的效果。
語法：選擇器:偽類{attr:value;}
CSS 類也可以使用偽類：選擇器.class:偽類{attr:value;}
(1)超鏈接偽類
在瀏覽器中，鏈接的不同狀態(tài)都可以以不同的方式顯示：
a:link{color:#FF0000;} /* 未訪問的鏈接顯示為紅色 */
a:visited{color:#00FF00;} /* 已訪問的鏈接顯示為綠色 */
a:hover{color:#FF00FF;} /* 鼠標劃過鏈接顯示為紫紅色 */
a:active{color:#0000FF;} /* 已選中的鏈接顯示為藍色 */
注意： 在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，
a:active 必須被置于 a:hover 之后，才是有效的。
第一個 p 元素
第二個 p 元素
第三個 p 元素
選擇作為任何元素的第一個子元素 p。選擇器使用 p:first-child。
選擇所有 p 元素中的第一個子元素 b。選擇器使用 p>b:first-child。
選擇所有作為第一個子元素 p 中的所有 b 元素。選擇器使用 p:first-child b。
使用 :lang 偽類可以為不同的語言定義特殊的規(guī)則：
html:lang(zh-CN){
color:blue;
}
:lang(en)>p{
color:gray;
}
14 CSS 偽元素
CSS 偽元素是用來為一些選擇器添加特殊的效果。
語法：選擇器:偽元素{attr:value;}
CSS 類也可以使用偽元素：選擇器.class:偽元素{attr:value;}
(1)CSS2 - :before 偽元素 h1:before{
content:url(images/logo.gif);
}
(2)CSS2 - :after 偽元素
h1:after{
content:url(images/logo.gif);
}
content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容，該屬性用于定義元素之前或之后放置的生成內(nèi)容。
content 的內(nèi)容一般可以為四種：
content:none 該值是默認值，不插入內(nèi)容。
content:"string" 插入文本。
content:attr(屬性) 插入標簽屬性值。
content:url(路徑) 使用指定的絕對或相對地址插入一個外部資源，可以是圖像，音頻，視頻或瀏覽器支持的其他任何資源。
15 塊級元素和行內(nèi)元素塊級元素(block-level):每個塊元素通常都會獨自占據(jù)一整行或多整行，
可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。
常見的塊元素有
、
總是從新行開始
高度，行高，外邊距以及內(nèi)邊距都是可以控制的
寬度默認是容器的100%
可以容納內(nèi)聯(lián)元素和其他塊元素
行內(nèi)元素(inline-level):不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，
一般不可以設(shè)置高度，寬度，對齊等屬性，常用于控制頁面中文本的樣式。
常見的行內(nèi)元素有、、、、、行內(nèi)元素的特點：、、、、等， 其中標簽最典型的行內(nèi)元素。
和相鄰行內(nèi)元素在一行上。
高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
默認寬度就是它本身內(nèi)容的寬度。
行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）
注意：
只有文字才能組成段落，因此p里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，
它們都是文字類塊級標簽，里面不能放其他塊級元素。
鏈接里面不能再放鏈接。
16 行內(nèi)塊元素(inline-block)在行內(nèi)元素中有幾個特殊的標簽——、、
和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。
默認寬度就是它本身內(nèi)容的寬度。
高度，行高、外邊距以及內(nèi)邊距都可以控制。
17 CSS 三大特性 層疊、繼承、優(yōu)先級CSS層疊性：是指多種CSS樣式的疊加。
CSS繼承性：是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。
想要設(shè)置一個可繼承的屬性，只需將它應(yīng)用于父元素即可。簡單理解就是： 子承父業(yè)。
CSS優(yōu)先級：定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。
使用了 !important聲明的規(guī)則。
考慮權(quán)重時，需要注意的一些點：
繼承樣式的權(quán)重為0。
行內(nèi)樣式優(yōu)先。
權(quán)重相同時，CSS遵循就近原則。
18 盒子模型（CSS重點） CSS三大模塊： 盒子模型 、浮動 、定位。盒子模型：就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。
每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
盒子邊框（border）
語法：border : border-width || border-style || border-color 常用屬性值：none：沒有邊框即忽略所有邊框的寬度（默認值）、solid線(單實線)、dashed(虛線)、 dotted(點線)、double(雙實線)19 實現(xiàn)居中
1 外邊距實現(xiàn)盒子居中
滿足兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然后給元素左右的外邊距都設(shè)置為auto。
例如：.header{ width:960px; margin:0 auto;}
2 文字盒子居中
文字水平居中是 text-align: center
盒子水平居中 左右margin 改為 auto
20 ?盒子模型布局穩(wěn)定性按照優(yōu)先使用寬度 （width）、其次 使用內(nèi)邊距（padding）、再次 外邊距（margin）。
width > padding > margin
原因：
margin 會有外邊距合并 還有 ie6下面margin 加倍的bug，所以最后使用。
padding ?會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
width ? 沒有問題，我們經(jīng)常使用寬度剩余法 高度剩余法來做。
21 盒子陰影語法： box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；22 浮動(float) CSS的定位機制有3種：普通流（標準流）、浮動和定位。
浮動：是指設(shè)置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
語法：選擇器{float:屬性值;} 屬性值可以是left，right，both，none。
目的：為了讓多個塊級元素同一行上顯示。
-static：自動定位（默認定位方式），所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。
relative：相對定位，相對定位是將元素相對于它在標準流中的位置進行定位
absolute：絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位
fixed：固定定位，相對于瀏覽器窗口進行定位。它的特點在于它的元素跟父親沒有任何關(guān)系，只認瀏覽器；
完全脫標，不占有位置，不隨著滾動條滾動。
疊放次序z-index的特點：z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據(jù)書寫順序，后來居上。
后面數(shù)字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態(tài)定位都無此屬性，亦不可指定此屬性
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114811.html
摘要：忙忙碌碌的，沒空整理。最近遇到些相關(guān)問題，之前只是印象中要這么用，不知道之所以然，今天就大概的整理下會比較零散。首先，巧妙的使用這一標記，將瀏覽器從所有情況中分離出來。接著，再次使用將和分離開來，這樣已經(jīng)獨立識別。 忙忙碌碌的，沒空整理。最近遇到些CSS相關(guān)問題，之前只是印象中要這么用，不知道之所以然，今天就大概的整理下（會比較零散）。 盒子模型 W3C標準/IE盒子模型 標準盒子模型...
摘要：標簽標簽自定義盒模型一基本概念盒模型由里向外是由構(gòu)成的。生成相對定位的元素，相對于其正常位置進行定位。相對與支付的高度，通常為字體高度的一半。視口被平均分為單位的相對于視口的高度。 CSS手冊：http://t.mb5u.com/css3/選擇器一、元素選擇符 通配選擇符(*):選擇所有元素 類型選擇符(E)：以文檔對象類型作為選擇符 id選擇符(E#id):以唯一標識符id屬性等于...
摘要：折疊后的計算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負值有正有負，先取出負中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。 轉(zhuǎn)自某個大神整理的面試題 盒子模型 標準盒子模型 內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...
摘要：前綴瀏覽器兼容根據(jù)了解，屬性大部分支持，部分支持，少部分支持前綴蘋果谷歌火狐瀏覽器世界之窗例如兼容轉(zhuǎn)換過渡關(guān)鍵幀動畫轉(zhuǎn)換及以上支持，需添加前綴屬性的方法使用縮放軸縮放倍，軸縮放倍，只有一個值時為縮放倍數(shù)傾 css3前綴（瀏覽器兼容） 根據(jù)了解，css3屬性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前綴 // -webkit- Safari and Chrome（...
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
閱讀 1571·2021-10-25 09:44
閱讀 2936·2021-09-04 16:48
閱讀 1563·2019-08-30 15:44
閱讀 2508·2019-08-30 15:44
閱讀 1738·2019-08-30 15:44
閱讀 2824·2019-08-30 14:14
閱讀 2976·2019-08-30 13:00
閱讀 2152·2019-08-30 11:09
