Java基礎 —— CSS

CSS：層疊樣式表(Cascading Style Sheets) --> 提升顯示功能，定義樣式

html提供了div與span，只爲了封裝文本數據，div爲一行數據，span爲行內的數據。

• CSS與HTML結合方式：
  • 使用html標籤中的style屬性：<div style="color:red;font:..;size:24px;background-color:blue;">...</div>
    • 使用style標籤提升代碼複用性:
      • <style> div{樣式;...} </style>
      • 或者<style type="text/css"> @import url(...); </style>
      • 或者<link rel="stylesheet" href".....css文件" type="text/css">
• 選擇器：
  • html標籤名選擇器：指定要加載樣式的標籤 div{...}(某一類標籤)。
  • 類class屬性選擇器：使用的是標籤中的class屬性，專門給css提供操做的屬性：
    • 對於標籤<div class="haha">...</div>，能夠以下修改：
      • <style type="text/css">
      • div.haha{...}
      • </style>
    • 對於有相同class的標籤，如<span class="haha">...</span>，也能夠使用以下語句：
      • <style type="text/css">
      • .haha{...}
      • </style>
  • id選擇器：使用的是標籤中的id屬性，如div#qq{...}。在通常狀況下，html標籤中的id屬性是惟一的，並且CSS與JavaScript都常用id屬性。
• 擴展選擇器：
  • 關聯選擇器：div裏面套有span標籤，則寫爲：div span{...}。
  • 組合選擇器：多重選擇，如.haha.span,#qq,.xixi{...}多個選擇使用相同的樣式，中間用逗號隔開。
  • 僞元素選擇器：好比超連接的四種狀態，未訪問，點擊，懸停，訪問後，即link,hover,active,visited四種，能夠使用a:link{...}等指定某一種的樣式。通常聲明順序爲link --> visited --> hover --> active
• 圖文混排：圖片標籤#imgtxt{float:right;}，使用的是絕對佈局。