前端 CSS基礎理論總結(二)
阿新 • • 發佈:2019-01-10
偽類和偽元素
- 給連結定義樣式
- 正常連結: :link
- 訪問過的連結: :visited(只能定義字型顏色)
- 滑鼠滑過的連結: :hover
- 正在點選的連結: :active
- 其他
- 獲取焦點: :focus
- 指定元素前: :before
- 指定元素後: :after
- 選中的元素: ::selection
- 其他選擇器
- 給段落定義樣式
- 首字母: :first-letter
- 首行: :first-line
- 屬性選擇器 可以挑選帶有特殊屬性的標籤。
- 語法:
- 給段落定義樣式
[屬性名]
[屬性名="屬性值"]
[屬性名-="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
子元素選擇器
- 子元素選擇器可以給另一個元素的子元素設定樣式
- 語法: 父元素>子元素{ }
- 比如body>h1將選擇body子標籤中的所有h1標籤
其他子元素選擇器
- 選擇第一個子標籤 :first-child
- 選擇最後一個子標籤 :last-child
- 選擇指定位置的子元素 :nth-child
- 選擇指定型別的子元素
:first-of-type
:last-of-type
:nth-of-type
兄弟選擇器
- 除了根據祖先父子關係,還可以根據兄弟關係查詢元素。
- 語法:
- 查詢後邊一個兄弟元素
- 兄弟元素 + 兄弟元素{ }
- 查詢後邊所有的兄弟元素
- 兄弟元素 ~ 兄弟元素{ }
- 查詢後邊一個兄弟元素
否定偽類
- 否定偽類可以幫助我們選擇不是其他東西的某種東西
- 語法 :not(選擇器){ }
- 比如p:nto(.hello)表示選擇所有的p元素但是class為hello的除外
繼承
- 就像父親的財產會遺傳給兒子一樣,在CSS中祖先元素的樣式同樣也會被子元素繼承
- 繼承是指應用在一個標籤上的那些CSS樣式會同時被應用到其內嵌標籤上
- 比如為父元素設定了字型顏色,子元素也會應用上相同的顏色
- 當然並不是所有的樣式都會被繼承
選擇器的優先順序
- 內聯樣式:優先順序1000
- id選擇器:優先順序100
- 類、屬性、偽類選擇器:優先順序10
- 元素選擇器:優先順序1
- 萬用字元:優先順序0
- 繼承:沒有優先順序
文字標籤
- < em >和< strong >
- em標籤用於表示一段內容中的著重點
- strong標籤用於表示一個內容的重要性
- 這兩個標籤可以單獨使用,也可以一起使用
<p>
<strong>警告:任何情況下不要接近殭屍。</strong>
他們只是<em>看起來</em>很友好,實際上他們是為了吃你的胳膊!
</p>
- 通常em顯示為斜體,而strong顯示為粗體
- < i >和< b >
- i標籤會使文字變成斜體
- b標籤會使文字變成粗體
- 這兩個標籤和em和strong類似,但是這兩個標籤沒有語義
- 所以根據html5標準,當我們只想設定文字特殊顯示,而不需要強調內容時就可以使用i和b標籤
- < small >
- small標籤表示細則一類的旁註,通常包括免責宣告、注意事項、法律限制、版權資訊等
- 瀏覽器在顯示small標籤時會顯示一個比父元素小的字號
<p><small>©2018愛奇藝.保留所有權利.</small></p>
- < cite >
- 使用cite標籤可以指明對某內容的引用或參考。例如,戲劇、文章或圖書的標題,歌曲、電影、照片或雕塑的名稱等
<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事</p>
- < blockquote >和< q >
- blockquote和q表示標記引用的文字
- blockquote用於長引用,q用於短引用
- 在兩個標籤中還可以使用cite屬性來表示引用的地址
孟子曾經說過:
<blockquote>天將降大任於斯人也</blockquote>
他說的真對啊!
<p>孔子曾經說過:<q>學而時習之不亦悅乎</q><p>
- < sup >和< sub >
- sup和sub用於定義上標和下標
- 上標主要用於表示類似於103中的3
- 下標則用於表示類似於H2O中的2
- < ins >和< del >
- ins表示插入的內容,顯示時通常會加上下劃線
- del表示刪除的內容,顯示時通常會加上刪除線
- < code >和< pre >
- 如果你的內容包含程式碼示例或檔名,就可以使用code元素
- pre元素表示的時預格式化文字,可以使用pre包住code來表示一段程式碼
<pre>
<code>
function fun(){
alert("hello")
}
</code>
</pre>