天天看点

DIV+CSS学习(一)

     今天在别的地方看到一个DIV+CSS的学习教程,感觉还不错,于是自己也跟着学习然后记录下,便于以后查看。

    在过去的页面中,我们经常会使用表格来进行布局,而使用CSS排版后,会使网页代码简洁,表现和内容相分离,维护方便,能兼容更多的浏览器,也能在移动设备上更好的进行浏览操作。

 A. CSS的样式加载可以有以下四种方式

1. 外部样式

    如: <link href="other.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css"/>,这样就可以将other.css资源文件加载到当前页面中,这样的好处时other.css文件可以被多个页面使用,能够很好的重用。

2.内部样式

   如:

<style type="text/css">
h2{
  color:red;
}
</style>
           

   该样式写在head标签内部,只能供当前页面使用,不能在其他页面进行使用。

3.行内样式

   如:

<p style="color:red;">Hello,World!!</p>
           

    该样式只能作用于当前的标签,所以一般不建议使用。

4.导入样式

  如:

@import url("global.css");
           

  这个一般是在css文件中导入其他的css文件,就跟我们在写jsp页面时,用include标签导入其他页面类似。

 B.css的优先级问题

    1.id的优先级高于class

       即当我们写 #cssIdname这样的样式和.cssclassName时,#cssIdname会生效

     2.后面的样式会覆盖前面的样式

     3. 指定的样式高于覆盖样式

     4.行内样式高于其他