那些年学完html以后，又开始了下一步的学习，CSS就是新来的学习任务。如果说html有很多标签、属性、事件的话，那么CSS更是不得了，属性多，属性的值也很多，更老头晕的是不同浏览器支持的属性不一样，就算一样了，其效果也不一样，当然，那些年学习不用想这些，直到那些年做项目了，才知道怎么学得这么差，唉！
CSS刚学习的时候还是有很多理论上的知识，比如说盒子模型，滑动门技术、div+CSS布局等，这些原理就不说了，还是以一个例子说话吧！
示例：纯CSS下拉菜单（支持IE8与FF等）
代码：
HTML：
<ul id="parentUl"> <li> <a href="#" title="首页"> 首页</a> </li> <li> <a href="#" title="机构设置"> 机构设置 <ul> <li>子机构设置</li> <li>子机构设置</li> <li>子机构设置</li> <li>子机构设置</li> </ul> </a> </li> <li> <a href="#" title="工作动态"> 工作动态 <ul> <li>子工作动态</li> <li>子工作动态</li> <li>子工作动态</li> <li>子工作动态</li> </ul> </a> </li> <li> <a href="#" title="通知公告"> 通知公告 <ul> <li>子通知公告</li> <li>子通知公告</li> <li>子通知公告</li> <li>子通知公告</li> </ul> </a> </li> <li> <a href="#" title="最新新闻"> 最新新闻 <ul> <li>子最新新闻</li> <li>子最新新闻</li> <li>子最新新闻</li> <li>子最新新闻</li> </ul> </a> </li> <li> <a href="#" title="微新闻"> 微新闻 <ul> <li>子新闻</li> <li>子新闻</li> <li>子新闻</li> <li>子新闻</li> </ul> </a> </li> <li> <a href="#" title="微事件"> 微事件 <ul> <li>子微事件</li> <li>子微事件</li> <li>子微事件</li> <li>子微事件</li> </ul> </a> </li> </ul>
CSS：
#parentUl{
margin:0px;
padding:0px;
}
#parentUl li{
float:left;
80px;
list-style-type:none;
background-color:#ACE;
text-align:center;
line-height:25px;
}
#parentUl a:link {
position:relative;
color:#000;
text-decoration:none;
display:block;
}
#parentUl a:link ul{
display:none;
}
#parentUl a:hover ul{
display:block;
position:absolute;
left:0px;
padding:0px;
}
#parentUl a:hover ul li{
list-style-type:none;
text-align:center;
background-color:#CCC;
}
效果：
不足：在IE7中显示不正常，需要改进。
本例子主要使用了position、display与float三个CSS的属性完成，当然这仅是一个例子，与实用还有距离，这样的效果还可以使用javascript完成，若使用Jquery库会更好，因为Jquery库为我们完成了浏览器的兼容。示例做完了，现在来看一下现在的CSS对我们有什么作用，也就是CSS3.
CSS3来了
Css3来了，又添加了很多属性，比如说圆角，以前就需要用圆角的图片才能实现，而现在只需设置一个属性就可以了，那我们就来看一看新增了那些有用的属性：
border-radius:1em; 值为圆角的幅度
box-shadow: 3px 3px 6px #3CF ; 投影
border-image:url(Images/head.png) 边框图片
25% 25% 25% 25% / 25px round round;
background-size:cover; 拉伸图片
column：3 //CSS3 列
下面以一个示例来说明它的影响：
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.Picture_Image{
600px;
min-height:100px;
_height:200px;
border-radius:1em;
overflow:hidden;
background:#CCCCCC url(Images/avatarstemp.jpg) repeat-y;
padding:1em;
box-shadow: 3px 3px 6px #3CF ;
border-image:url(Images/head.png)
25% 25% 25% 25% / 25px round round;
opacity:1;
color:#FFF;
background-size:cover;
margin:0 auto;
}
h2 + p{
font-size:14px;
font-weight:bold;
z-index:100px;
color:#CFF;
}
</style>
</head>
<body>
<div class="Picture_Image">
<h2>旅游与国土资源学院副院教授</h2>
<p>应邀出席第六届中国邮轮产业发展大会</p>
<div>
由交通部中国交通运输协会、天津市人民政府联合主办，国家旅游局、中国港口协会等协办的“第六届中国邮轮产业发展大会”于10月15日至10月17日在天津召开。来自中国、新加坡、日本、美国、意大利等国家的政府官员、行业代表、专家学者等近300人出席了该会议。会议针对中国邮轮产业发展的行业政策、发言。
</div>
</div>
</body>
</html>
效果：
Css3新增了一些属性，他们在实际中的应用，减少了原来的工作量。
总结：
CSS是那些年学习web开发的第二步，以此回忆那些年的学习时光！