首頁 > 開發者 > JavaScript
css知識點整理，css知識點
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。
一、css引入的方式
1、行內樣式：行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
2、嵌入式：嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<head>
<style type="text/css">
. ..此處寫CSS樣式
</style>
</head>
3、匯入式：將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中，使用的文法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css檔案的路徑
</style>
4、連結式：也是將一個.css檔案引入到HTML檔案中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意:匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這
是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣
先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
二、css的選取器
“選取器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素
1、基礎選取器：
＊ ： 通用元素選取器，匹配任何元素 * { margin:0; padding:0; }
E ： 標籤選取器，匹配所有使用E標籤的元素p { color:green; }
.info和E.info: class選取器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id選取器，匹配所有id屬性等於footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
2、組合選取器：
E,F 多元素選取器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 Div,p { color:#f00; }
E F 後代元素選取器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }
E > F 子項目選取器，匹配所有E元素的子項目F div > strong { color:#f00; }
E + F 毗鄰元素選取器，匹配所有緊隨E元素之後的同級元素F p + p { color:#f00; }
注意嵌套規則：
3、屬性選取器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。
（注意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; }
E[att|=val] 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用於lang屬性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
p:before 在每個 <p> 元素的內容之前插入內容 p:before{content:"hello";color:red}
p:after 在每個 <p> 元素的內容之前插入內容 p:after{ content:"hello"；color:red}
4、偽類別選取器
偽類別選取器： 專用於控制連結的顯示效果，偽類別選取器：
a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。
a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。
a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。
偽類別選取器 : 偽類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css代碼; }
三、css常用屬性
1、顏色屬性
<div> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 html{ 8 background-color: antiquewhite; 9 10 }11 body{12 width: 100px;13 height: 600px;14 background-color: deeppink;15 background-image: url(1.jpg);16 background-repeat: no-repeat;17 background-position: center center;18 }19 </style>20 </head>21 <body>View Code
4、文字屬性
white-space: 設定元素中空白的處理方式
direction: 規定文本的方向
text-align: 文本的水平對齊
line-height: 文本行高
vertical-align: 文本所在行高的垂直對齊
text-indent: 文本縮排
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
text-shadow：文本陰影
word-wrap：自動換行
5. 列表屬性
list-style-type: 清單項目標誌的類型
list-style-image：將圖象設定為清單項目標誌
list-style-position：清單項目標誌的位置
list-style：縮寫
6. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框寬度
border-radius：圓角
border: 簡寫
box-shadow：邊框陰影
7、display
8、盒子模型
什麼是盒子模型？
padding:用於控制內容與邊框之間的距離;
margin: 用於控制元素與元素之間的距離;
一個參數，應用於四邊。
兩個參數，第一個用於上、下，第二個用於左、右。
三個參數，第一個用於上，第二個用於左、右，第三個用於下
邊框在預設情況下會定位於瀏覽器視窗的左上方，但是並沒有緊貼著瀏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），解決辦法
1 body {2 margin: 0;3 }View Code
9、float
讓一行顯示兩個塊級標籤，會脫離文檔流
clear 清除浮動：
10、position
1 static，預設值 static：無特殊定位，對象遵循正常文檔流。
top，right，bottom，left等屬性不 會被應用。 說到這裡我們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序， 也就是我們通常看到的由左 到右、由
上而下的輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性可以將元素從文檔流脫離出來顯示。 預設值就 是讓元素繼續按照
文檔流顯示，不作出任何改變。
2 position:relative
relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中位移位置。而其層疊通過z-index屬性定義。
absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對位置。而其層疊通過z-index屬性定義。 如果設定 position:relative，就可以使用
top,bottom,left和 right 來相對於元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然佔據文檔 中的原有位置，只是視覺上相對於它在文檔中的原有位置
移動了] 當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不佔據位置了]，可以準確的按照設定的 top,bottom,left 和 right 來定位了。 如果一個元素絕對
定位後，其參照物是以離自身最近元素是否設定了相對定位，如果有設定將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素， 一直找到html為止。
3 position:fixed
在理論上，被設定為fixed的元素會被定位於瀏覽器視窗的一個指定座標，不論視窗是否滾動，它都會固定在這個位置。
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現捲軸時，對象不會隨著滾動。而其層疊通過z-index屬性 定
義。 注
意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流， 另一個是“定位
流”。但是 relative 卻可以。因為它原本所佔的空間仍然佔據文檔流。
通過以下四種屬性進行定位：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
