JavaWeb_02_CSS学习

CSS简介

Cascading Style Sheets (CSS)层叠样式表:en.wikipedia.org

• 层叠：一层一层的叠加样式
• 样式表：提供更多属性和属性值实现更多样式变化
• css将显示样式和网页内容分离

CSS和HTML的结合方式（四种结合方式）

（1）在每个html标签上面都有一个属性style,把css和html结合在一起

<div style="background-color:red; color:green;">

（2）使用html的一个标签实现<style>标签，写在head里面

<style type="text/css">
	css代码;
</style>

<style type="text/css">
	div {
		background-color: blue;
		color: red;
	}
</style>

（3）在style标签里面使用语句（在某些浏览器下不起作用）

@import url(css文件的路径);

- 第一步，创建一个css文件
	<style type="text/css">
		@import url(div.css);
	</style>

（4）使用头标签link，引入外部css文件

• 第一步，创建一个css文件
• <link rel="stylesheet" type="text/css" href="css文件的路径" />

CSS的基本选择器

• 标签选择器 ；使用标签名作为选择器的名称
• class选择器
  
  每个html标签都有一个class属性

// css内
.xxx {
        background-color:red;
        color:green;
}
// html内
<div class="xxx">aaa</div>

• id选择器 #名称

CSS基本选择器的优先级

标签内的style属性 > id选择器 > class选择器 > 标签选择器

扩展选择器（了解）

• 关联选择器
  • 设置嵌套标签的样式 div p {}
• 组合选择器
  • 不同的标签具有相同的样式 div,p {}
• 伪元素选择器
  • 超链接的状态
    • 原始：link
    • 悬停：hover
    • 点击：active
    • 点击之后：visited

css的盒子模型

在进行布局前需要报数据封装到一块一块的区域内（div）

• 边框

  eg:border: 2px solid red;  //(粗细|样式|颜色)
  border:统一设置
  上 border-top
  下 border-bottom
  左 border-left
  右 border-right
  

• 内边距
  
  padding:20px; 使用padding统一设置
  
  也可以分别设置
  
  上下左右四个内边距
• 外边距
  
  margin:20px;
  
  可以使用margin统一设置
  
  也可以分别设置
  
  上下左右四个外边距

CSS的布局的漂浮（了解）

float:
	* 属性值
	left:文本流向对象的右边
	right:文本流向对象的左边

CSS布局的定位（了解）

position:
	* 属性值
		* absolute:
		  -> 将对象从文档流中拖出
		  -> 可以是top、bottom等属性进行定位
		* relative:
		  -> 不会把对象从文档流中拖出
		  -> 可以使用top、bottom等属性进行定位