1. 程式人生 > >前端 CSS基礎理論總結(二)

前端 CSS基礎理論總結(二)

偽類和偽元素

  • 給連結定義樣式
    • 正常連結: :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>&copy;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>