本章僅僅只是對css的乙個彙總,方便查詢使用
css 指層疊樣式表 (cascading style sheets),他的作用是為了顯示html元素,優點在於讓定義樣式更加簡單,讓網頁的內容和表現分離,使多個樣式可以層疊使用。
css的使用格式是選擇器+宣告
selector
p
在這裡臨時插入css的三個特點:
1.當給父元素設定一些屬性,子元素(所有後代)也可以使用
(這裡注意,
層疊是指當有多個選擇器給同乙個標籤設定了相同屬性的時候,會選擇優先權高的
優先順序是針對多選一時的解決方案,多選擇器對同一標籤同一屬性進行選擇時的解決。
即針對於層疊。
判斷方式
解釋繼承
誰最近聽誰的
同型別選擇器直接選中
誰在後面聽誰的
不同型別選擇器直接選中
按照選擇器優先順序:id>類》標籤》萬用字元》繼承》瀏覽器
(小知識:我們可以在屬性後面,分號前面使用!important來提公升某個屬性的優先順序到最大,important只可以對直接選中有效)
例如:
根據指定的id找到對應的標籤,然後設定樣式
#id
//注意點:
//1.同乙個介面,id不可重複
//2.注意#號
不可是數字,不可使html標籤,只可是數字,字母,下劃線
一般給js使用
根據指定的類名找到對應的標籤
.類名
//注意點:
//1.每個標籤都可設定類名
//2.類名可重複
//3.注意加上點
//4.注意命名規範,和id一樣
//5.類名是專門針對css的
//6.每個標籤可以有多個類名,中間用空格分開
什麼是類,類就是帶有類似樣式的標籤,所以要學會抽取公共類,將乙個類繫結給標籤,類似於先想好類,再賦予標籤,這更符合樣式與**分離,更加簡單高效。
而id呢,就是先有標籤,然後專門為其賦予樣式
根據指定標籤的名稱,在當前頁面查詢所有該名稱的標籤,然後設定屬性
標籤名稱
//注意點:
//1.標籤選擇器選中的是所有標籤
//2.無論標籤多深都能選中
//3.任何html標籤均可以
下面以**列舉其他的選擇方式,其實就是一種組合
名稱
格式作用
後代選擇器
標籤1 標籤2
特點是1.中間使用空格,會查詢後面所有的
2.可以用空格一直延續下去
3.後代選擇器理解為在什麼下面查詢某個選擇器 ,所以後面的可以是標籤選擇器,也可以是其他選擇器
子元素選擇器
標籤1>標籤2
特點是:
1.只會查詢兒子,不會查詢其他,即下乙個
2.後面可以是其他選擇器
3.可以使用》一直延續
交集選擇器
選擇器1選擇器2
相交的標籤,可以是3種選擇器任何一種
並集選擇器
選擇器1,選擇器2
多個選擇器選擇的標籤同時設定,相當於兩個選擇器選中的都設定
相鄰兄弟選擇器
選擇器1+選擇器2{}
後面緊跟的那個
通用兄弟選擇器
選擇器1~選擇器1{}
後面所有的
序選擇器:同級別第幾個
選擇器:first/:last/:nth/:nth-last/:only-child{}
同級別第一,最後,第幾個,倒數第幾個,父元素中唯一的那個
序選擇器:同級別同型別第幾個
選擇器:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-child-of-type{}
同級別同型別第一,同型別最後,同型別第幾個,同型別倒數第幾個,同型別父元素中唯一的那個
序其他odd/even/xn+y
奇數標籤/偶數標籤/公式
屬性選擇器
選擇器 [屬性]{}
通過選擇器+屬性,所有帶某個屬性的元素,例如img[alt]{},所有帶alt屬性的img元素
選擇器[屬性][屬性]{}
所有帶有兩個屬性的元素
選擇器[屬性=值]{}
屬性等於某個值的元素
選擇器[屬性^=值]{}
屬性的取值以value開頭的元素
選擇器[屬性^=值]{}
屬性的取值以value開頭的元素
選擇器[屬性*=值]{}
屬性的取值包含value的元素
通配選擇器
*{}所有標籤
子元素選擇器和兄弟選擇器的區別在於:前者是裡面的,後者是後面的
css的使用可以理解為怎樣把css樣式放入網頁中
css插入樣式表的方式主要有三種
外部的嘛,就是與我們的html檔案想分離,然後再在html頁面中匯入的一種方式,優點在於可以實現了真正的分離,可以在多個頁面中使用聽乙個樣式表
rel=」stylesheet」
type=」text/css」 href=」acss.css」>
head>
內部,顧名思義,就是將我們的css樣式定義在html檔案中
h
style>
head>
內聯樣式可以理解為乙個臨時的只針對某乙個的樣式表
style=」color:red;font-size:20px;」>
p>
//注意,內聯樣式沒有大括號
怎麼理解呢?
比如乙個p標籤,當內部樣式定義了兩個
text-align
:left; font-size
:10pt;
而外部樣式定義了三個:
color
:red;
text-align
:right; font-size
:18pt;
那麼p標籤採用的就會是:
color
:red;
text-align
:left;font-size
:10pt;
意味著相同的樣式定義優先選用了優先順序打的,而沒有的照搬了下來。
今天就先將這些列舉出來,有時間再整理後面的
css選擇器編寫及常用樣式
css就是在style中編寫樣式,有三種寫法 1 在body中的標籤中設定style屬性,再在style中設定樣式 div style background color 0e84b5 height 48px 自強不息 div 設定塊級標籤div背景色和高度 2 在head中寫上style標籤,並在其...
CSS樣式選擇器
1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...
CSS樣式選擇器
樣式選擇器 每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器類選擇器 以英文圓點開頭,不可以使用數字或中文起名 使用方法 1.使用class 類選擇器名 為標籤設定乙個類,如下 膽小如鼠 2.設定類選擇器css樣式,如下 stress id選擇器 id選擇器類似於類選擇器 1.為標籤設定i...