深入学习CSS_css的深入学习-优快云博客

本文链接：https://blog.youkuaiyun.com/u010955843/article/details/42125447

什么是CSS？在之前的这篇文章中已经介绍了初步的介绍，详细请看http://blog.youkuaiyun.com/u010955843/article/details/41791669。

DIv加CSS进一步讲解了CSS中的内容，先总结如下图：

其实在实际开发中，我们通常采用是外部样式的导入，这样做的好处是对于很对有同样设计样式的页面可以实现样式的共享，这样我们不仅仅可以节省了大量的时间，并且也方便我们可以灵活的调用的样式。

Css样式设计效果真的很神奇，我们来做几个例子。

² 导航栏的制作

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>这是导航栏设置</title>
	<style type="text/css">
	body{
	background-color:#FF99CC;
	}
	ul{
	font-family:"宋体";
	font-weight:bold;
	font-size:20px;
	
	}
	</style>
</head>

<body>
	<ul>
		<li><a href="#home">首页</a></li>
		<li><a href="#news">新闻</a></li>
		<li><a href="#contact">联系</a></li>
		<li><a href="#about">关于</a></li>
	</ul>
</body>
</html></strong></span>

想要知道什么效果可以自己试试？

² 水平菜单的创建

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>


</body>
</html></strong></span>

想要知道效果，好奇心强的动手试试吧！

这部分的学习关键在于多多实践，CSS样式很多，要想熟练掌握，那就要多多练。