html和css的联系

     前几天学习了一点html，今天团队为做项目一起学习时，又了解到了新的东西———css，通过组内队员的指导和对一些网站（三翼）的分析，发现了html和css之间联系密切。根据从网上了解的资料，发现html与css的联系如下：　

　　1、HTML定义网页的结构，主要让页面的内容结构化、块状化！

　　2、CSS控制HTML的标签，定义所需要的样式，使得结构和样式独立开来，这样使得样式和结构分离，达到了我们的初衷：内容更加清晰可读。在有了CSS之后，我们会发现，给我们的站点的开发带来很多的好处。下面列出几点比较突出的优点：

　　　　1）CSS使得我们的内容更加清晰，代码可读性更高主要原因是不用在标签里面写大量属性和重复性的代码。

　　　　2）提高了网页的浏览速度，减少了冗余的代码 在HTML里面，原本很多结构块，效果展示一致，只是内容变化，在HTML早期，是需要对每一块设置相同的属性，造成代码大量的冗余，文件的大小也自然有所增加，对页面的浏览速度有所减缓。

　　　　3）实现结构和样式的分离HTML标签和CSS样式的独立，使得网站页面在开发和改版的时候，容易且

　　　　简单。

 　根据对网页的一些分析，也发现了如上的一些特点，就以简单的例子来说好了。

　　1.这是三翼网站上的一段html的代码：

　　<div id="news">
　　<a href="#">日本约日本约有421万成年人患有网络依赖症</a>
　　<a href="#">日本约日本约有421万成年人患有网络依赖症</a>
　　<a href="#">日本约日本约有421万成年人患有网络依赖症</a>
　　<a href="#">日本约日本约有421万成年人患有网络依赖症</a>
　　<a href="#">日本约日本约有421万成年人患有网络依赖症</a>
　　</div>

　　2.这是与html对应的css的代码：　　

　　#news{margin-bottom:40px;float:left;}
　　#news a{
　　width:260px;
　　display:block;
　　clear:left;
　　float:left;
　　color:#625A59;
　　background-image:url(./images/rect0.png);                                                                 
　　background-position:10px 10px;
　　padding:5px 0px 0px 30px;
　　font-size:15px;
　　margin-bottom:15px;
　　}
　　#news a:hover{background-image:url(./images/rect1.png);color:#000000;}
　　可以看到 ,html定义了整个news的框架，而真正描述了“news”这个块的属性，是在css里面，例如第一行的外边距，像素，悬浮位置；还有下面的代码还描述了链接a的属性，描述了鼠标经过前后的样式变化，其中鼠标经过前后的样式截图如下：鼠标停在上面时，前面的图标变成黄色，文字的颜色加深，从background-image:url(./images/rect0.png);和{background-image:url(./images/rect1.png);color:#000000;}两句中可以看出前后的区别。

原文：http://www.cnblogs.com/yangxiaohong/p/5304264.html