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;}，使用的是绝对布局。