初识CSS

一、 CSS简介

（1）什么是CSS？

级联样式表（CascadingStyle Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。

（2）特点：

实现实现网页内容与样式的分离；

二、CSS选择器：

（1）类型：

Id选择器，类选择器，HTML标签选择器；

（2）优先级：

Id选择器〉类选择器 〉HTML标签选择器；

三、CSS核心内容

（1）标准流

1.理解：

个人觉得就是元素的一种排序方式；

2.遵循的排序方式？

按照书写顺序排列显示；

（2）盒子模型

1.类似图片

             

2.模型

            

（注释）：

             margin：外边距（上、下、左、右）

             padding：内边距（上、下、左、右）

             content：内容（宽、高）

             border：画框（宽） 

3.使用

 A: 方法一：

.menu{  /* 栏目样式*/
Border-width:1px;  /* 画框设定 */
Border-color:#00f;
Border-style:dashed;
}

B: 方法二：

.menu{  /* 栏目样式*/
Border:1px #00f dashed /* 画框设定 */
}

（3）浮动

1.用处：

克服块级元素一个元素占据一行的缺点。

2.浮动：

float:left；/* 盒子向左浮动*/

（此时不再是标准流，而是非标准流。）

3.清除浮动：

clear:left; /* 清楚盒子向左浮动*/

（4）定位

1.注意：

设计定位后，还需设计相对偏移量（上左下右）

2.分类：

相对定位和绝对定位

3.两者区别：

（1）相对定位：没有脱离原来的标准流，相对于原来的位置移动

.ttt{
Position:relative;  /* 相对定位*/
Top:20px;
}

（2）绝对定位：脱离原来的标准流，绝对于包含此盒子的更外一层盒子移动

.ttt{
Position:absolute;  /* 绝对定位*/
Top:20px;
} 

四、行列元素和块级元素

（1）行列元素：

<span class="menu"> 栏目一</span>

（2）块级元素：

<div class="menu"> 栏目一</div>

（3）行列元素转化成块级元素

（1）HTML中，将span换成div

（2）CSS样式表中：

.menu{
Display:block;
}

最后，重点注意：在写HTML时，如果要用CSS布局的话，千万不要忘了DOCTYPE文档类型定义！