DIV和CSS

HTML的块标签
< div> < /div>:默认一个div独占一行
< span>< /span>：默认在同一行
CSS的概述：
什么是CSS
1.css指层叠样式表（Cascading Style Sheets）
2.样式定义如何显示HTML元素
3.样式通常存储在样式表中
4.把样式添加到HTML4.0是为了解决内容与表现分离的问题
5.外部样式可以极大提高工作效率
6.外部样式表通常存储在Css文件中
7.多个样式定义可以层叠为一
CSS的引入方式
行内样式：直接在HTML的元素上使用style属性设置CSS

<h1 style="color: red;font-size:50px;">标题</h1>

页面内样式;在HTML的< head>标签中使用< style>标签设置CSS

<style>
			h1{
				color: blue;
				font-size: 40px;
			}
		</style>

外部样式：单独定一个.css的文件。在HTML中引入该css文件

<link href="../css/demo01.css" rel="stylesheet" type="text/css" /></head>

CSS的选择器
元素选择器：

div{
				border: 1px solid blue;
				width: 40px;
				height: 45px;
			}

ID选择器：

#d1{
				border: 2px solid red;
			}

类选择器

divClass{
				border: 2px solid yellow;
			}

CSS的浮动
使用float属性可以完成DIV的浮动
Float属性的取值
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
inhent 规定应该从父元素继承float属性的值
清楚浮动效果：使用clear属性进行清除
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
none 默认值，允许浮动元素出现在两侧
inhent 规定应该从父元素继承clear属性的值
CSS的其他选择器
属性选择器

<style>
			input[type="text"]{
				background-color: red;
			}
		</style>

后代选择器
div span查找的是所有div中的所有的span元素

h1 strong{
color:red
}
<h1>
    This is <strong>very</strong> <strong>very</strong> important.
    </h1>
    <h1>
    This is
    <strong>very</strong>
    <em>really
    <strong>very<strong>
    </em>
     important
    </h1>

子元素选择器：
div>span找这个div中的第一层级的span元素

h1>strong{
color:red;
}
<h1>
This is<strong>very</strong> <strong>very</strong>important
</h1>
<h1>
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>

并列选择器
选择器，选择器{
}
CSS的样式
背景

文本

字体

列表

CSS中的盒子模型
内边距：padding


边框:border
外边距：margin

CSS中的定位
position属性设置定位：

• relative:相对定位
• absolute:绝对定位
  使用另外两个属性:left,top