標籤：str png double 檔案 複合 lis 網頁 相同 技術分享
1. 什麼是CSSCSS的編寫格式是索引值對形式的，比如
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; } <div class="one">3333333</div> <p class="one">444444</p>
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
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
