初探CSS

 

　　之前一直没有系统的学习过CSS，这个也是我的一个失误，说实在之前一直没有把它放在眼里，一直在做后台的开发，对前台的js,css,html并不是十分的了解。
这几天抽出一点时间来做个总结，(边学边总结)

　　学习路径为：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13

      博主总结的相当到位，一天时间把上面的东西全看完了，很精彩！

 

下面是我自己的初步总结，之后在实践中补充好了(自我总结，并非帮助文档，这个只是对于我个人来说，并不希望大家看到，因为可能对大家无用)。

在WEB2.0中，CSS的职责主要是表现，结构交给HTML4，行为交给JS.

　　1.在首先定义CSS文件时，请确定CSS内容的命名规则，这个需要根据HTML结构来进行定义，别的不说，只要能够清楚表达，不用来回翻看HTML与CSS文件即可。

　　2.为了页面能够具有更好的兼容性，所以在设计表现的时候，首先要对标签重置，IE与FF不同。

body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}

　　3.在载入图片时，如果图片比较大或者加载速度慢，会给用户一种突兀的感觉，怎么办呢。先加载一个小的文件，之后再加载一个大的文件。

html{background:url(../images/bg.gif) repeat-x;}
body{background:url(../images/clouds.gif) repeat-x;}

      4.让页面内容居中，并最好设置显示内容的宽度：

#header,#banner,#content,#footer{width:1000px;  margin:0 auto;}

　　5.内边距设置：

padding-top:45px;

      6.网页里所有能够点击的链接图片，全部都有一个宽度为2px的紫色边框，去掉

img{ border:none; }

      7.如果页面中有可点击的图片链接时，想都不要想，就这么处理:否则后患无穷；

         代码如：<a id="logo" href="http://www.w3cstudy.com"><img src="images/logo.png" /></a>

　   　　　img标签是一个很特别的标签，因为它本身是内联元素，但却体现出块状元素宽高起作用的特性，这是很矛盾的地方，这就为页面布局埋下隐患，要么为内联元素，要么为块状元素，

         在这里我们更需要它的块状元素的属性，所以我们将身为内联元素的img标签转化为块状元素，用“display:block; ”。

       　　 既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，所以我们还必须把第二层的链接a，也要转化为块状元素，还是用“display:block; ”。

/* width height 根据图片的大小
#logo{display:block; width:220px; height:54px; float:left; background:#991616;}
#logo img{display:block;}

       8.两个块状元素默认是不能在同一行出现的，为了解决这个问题：

float:left;

　　 9.为了解决自身高度不能够自适应内部元素的高度:

overflow:hidden;

      10.为了解决用左侧浮动来实现2栏效果，在存在外边距的情况下就会出现IE6的双倍边距Bug：

display:inline;

11.发现效果图内的链接是红色的，鼠标移上去会出现下划线，为实现这个效果就需要对标题<h1>内的链接<a>的样式进行定义：

#leftArticle h1 a{color:#900; text-decoration:none;}
#leftArticle h1 a:hover{text-decoration:underline;}

12.垂直居中：

line-height

      13. footer是一个颜色为#393838灰色块，与上部的content距离是10px，自身高度是70px，文字颜色为灰白色(#ccc)且水平居中,文字与footer顶部的距离为18px，行距也是18px

#footer{
  background:#393838; 
  height:52px;
  line-height:18px; 
  margin-top:10px; 
  padding-top:18px;
  text-align:center;
  color:#ccc;
  font-size:12px; 
}

14.页面内的英文的字体全部是“宋体”，不是十分的美观，不如英文常用的字体verdana，那我们就给整个页面内的文字字体设置首选字体为“verdana”，只需要在body的样式里，加入“font-family”就可以了

body{
  background:url(../images/clouds.gif) repeat-x; 
  padding-top:45px; 
  font-family:Verdana, Geneva, sans-serif;
}