【前端筆記】? CSS
阿新 • • 發佈：2017-09-04
cad 偽類 round 什麽 發的 index light 選擇器 ima
3. CSS的兩大重點
1. 什麽是CSS
- CSS的全稱是Cascading Style Sheets，層疊樣式表。它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用。
CSS的編寫格式是鍵值對形式的，比如
color: red;
background-color: blue;
font-size: 20px;
冒號左邊的是屬性名，冒號右邊的是屬性值。
CSS遵循一個規律：就近原則（同一個樣式出現多次定義，以離內容最近的為準）、疊加原則（同一個樣式只出現一次定義，以出現的為準）
2. CSS有3種書寫形式
1》行內樣式：（內聯樣式）直接在標簽的style屬性中書寫
<body style="color: red;">
2》頁內樣式：在本網頁的style標簽中書寫
<style>
body {
color: red;
}
</style>
3》外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標簽引用
// relation 關系， 要告訴瀏覽器導入的是什麽東西。（層疊樣式表）
<link rel="stylesheet" href="index.css">
3. CSS的兩大重點
屬性：通過屬性的復雜疊加才能做出漂亮的網頁
選擇器的作用：通過選擇器找到對應的標簽設置樣式（選擇器就是用來找網頁中的標簽，去設置樣式）
1》標簽選擇器
/* 1.標簽選擇器 */
div {
color: red;
}
p {
color: blue;
}
<div>11111</div>
<p>222222</p>
2》類選擇器的格式
/* 2.類選擇器 */
.one {
color: yellow
3》id選擇器的格式
/* 3.id選擇器 */
#first {
font-size: 40px;
}
<div id="first">555555</div>
<!--id選擇器只能用一次，是唯一標識，其它地方不能重復使用-->
<!--<div id="first">666666</div>-->
4》並列選擇器
/* 並列選擇器 */
div,.one {
color: blue;
}
說明：並列選擇器是一種合並寫法，即把多個標簽相同的樣式合並寫到一起。
5》復合選擇器
/* 復合選擇器 */
div .one {
background-color: lightgray;
}
#first div {
color: #84ffdb;
}
說明：復合選擇器是一種縮小定位範圍的寫法，方便快速定位。（首先先找div標簽，然後再在div標簽裏去找設置了one的類選擇器。）
6》直接後代選擇器
/*直接後代選擇器*/
div > p {
color: red;
}
說明：定位div裏面的p標簽，包括所有兒子級的p標簽，不包括孫子級的p標簽。
7》相鄰兄弟選擇器
/*相鄰兄弟選擇器*/
div + p {
color: red;
}
說明：定位與div並列同級且最近的一個p標簽。
8》屬性選擇器
/*屬性選擇器，定位帶name屬性的div */
div[name] {
color: red;
}
/*屬性選擇器，定位 name屬性值為zhangsan div */
div[name="zhangsan"] {
color: blue;
}
/*屬性選擇器，定位帶 name屬性和age屬性 的div */
div[name][age]{
color:gray;
}
<!--div有一個name屬性-->
<div name="zhangsan">11111</div>
<div name="lisi">22222</div>
<!--div有兩個屬性：name和age-->
<div name="wangwu" age="23">333333</div>
9》偽類
在選擇器後加上“：屬性”,當這個屬性被觸發的時候，可以去改變選擇器對應標簽的樣式。
標簽:屬性 {
樣式
}
div { background-color: red; width: 300px; height: 300px; } /* 偽類：當鼠標放到div區域上時，改變div的樣式 （webView不支持，點擊才能看到效果）*/ div:hover { background-color: green; width: 100px; height: 100px; } /* 偽類：輸入框獲得焦點（處於編輯狀態）時，改變input邊框的樣式 */ input:focus { /* 去掉外邊框的藍色 */ outline: none; /* 邊框：是一個復合屬性。(1.邊框寬度 2.邊框樣式:實線solid、虛線dashed、雙環線double 3.邊框顏色) */ border: 1px solid yellow; }
【前端筆記】? CSS