CSS层叠样式表单

1、CSS概念：层叠样式表单（Cascading Style Sheet）用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2、CSS的书写格式：属性:属性值;属性1:属性值1;属性2:属性值2

<span style="font-family:Microsoft YaHei;">color:red;background-color:blue</span>

注意 ： 属性和值之间用 : 分隔。属性和属性之间用 ; 分隔。

3、CSS与HTML的结合使用

1）第一种：对div标签中数据的字体、颜色等格式进行设计。该方式是针对于该标签的个性化样式而言。

<span style="font-family:Microsoft YaHei;"><div style="color:red;font-size:24px"></div></span>

2）第二种：把样式代码封装到style标签当中。该方式用于当"单页面"中多个标签公用相同的样式属性的时候。

<span style="font-family:Microsoft YaHei;"><style type="text/css"> 
 	div{color:blue;font-size:24px;background-color: #CC00CC}
	span{color:green;font-size:24px;background-color: #CC00CC}
 </style></span>

其中，<style type="text/css"> </style> 这对标签只能出现在head和body之间 。

3）第三种：把样式代码封装到一个单独的(**.css)文件当中,需要引用这个文件中包含样式的页面通过在<style..>标签中写入@import url(.css文件相对路径)的方式引入样式。该方式用于当"多页面"中多个标签公用相同的样式属性的时候。

<style type="text/css"> 
 	@import url(divspan.css);
 	@import url(p.css);
 	@import url(total.css);
 </style>

在文件外部写一个专门的css文件，然后再使用的时候调用这个css文件，可使代码看上去更加简洁，也方便以后的修改。

4）第四种：通过link标签引入外部文件，该方式用于 当"多页面"中多个标签公用相同的样式属性的时候。

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

total.css文件是经过两次封装后的结果，简化代码。

注意：rel表示引入的外部文件和当前页面是啥关系，这个属性不能忘记写，因为link还可以引入rss等类型的文件。

4、选择器：用来确定被应用样式(操作)的标签的一种语法。

1）标签名称选择器的定义

div,span是一个标签的名称，通过标签名称来确定被操作的元素的范围。称之为标签名称选择器

div{color:blue;font-size:24px;background-color: #CC00CC}
span{color:green;font-size:24px;background-color: #CC00CC}

2）类选择器

.second{color:red;}
<div class=“second”>

通过标签的class来划分类别。注意选择器的前面必须有点（.），在页面调用的时候需要class=“类选择器名”来调用。

3）id选择器

#span1{color:green;}
<div id=“span1”>

通过标签属性id的值来确定要操作的标签，id的值要保证唯一性。在id选择器的前面需要加（#）来区分。

4）选择器的优先级

标签中的style属性>id选择器>class选择器>标签名称选择器。

5）组合选择器

selector1,selector2{css代码}

让多个选择器公用相同的代码。逗号（，）分隔的选择器共用同样的样式代码.

6）关联选择器：一层一层的缩小范围,来确定被操作的元素

div span{color:red}  

选择器中间是 空格，语法selector1 selector2，这里的选择器可以是任意类型的。

7）伪类选择器

伪类的名称是固定的，系统分配的。有些伪类选择器只对a标签有效，有些伪类选择器对所有标签都有效：

a:link  没有访问过的正常的a标签

a:visited 已经被访问过的a标签

a:hover 鼠标悬停在a标签上

a:active 鼠标单击a标签左键按下没有松开时

5、css的定位模型

1）基本流模型

类似于生活中写字，写满一行再写下一行，页面上的标签和文字的顺序由html代码来决定。

2）浮动流模型

<div style=“float:left”>

脱离基本流，按照指定的方向浮动，浮动时遮挡的文字会环绕在图片的周围，避免被遮挡。

浮动定位的标签他的位置不再由html代码来决定，而是由float属性值来决定。

3）位置模型

     a）按照指定的位置来显示相关的标签，必须要通过css代码中的position属性来实现。

     b）position的值是absolute的时候，脱离了基本流，通过top和left定位当前元素显示的位置。

     c）position的值是relative的时候，没有脱离基本流，通过top和left定位当前元素显示的位置，当前的top和left是相对于元素原来的位置而言的。

     d）relative或者是absolute元素的top和left是相对于第一个包含该元素的并且是绝对定位或者是相对定位的元素而言。

     e）当多个绝对或者相对定位的元素重叠在一起的时候，谁的z-index值大，谁就在最顶端。

     f）position的值是static的时候，没有基本流，通过top和left定位当前元素显示的位置无效，相当于你没有采位置模型定位。

4）盒子模型

     a）标签

     b）标签的边框      l border，边框

     c）标签的外边距   l margin，外边距

     d）标签的内边距   l padding，内边距

     e）标签中的内容   l width，height本身的尺寸。

盒子模型主要是用来计算元素在页面上所占用的实际空间的。

元素占用的宽度=margin+border+padding+width(自身的宽度)

元素占用的高度=margin+border+padding+height(自身的高度)