上文我们讲了HTML,本文讲讲CSS。
上次我们讲了CSS是HTML页面的装修部分,就是各种瓷砖、粉墙。说明了CSS在HTML页面中的重要地位。没有CSS,那么HTML页面将很粗糙,就象我们的毛呸房一样。下面开始讲CSS的相关内容。
CSS的内容很简单,就是选择器,属性,属性值。下面是一条简单的CSS内容。
#nav {
color:red;
}
上面的CSS内容设置了nav这个HTML页面标签的字体颜色。
一、CSS文件的嵌入有3种形式:文件嵌入,页面嵌入,HTML标签嵌入。
1、文件嵌入。在HTML页面的head标记之间嵌入以下内容:
<link rel="stylesheet" href="css/style.css">
上面HTML页面在加载的时候将在css目录中找到style.css文件并进行页面渲染。
2、页面嵌入。在HTML页面的head标记之间嵌入以下内容:
<style type="text/css">
body, ul, ol, li, p {
margin: 0;
padding: 0;
}
</style>
上面HTML 页面在加载时将执行上述的css设置进行页面渲染。
3、HTML标签嵌入。在HTML标签内的style属性内嵌入css设置。
<asp:Label ID="Label1" runat="server" Text="Label" style="color:red;"></asp:Label>
上面HTML页面在加载该标签的时候将使用style内的css设置对该标签进行渲染。
二、CSS文件的选择器有3种:标签选择器,class选择器,ID选择器。
1、ID选择器。在CSS设置中直接选择该HTML标记。使用#号开始。
#nav {
color:red;
}
2、class选择器。在CSS设置中直接设置该标记(使用.开头),在HTML元素中进行设置使用该设置,使用class属性进行标记。
<div class=”cls”></div>
<style type="text/css">
.cls {
margin: 0;
padding: 0;
}
</style>
3、标签选择器。在CSS中直接设置该标记,在HTML元素中定义该标记即可。
<div></div>
<style type="text/css">
div {
margin: 0;
padding: 0;
}
</style>
下面介绍标签选择器的子标签选择。
<div>
<ul>
<li></li>
</ul>
</div>
<style type="text/css">
div ul li {
margin: 0;
padding: 0;
}
</style>
上面对DIV下的UL下的li标记进行了选择设置。标记中间以空格划分。
<div ID=”box”>
<ul>
<li></li>
</ul>
</div>
<style type="text/css">
#box ul li {
margin: 0;
padding: 0;
}
</style>
上面使用ID选择器设置了DIV下的UL下的li标记。中间同样以空格划分。
由于篇幅有限,上面简要介绍了CSS的设置,具体学习可看下面链接提供的书籍(主要是学习CSS的设置的属性内容):
http://pan.baidu.com/s/1o6JpZeE
ps.今天是元旦节后第一天上班。祝大家2015年快乐。。。