CSS概念，引入，選擇器

層疊樣式表,定義如何顯示html元素.

不推薦使用此方式

結構 和 樣式的 雜糅會影響後期的維護

style="

color: red
">hello world.

<

head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
p
style
>
head
>

<

link 
href
="mystyle.css"
rel="stylesheet"
type
="text/css"
/>

rel固定為 stylesheet

type固定為 text/css

匯入式會在整個網頁裝載完後再裝載css檔案

因此這就導致了乙個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。

使用鏈結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載css檔案，因此顯示出來的網頁從一開始就是帶樣式的效果。

li內部的a標籤設定字型顏色

*/li a

/*

選擇所有父級是 元素的 元素
*/div>p 

/*

選擇所有緊接著元素之後的元素
*/div+p 

/*

i1後面所有的兄弟p標籤
*/#i1~p 

/*

用於選取帶有指定屬性的元素。
*/p[title] 
/*用於選取帶有指定屬性和值的元素。
*/p[title="213"] 
不怎麼常用的屬性選擇器:
/*找到所有title屬性以hello開頭的元素
*/[title^="hello"] 
/*找到所有title屬性以hello結尾的元素
*/[title$="hello"] 
/*找到所有title屬性中包含（字串包含）hello的元素
*/[title*="hello"] 
/*找到所有title屬性(有多個值或值以空格分割)中有乙個值為hello的元素：
*/[title~="hello"] 

div標籤和p標籤統一設定字型為紅色。

div, p

div,

p 

.c1 p

/*

未訪問的鏈結 
*/a:link 
/*已訪問的鏈結 
*/a:visited 
/*滑鼠移動到鏈結上 
*/a:hover 
/*選定的鏈結 
*/a:active 
/*input輸入框獲取焦點時樣式
*/input:focus 

/*

在每個元素內容首字母新增樣式
*/p:first-letter 

/*

在每個元素之前插入內容
*/p:before 

/*

在每個元素之後插入內容
*/p:after 

css的繼承機制得以讓樣式可以給予標籤和其後代

選擇器的優先順序權重

內聯樣式 　　1000

id選擇器 　　 100

類選擇器　　 10 

元素選擇器 　1

ps:

但是某些屬性是無法繼承的比如: border,  margin,  padding,  background等

權重計算永不進製

群組選擇器中 ,  各個選擇器由自身的權重決定 , 互相之間是獨立的

後代 / 子代 / 偽類 選擇器優先順序計算按照 各組成部分相加得到  

除此之外還可以通過新增 !important 方式來強制讓樣式生效，但並不推薦使用。

過多的使用!important 會使樣式檔案混亂不易維護。

萬不得已再用 !important 吧

第17天 CSS引入 選擇器優先順序（中級）

1，行內式css aa 2，內嵌式樣式 one 3，外鏈式 二，font字型綜合寫 字型 字型加粗字型大小 行高字型 必須有字型大小和字型。字型重量 大膽的 700 s del刪除線 我傾向於 u ins下劃線 字型加粗font weight 700 讓字型不粗粗 font weight norma...

第17天 CSS引入 選擇器優先順序（中級）

1 行內式 css aa2 內嵌式樣式 3 外鏈式 二 font 字型綜合寫 font 字型加粗 字型大小 行高 字型 必須有字型大小和字型。font weight bold 700 s del 刪除線 i em 傾斜 u ins 下劃線 字型加粗 font weight 700 讓字型不加粗 fo...

CSS基礎 引入方法，選擇器，繼承

一.css引入方法 行內式 嵌入式 匯入式 鏈結式。1 行內式。即 在標籤的style屬性中設定css樣式。例子 行內式 2 嵌入式 即 將頁面各種元素的設定集中寫在標籤裡。例子 3 匯入式 即 將乙個外部css檔案引入css檔案或html檔案,注意此方法既能在css檔案裡使用也能夠在html的標籤...