div+css

1.DIV相关的技术

• Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。
• Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。

2.CSS相关的知识

2.1 什么是css?

CSS概述

• CSS指层叠样式表
• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 把样式添加到HTML4.0中是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在CSS文件中
• 多个样式定义可层叠为一

2.2 CSS的作用？

• HTML：它是整个网站的骨架。
• CSS：它是对整个网站骨架的内容进行美化(修饰)

2.3 CSS如何使用？

语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}

2.4 CSS的引入方式

CSS 的引入方式分为三种

第一种：行内引入

<div style="color:red;font-size: 100px;">
JavaEE0516就业班
</div>	

第二种：内部引入方式

<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>

第三种方式：外部引入

如果<style type=”text/css”></style>
优先级问题:
谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则)

2.5 CSS的选择器

CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)

• ID 选择器

  #id 属性名{
  属性名 1:属性值 1;
  属性名 2:属性值 2;
  属性名 3:属性值 3;
  id保证唯一

• 元素选择器

  元素名{
  属性名 1:属性值 1;
  属性名 2:属性值 2;
  属性名 3:属性值 3;
  }
  如果多个相同的元素设置相同的样式，使用此种方式最为合适。

• 类选择器

  .类名{
  属性名 1:属性值 1;
  属性名 2:属性值 2;
  属性名 3:属性值 3;
  }
  对多个元素设置相同的样式，此时使用类选择器比较合适。

2.6 其它选择器

• 层选择器

  元素名 子元素名{
  属性名 1:属性值 1;
  属性名 2:属性值 2;
  属性名 3:属性值 3;
  }

• 属性选择器

  元素名[属性名=”属性值”]{
  属性名 1:属性值 1;
  属性名 2:属性值 2;
  属性名 3:属性值 3;
  }

2.7 CSS的浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。’

浮动float：left(向左)/right(向右)/none(不浮动);
清除浮动clear:both;

2.8 CSS中如何让块级元素成为内联元素

display:inline;

CSS中去掉超链接的下划线

a{
text-decoration: none;
}

让div居中

margin：0px auto;

块级元素内容居中

text-align:center;