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

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