一個demo學會css
阿新 • • 發佈：2018-12-26
全棧工程師開發手冊 （作者：欒鵬）
學習了css權威指南這本書，自己喜歡邊學邊總結邊寫demo，所以寫了這篇文章，包含了大部分的css程式設計知識。讓你一個demo掌握css程式設計，如果有問題可以留言。
css的知識主要包括兩部分：1、選中樣式，2、設定樣式。對應的css語法為1、css選擇器，2、css樣式引數
css選擇器全解：
選擇器總是從左至右解析，不要私自新增()優先運算
基本選擇器
h2{ /* 標籤選擇 */
}
p,h1{ /* 使用逗號實現元素合集 */ 屬性選擇器
p[attribute1][attribute2]{ /* [] 屬性選擇器，表示具有某種屬性的所有元素，多個引數表示同時具有多個屬性，class也可以作為一個屬性篩選 */ 偽類選擇器 :表示偽類
a:link{ /* link表示未訪問過的超連結 */
}
a:visited{ /* visited表示已訪問過的超連結 */
}
input:focus{ /* focus表示當前擁有焦點的元素 */
}
div:hover{ /* hover表示滑鼠指標停留的元素 */
}
a:active{ /* active表示被使用者輸入啟用的元素 */
}
div:first-child{ /* first-child表示第一個元素，此句表示第一個div元素 */
}
div :first-child{ /* 空格表示後代元素，此句表示div元素的第一個後代元素 */
}偽元素選擇器
p:first-letter{ /* first-letter行內元素首字母 */
}
p:first-line{ /* first-line行內元素首行 */
}
p:before{ /* before元素前插入內容 */
content:"AAAAAAAAAAA";
color: #2b542c;
}
p:after{ /* after在元素後插入內容 */
content: "AAAAAAAAAAAA";
color: #2b542c;
}
CSS樣式設定語法全解：
樣式優先順序
1、 !important標記的樣式 > 內聯樣式(style屬性) >id選擇樣式(#獲取) > 屬性選擇 ([title=”da”]) > 標籤選擇 div p > 萬用字元*
2、 同一等級優先順序具有疊加性。div p的優先順序大於p。相同優先順序，越晚設定的樣式優先順序越大
3、 絕大部分樣式會從父元素繼承到子元素上，繼承的樣式沒有優先順序，等級最低
4、 讀者的重要性宣告 > 創作人員的重要宣告 > 創作人員的正常宣告 > 讀者的正常宣告 > 使用者代理宣告
h1{
color: #111111; !important; /* 使用!important表示每個重要樣式 */
background-color: #111111; !important;
}值和單位
h1{
/* 顏色 */
color: #111111; /* 以六位16進製表示 */
color: red; /* 關鍵字表示 */
color: rgb(255,255,255); /* 三位rgb值，每位0-255 */
color: rgb(50%,50%,50%); /* 三位rgb值，每位0-100%*/
/* 長度 */
margin: 10%; /* 百分比長度，相對於父元素的width而言*/
padding: inherit; /* 關鍵字表示 inherit表示繼承度元素屬性，auto表示自動按規則調整 */
height: 10px; /* px整數畫素點，cm釐米=0.394in in英寸=72px mm毫米=0.0394in pc派卡=12px */
width: 10em; /* em相對大小，1em代表當前元素的字型大小，word中的一個字元大小，如果用em設定當前元素的字型大小，1em相當於父元素的字型大小 */
/* URL */
background-image: url("images/aa.jpg"); /* 相對url，url和()之間不能有空格 此處的url是相對於css檔案的位置，不是相對於html的相對位置*/
}字型
h1{
font-family: sans-serif,Arial; /* 設定字型 設定兩個字型是為了若一個不能使用，會應用另一個 */
font-weight: bold; /* 字型粗細 bold加粗 bolder更粗 lighter細體 100，inherit繼承父元素 */
font-size: large; /* 7個關鍵字表示，數值表示如12px 百分比表示如120% */
font-style: italic; /* italic斜體 oblique傾斜 normal正常 inhert繼承父元素 */
font-variant: small-caps; /* 字型變形 small-caps表示小寫變成小號大寫，大寫變成大號的大寫 */
font-stretch: extra-condensed; /* 字型拉伸 */
font: lighter large Arial; /* 字型屬性簡寫，style，weight，variant，size，family 前三個順序任意，後兩個必須按順序*/
}文字屬性
span{
text-indent: 4em; /* 首行縮排4個字元 */
text-align: center; /* 水平對齊， left、right、center、justify兩端對齊 */
line-height: 1.2; /* 最小行高，不一定是這個距離，所有元素都有這個屬性，但是隻影響行內元素，float型引數值表示相對於字型的縮放比例，因為會繼承，所以儘量使用比例控制，預設為字型大小的1.2倍。em、ex、百分比都是相對於元素大小來說的 */
vertical-align: baseline; /* vertical-align只應用與行內元素和替換元素，baseline表示基線對齊，sub下標，super上標，bottom行框底端對齊，text-bottom行內文字底端對齊，middle居中，top頂端對齊，text-top行內文字頂端對齊 */
vertical-align: -100%; /* 百分比：計算元素line-height乘以百分比，將元素基線相對於父元素基線升高該數值。正數元素上升，負數元素降低 */
word-spacing: 10px; /* 字間隔，單詞間隔 */
letter-spacing: 10px; /* 字母間隔 */
text-transform: uppercase; /* 文字轉換，uppercase全部大寫，lowercase全部小寫，capitalize首字母大寫 */
text-decoration: underline; /* 文字裝飾 underline下劃線，overline上劃線，line-through橫貫線，blink閃爍文字，不繼承 */
text-shadow: green 5px 0.5em 1px,1px 1px 1px black; /* 陰影四個引數： 顏色，右偏移，下偏移，模糊半徑。 多個陰影使用逗號隔開*/
white-space: pre; /* 文字空白符處理模式，pre-line合併空白，保留換行，允許自動換行。normal合併空白，忽略換行，允許自動換行。nowrap合併空白，忽略換行，不允許自動換行。pre保留空白，保留換行，不允許自動換行，pre-wrap保留空白，保留換行，允許自動換行 */
direction: ltr; /* 文字閱讀方向 ltr從左向右讀 rtl從右向左讀 */
unicode-bidi: embed; /* 處理書寫方向 */
}替換元素，內容佔位符，具體顯示由其他控制，img由具體圖片控制，input由type型別控制
非替換元素，元素內容顯示直接寫在文件中
塊級元素，框前框後生成換行，段落p，標題h1，div等元素，display:block標記將元素生成塊級框
行內元素，框前框後沒有換行，是塊級元素的後代元素，strong、span、a、img等元素，display:inline將元素生成行內框
塊級非替換元素
所有的屬性預設都是auto的
div{
margin-left: -10px; /* 外邊距，可為正負，可以為auto，背景色預設為透明 */
border: 1px dashed black; /* 邊框（寬度，樣式，樣色），顏色預設取元素背景色 */
margin-top: auto; /* 上下外邊距只要設定auto，就自定義為0，和左右外邊距不同，元素間垂直上的外邊距會自動合併（1、正正合並->取絕對值最大的 2、負負合併->取絕對值最大的 3、正負合併->取正負值的和） */
padding: 10px 10px; /* 內邊距，內容背景也會應用到內邊距，只能為正值，不能為auto */
height: 10%; /* 百分比是相對於父元素內容區而言的，如果父元素內容區寬度沒有明顯宣告（沒設定或為auto），則子元素的百分數重置為auto。元素內容高度大於元素框高度時，表現取決於父元素的overflow */
width: 50%; /* 寬高為內邊界之間的距離，不包含內邊距，邊框，外邊距。可以設定為auto或正值。一般子元素的內容區(width)+子元素的內邊距+邊框+子元素外邊距=父元素的內容區(width) */
/* 子元素的所有邊距總是會佔滿父元素內容區，子元素內容區、外邊距可以設定為auto。當三個距離（寬度，左外邊距，右外邊距）均不為auto，系統會自動將margin-right設定為auto */
/* 橫軸方向：當有一個auto，則自動調整使佔滿父元素內容區。當左右外邊距為auto，則調整設定為相等長度，佔滿父元素內容區。當寬度和一個外邊距為auto，則外邊距縮為0，寬度自動調整佔滿。當三個都是auto，則兩個外邊距為0，寬度佔滿 */
}塊級替換元素
img{
width: auto; /* 塊級替換元素的使用與非替換元素相同，只是width設定為auto時會自動為替換元素的內容的大小。如果寬度設定為固定大小，則高度也跟隨比例變化，除非高度也設定了固定值 */
}行內非替換元素
以 span strong em為主。
- 每個元素的行內框=（line-height減去font-size）/2增加到內容區兩邊，負數也一樣運算，一行元素的行框為最高行內框的頂端和最低行內框的底端。文字始終處於行內框的中間，一個元素的font-size大於line-height，會超出行高顯示，就像margin為負數
- vertical-align作用於行內元素上，保持行內框與行框的對齊方式，vertical-align設定為數字，則類似為塊元素的padding，會增加行高。行內非替換元素的padding不增加行高，也不影響文字的位置，會影響行內元素背景色的面積
- 多個對齊方式，匿名文字（一行中非行內元素文字）的對齊方式取第一個替換元素（沒有替換元素取第一個非替換元素）的對齊方式
- 關於對齊方式，首先根據各行內框，計算行框，再根據各自的vertical-align佈局，沒設定時，預設為底端對齊
行內替換元素
以 img input 為主
- 替換元素影響行框的高度，行內元素增加內邊距，邊框，外邊距都會影響分佈，增加行內框，但不影響元素的line-height，進而不影響vertical-align為百分比的情況
- 行內替換元素的底端預設與文字行的基線對齊，當替換元素設定了vertical-align對齊方式，則行內非替換元素vertical-align會自動更改為替換元素的對齊方式
- 行內替換元素的padding增加行高，因能夠像文字的位置，也影響行內元素背景色的面積
元素顯示display
div a{
display: block; /* block將元素以塊元素的形式表現，不過不改變元素的本質，該元素還是原來的行內或塊元素。 塊元素不能是行內元素的後代元素 */
display: inline; /* inline行內元素顯示 */
display: inline-block; /* inline-block行內塊元素，將塊元素作為替換元素放在行中，不換行，inline-block元素由原來塊元素屬性決定 */
display: run-in; /* run-in行內塊元素，將塊元素轉化行內元素，與後面的塊元素，並列在一行。若後面是行內元素，則run-in將元素保持為塊元素 */
}邊距 邊框
div{
margin: 10% 10% 0.5em 10px; /* 上 右 下 左。 左默認同右，下默認同上，右默認同上，百分比都是相對父元素的width */
margin-top: 10px; /* 只設置一個外邊距，其他預設為0，預設情況，上下外邊距會自動合併。行內非替換元素的上下外邊距沒有任何影響，也不改變元素行高 */
padding: 10% 10% 0.5em 10px; /* 背景會延伸到內邊距，百分比都是相對於父元素的width，內邊距影響行內替換或塊元素的分佈，影響所有元素的背景色面積 */
padding-bottom: 10px; /* 只設置一個內邊距，其他預設為0 */
border-style: solid dashed dotted double; /* 設定四條邊框 solid實線，dashed虛線 dotted點線 double雙層線 inset內凹槽 outset外凸框 groove凹槽 ridge壟狀邊框 */
border-bottom-style: inset; /* 單獨設定一邊邊框，邊框預設為none，寬度預設為0。要同時修改這兩個才會顯示邊框 */
border-width: 10px 0.1em thick 0; /* thick > medium > thin不一定具體多少寬度 */
border-color: black rgb(25%,25%,25%) #0d0d0d silver; /* 邊框顏色預設為元素顏色，color會繼承 */
border-bottom: thick solid gray; /* 邊框合併簡寫，一次設定一邊邊框style color width可亂序 */
border-style: dashed solid double; /* 邊框合併簡寫，一次設定一個屬性， 這裡的右邊框會自動和左邊框相同 */
border: medium green; /* 邊框合併簡寫 一次設定四個邊框所有屬性，沒有設定style，預設為none 不顯示 */
}顏色 背景
div{
color:#0d0d0d; /* 預設前景色為黑色，顏色會繼承，邊框文字顏色，預設為前景色 */
background-color: transparent; /* transparent表示透明色 */
background-image: url("images/aa.jpg"); /* 設定背景圖片 */
background-repeat: repeat; /* repeat背景圖片重複平鋪，不拉伸，repeat-x橫軸重複平鋪，橫縱不拉伸，repeat-y縱軸平鋪，不拉伸，no-repeat橫縱都不平鋪，都不拉伸 */
background-position: top right; /* 初始化背景圖片的位置，關鍵字center top 或數值50px 50px 或百分比10% 10%（圖片中心位置的百分比） 都可以。*/
background-attachment: fixed; /* 背景隨元素的滾動情況，fixed表示背景圖片不滾動（此時圖片的位置由可視區決定，而不是由元素決定），scroll表示背景滾動 */
background: white url("images/aa.jpg") top right repeat-x fixed;/* 屬性簡寫。 背景色 背景圖片 背景位置 背景平鋪方式 背景是否滾動。所有均可省略 */
}浮動
div{
float: left; /* 浮動，當前元素相對於父元素中的位置(除非外邊距為負)，不能超出父元素的範圍，浮動元素都會生成塊級框，像塊級元素一樣表現，浮動元素的外邊距不合並，多個浮動元素不重疊（外邊距為負除外） */
/* 浮動元素，同意處理成塊級元素，浮動側方向必須保持，儘可能利用空間 浮動元素從處於相同浮動邊界的之前的浮動元素的外邊向對面平鋪，若內有足夠的空間，則另起一行 */
/* 塊元素佔一行，而不是現實的那點地方，塊級div無論大小，在文件中的佔位符，始終佔一行。 */
/* 預設情況：浮動元素不影響塊級元素的正常現實，（後續塊級元素，緊接在前面的塊級元素之後顯示，就像浮動元素不存在一樣），因為浮動元素是一個新的顯示層 */
clear: left; /* 浮動或非浮動元素，左側不包含浮動元素層（即若左側為浮動元素則在浮動元素應用到當前正常流顯示層，換行顯示），為了保證和左側的浮動元素不重疊 */
}定位
div{
position: absolute; /* fix同absolute,只不過fix的包含塊是視窗 */
/* relative的偏移是相對於正常流中未定義前的偏移，在文件佔位符中，保持不變，顯示上使用偏移後顯示，所以relative保留原本空間，保持元素形狀，不影響後續的分佈，只改變自己的分佈。需要使用寬高+top、left實現佈局 */
/* absolute刪除原本空間，生成新的塊級框，決定定位元素不影響其他元素的分佈，absolute的包含快為最近的position值不為static的祖先元素，一般就人工設定想要的包含塊元素的position為relative，不是父元素本身 */
top: 20px; /* 偏移 沒有寬或者高的時候使用偏移確定元素大小，偏移若設定為auto，就是保持定位前的位置屬性*/
left:10%; /* 若元素有寬高，則佈局還依靠左偏移、上偏移 */
right: -20px; /* 有元素寬高，right，bottom設定無效，負數可以促使元素偏移出包含快 */
bottom:10%; /* 定位中的縱向百分比相對於包含塊的height而言，橫向百分比相對於包含塊width而言 */
min-width: 10em; /* max min 設定元素的大小限制。為了混合使用不同的單位，如大小為10%但是要求不小於10em */
/* 溢位 */
overflow: hidden; /* 溢位處理方式 hidden隱藏 scroll滾動 auto瀏覽器自行處理（一般是滾動） visible（預設）元素顯示超出元素框外，但元素框形狀不變 */
/* 裁剪 */
clip:rect(50px,100px,100px,50px); /* clip內容裁剪，顯示在內容區的部分，遮罩使部分割槽域顯示。上 右 下 左，全都是相對於左上角座標而言的。只能設定數值或auto，不能使用百分比，裁剪區域超出內容區，內容也會顯示 */
/* 可見性 */
visibility: visible; /* hidden隱藏。visible顯示 collapse用於表元素 */
/* z軸層疊 */
z-index: 1; /* 所有定位元素均有此屬性，越大越在上層，可以為負值 */
}表佈局
表格會自動插入完成，表包含行，行組（或者列，列組）。行包含單元格的性質
表格的表現包含6個層，由上至下：單元格-行-行組-列-列組-表格
table{
margin: 10px; /* 表格可以有外邊距，但是沒有內邊距 */
caption-side: bottom; /* 表標題位置，top頂部 bottom底部 */
border-collapse: collapse; /* 表單元格邊框 collapse合併邊框模式 separate分割邊框模式 */
border-spacing:1px 2px; /* 邊框間隔距離，水平距離-垂直距離。此屬性只能應用到表上 */
empty-cells: hide; /* 空單元格處理，show顯示 hide隱藏 */
table-layout: fixed; /* 表寬度佈局方式 fixed固定寬度佈局，auto自動寬度佈局 高度總是會自動佈局 */
height: 500px; /* 最小表高，auto表格會自己計算 */
/* 固定寬度佈局，列寬為auto的列，會根據首行單元格寬度或整個列表剩餘可控寬度平均分配來設定列寬。若列寬和大於表寬，則表寬自動更改。若表寬大於列寬和，則多餘表寬平均分給每個列寬 */
/* 固定寬度佈局：列寬由首行單元格控制，其他單元格的width失效，若單元格內容過多，根據overflow控制顯示 */
/* 自動佈局：width:auto也有可能觸發。列寬為百分比時，是相對於表寬計算的 */
}單元格
table td{
border-style: hidden; /* 邊框樣式，合併邊框模式下，hidden優先順序最高，none(預設)優先順序最低，寬邊框優於窄邊框，邊框樣式優先順序(double>solid>dashed>dotted>ridge>outset>groove>inset) */
}列表
li{
list-style-type: disc; /* 列表項前端標誌 disc實心圓，有很多中 可繼承 */
list-style-image: url("images/aa.jpg"); /* 影象作為列表項前端標誌，如果載入不成會使用list-style-type顯示 */
list-style-position: outside; /* 列表標誌的位置，outside預設，標誌獨立成列，不影響其他元素的佈局，相當於標誌相對於列表項的絕對定位 */
list-style:url("images/aa.jpg") disc outside; /* 標誌樣式合併簡寫，無順序要求 */
/* 還有相關計數的內容 */
}系統字型顏色
使web應用更像作業系統的一部分
body{
font:icon; /* caption標題控制元件的字型樣式，按鈕下拉樣式。icon圖示標籤的字型樣式，驅動器，資料夾，檔案圖示。menu選單列表文字樣式。message-box對話方塊文字樣式 status-bar視窗狀態條中的文字樣式 */
color:ActiveBorder; /* ActiveBorder活動視窗外邊框顏色 ActiveCaption活動視窗標題背景色， AppWorkspace文件應用背景色，Background桌面背景色 ButtonFace三維按鈕“面”上背景色 */
}游標
a[href]{
cursor: e-resize; /* 設定游標樣式：指示與選擇類游標樣式：pointer指標，hand手型。 移動類游標：e-resize，ne-resize，sw-resize； 等待前進類游標；wait，progress； 提供幫助類游標：help 圖形類游標 url(xxx.cur) */
}輪廓
div{
outline-style:dotted; /* 輪廓不區分上下左右，因為輪廓是不規則的。輪廓不影響其他元素的佈局，分佈在邊框的外面。 */
outline-width: medium; /* 輪廓寬度 */
outline-color: invert; /* 輪廓顏色，可以使用正常的顏色設定，也可以設定為invert（預設值），表示對輪廓後面的顏色取反 */
outline: green medium dotted; /* 輪廓屬性簡寫 */
}限定樣式應用的媒體和裝置大小
@media screen and (max-device-width: 1700px){ /* screen螢幕 print印表機 projection投影 speech(聲音媒體，aural已廢棄) braille盲文 handheld手持式媒體 */
body{
}
}