CSS---基础

1、css层叠样式表 

2、 div+css是网站标准  

  div是用于存放内容的（文字、图片等等）

css主要用于说明div中的内容的样式（大小，颜色，背景，位置）

   好处：1、减少大量的table，tr，td   html变简单

       2、内容和样式分离

     3、符合搜索引擎的喜好

     4、节约带宽

3、初识CSS

   〈span style=""font-size:N;color:Color;等等〉〈/span〉

    <元素名 style=“属性名：属性值；”/>

 

    使用CSS可以统一网站风格

    写五个栏目

    几个图片是灰色  img{ filter:gray;}  a:link   a:hover鼠标停在上面

 

4、选择器  <link type="text/css"  rel="stylesheet" href="my.css"/>

     .style就是类选择器 

      .类选择器名{

属性名：属性值；

}  

     案例：五个新闻

     

     id选择器

     基本用法：

      #id选择器名{

属性名：属性值；

} 

 

     <元素名 id=“id选择器的名称”></元素名>

 

     html选择器

     body{

属性名：属性值；

     }

 

    结论：当一个元素同时被id选择器，类选择器，html选择器使用时

         id>类>html  选择器

    a:link {}  

    a:hover{} 鼠标放在超链接上面

    a:visited {}  超链接被点击完之后

 

    通配符选择器  *{  margin:   padding:   }设置页面距离

 

    父子选择器  #style     #style+已经存在的标记 如span

      <span id="">123<span>456</span></span> 

      **父子选择器可以有多级 

*父子选择器适用于id选择器和类选择器

一个元素最多有一个id选择器，但可以有多个类选择器

一个元素有多个类选择器时，用空格分开   当发生冲突时 哪个CSS类型写在后面就以谁为主

<span class="style1 style2 style3"></span>

 

     在有些CSS中，我们可以把多个类选择器或者ID选择器共同的部分提出，写在一起，可以简化CSS文件

.style1,.style2,.style3{

color:....;

}

5、块元素和行内元素

   行内元素又叫内联元素（inline element）  

常见的有元素<span><a>  只覆盖内容宽度，默认不会换行，行内元素一般放文本或其他的行内元素 

   块元素（block element） 

常见的有元素<div><p> 不管内容多少，他都要换行，同时占满整行  可以放文本，行内元素，块元素

   将行内元素与块元素相互转换 

display：block；所有使用到某某样式的内容都转换为块元素显示

display：inline；所有使用到某某样式的内容都转换为行内元素显示

 

6、标准流和非标准流

   标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素显示在后面，默认的布局方式

   非标准流：在实际网页布局中，我们有时需要使用非标准的流的方式布局（让某个元素脱离他本身的位置）