CSS
-
css 層疊樣式表（cascading style sheets），作用是靜態的修飾網頁，并且可以配合各種腳本語言動態的對網頁各元素進行格式化
-
發展程序
版本： 時間： css1 1995年12月 css2 1997年初 css3 1999年開始制訂 -
前端三層技術
- html ----> 結構層 ------- 從語意的角度搭建網頁結構
- css ----> 樣式層 ------- 從美觀的角度描述頁面樣式
- JavaScript--->行為層 ------- 從互動的角度描述頁面行為
- css實作了頁面的結構和樣式分離，拯救了混亂的HTML
-
css組成
層疊層 樣式 (css中貫穿始終的加載特性) (定義如何顯示HTML元素) 層疊性 文字文本 繼承性 背景 盒模型 浮動 定位 其他
css 書寫位置
- 行內式 ： 也稱行內式，在HTML標簽上的style屬性中書寫css樣式
<div style="width:100px;height:100px;background>
行內式缺點：必須寫在標簽上，使標簽結構繁重，增加代碼量- 內嵌式 ：
缺點：結構和樣式沒有完全分離，代碼依舊書寫在HTML檔案的<style>標簽內部；css樣式只能給一個HTML檔案使用，若css代碼太多，會造成頭重腳輕，- 外聯式 ：在HTML的
<head>標簽內部使用<link>標簽引入
屬性名 屬性值 說明
rel "stylesheet" 表示引入的外部檔案與html之間的關系
href css 檔案路徑 超文本參考
type "text/css" 表示加載時代碼按照純文本形式的css代碼加載
外聯式的優點：1.實作了HTML和css完全分離；2.多個HTML檔案可以公用一個css檔案，減少代碼量，便于提取公共的css；3.實作一個css變化，多個頁面同時變化；4.一個HTML檔案可以引入多個css檔案，可以實作同一個頁面中的css代碼分層
- 匯入式 ：(不建議使用直接在html中使用）
匯入樣式和鏈接樣式比較相似，采用@import樣式匯入CSS樣式表，在HTML初始化時，會被匯入到HTML或者CSS檔案中，成為檔案的一部分，類似第二種內嵌樣式，會在加載html檔案后在加載樣式所以有時會出現沒有樣式的情況(很短暫)，然后就有樣式了
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
CSS規則
css規則由兩個主要部分構成：選擇器，以及一潭訓多條宣告
多條樣式屬性
p{ width : 400px; font-size : 14px;}
| | |
選 屬 屬
擇 性 性
器 名 值
樣式規則
1.內嵌式中所有代碼必須寫在<head>標簽內的<style>標簽內
2.給每個選擇器添加的樣式屬性都必須寫在一對大括號{}之內
3每條屬性后面的分號必須寫，若不寫，會導致后面的代碼加載錯誤
4.上傳服務器時，常常使用緊湊格式的css樣式格式，減少不必要的空白字符，壓縮檔案大小，便于傳輸
(有專門的網站可以進行css代碼壓縮/解壓縮格式化)
CSS常用樣式
顏色color：給文字設定顏色的
字體font-family：元素內文字的字體，字體屬于font綜合屬性的一個單一屬性，屬性值可以有多個，值之間用逗號分隔，
瀏覽器中加載的字體是用戶機器中自帶的，如果電腦沒有設定的字體則加載失敗，需要查找下一個，所有往往在最后設定一個所有機器都具備的通用字體作為后路，
盒子模型物體化——三屬性
- width、height、background-color
CSS 高級選擇器
- 選擇器：選擇要添加樣式的HTML標簽的一種方法、模式
- css2.1版本有7中選擇器：
基礎選擇器：標簽選擇器、id選擇器、類選擇器、通配符選擇器
高級選擇器：后代選擇器、交集選擇器、并集選擇器
- 標簽選擇器：通過標簽名選擇標簽元素，選中的是HTML檔案中所有的同名標簽，（不受嵌套關系影響，依舊能選中）
- id選擇器： 通過標簽上的id屬性去選擇標簽，
如果希望多個標簽設定相同的樣式，使用id選擇器的話，必須給這多個標簽去不同的id名，分別選中設定，【書寫：#id屬性值】- 類選擇器：通過標簽上的class屬性去選擇標簽，
選擇的是頁面中所有class屬性值相同的標簽，【書寫：.class屬性值】- 通配符選擇器：通過一個特殊符號選擇頁面內所有的標簽，選擇的是
<html>標簽在內的所有標簽，【書寫：* 】
缺點：選擇效率低，會讓不需要的標簽也加載一次樣式，導致瀏覽器多做無用的作業，- 后代選擇器：包含選擇器，通過標簽之間存的嵌套關系去選擇元素，相當于基礎選擇器，【書寫：空格表示后代，空格前面的選擇器選中的標簽是后面選擇器選中的祖先級】
代碼示例：
<style>
.b1 ul li p{
color:red;
}
</style>
......
<div >
<ul>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
</ul>
</div>
- 交集選擇器：通過一個標簽上滿足所有基礎選擇器稍微需求去選擇標簽，如果一個條件不滿足都不能被選中，常見的是標簽與類的交集，
【書寫：基礎選擇器進行連續書寫，如果有標簽選擇器參與交集，必須書寫在開頭，
還可以進行類名的連續交集，交集選擇器可以作為其他高級選擇器的組成部分，（IE6不支持類名連續交集寫法）
】
代碼示例：
<style>
p.demo{
color:red;
}//顏色為紅色
.d1 p.demo{
color:red;
}//這個覆寫了上面的直接為綠色
</style>
....
<div >
<ul>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p >b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
</ul>
</div>
- 并集選擇器：可以將前面的6種選擇器中間用逗號進行分隔，最后一個不寫逗號，選中的是所有的單獨選擇器選中的標簽的并集集合，
代碼示例：
<style>
div,.demo{
color:red;
}
</style>
.....
<div >
<ul>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p >b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
<li><p>b1 標簽 里的 li標簽 內的段落p </p></li>
</ul>
</div>
如果多個標簽具有公共樣式，但是不能用一個選擇器選中，可以使用并集寫法，也可以用該方法，進行默認樣式清除，替換通配符的功能，
body,h2,div,ul,li,p {
margin:0;
pading:0;
}
- 行內式樣式 與 內嵌式 或 外鏈式樣式比較權重時，行內式權重最高，
- 但是，與!important關鍵字相比權重要低的~
CSS 層疊式
- 繼承性：樣式可以從祖先級繼承而來
- 層疊性：多個選擇器在進行對比的程序中，最終只有一個屬性會加載成功，它會層疊、覆寫掉其他的屬性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/191495.html
標籤：Html/Css
上一篇：BFC規則以及解決方法
下一篇：BFC規則以及解決方法