码迷,mamicode.com
首页 > Web开发 > 详细

2、CSS学习 - IT软件人员学习系列文章

时间:2015-01-04 13:34:05      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

上文我们讲了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年快乐。。。

 

2、CSS学习 - IT软件人员学习系列文章

标签:

原文地址:http://www.cnblogs.com/lzhdim/p/4200860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!