CSS学习（1）（网页编程）

   1. CSS定义

    级联样式表（Cascading Style Sheet）简称”CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页样式设计的。通过设立样式表，可以统一地控制HMTL中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

    2. CSS如何使用

    当读到CSS时，浏览器会根据它来格式化HTML文档，插入CSS的方法有三种：

      当样式需要多页面重复利用时，要用外部样式表实现。这样可以通过改变一个文件来改变整个站点的外观。

      具体用法：

          创建后缀为css的文件（这里我创建的文件为StyleSheet1.css），在css文件中编写css代码，保存。

          最后在每个要用到此样式文件的页面中使用 link 标签链接到样式文件中的样式表。 link 标签应写在 head 标签内。实现代码如下：

 head 


 link href="http://www.cnblogs.com/style/StyleSheet1.css" rel="stylesheet" type="text/css" / 


 /head 

       2.2 内部样式表

       当单个页面需要特殊的样式时，使用内部样式表。

      具体用法：

          在 style 标签内写内部样式表， style 标签要写在 head 标签内部。示例代码如下：

}


 style type="text/css" 


html, body


{


height: 100%;


margin: 0;


}



#header


{


width: 96%;


height: 40px;


background: #efdfed;


font-weight: bold;


font-size: 16px;


padding: 15px 0 0 50px;


margin: 0px 2px;


color: Red;


}



#nav


{


width: 96%;


height: 30px;


background: #efdfed;


font-weight: bold;


font-size: 16px;


padding: 12px 0 0 50px;


margin: 5px 2px;


color: Red;


}



#content


{


width: 96%;


height: 42%;


background: #efdfed;


font-size: 16px;


font-weight: bold;


padding: 17% 0 0 50px;


margin: 5px 2px;


color: Red;


}



#footer


{


width: 96%;


height: 30px;


background: #efdfed;


font-weight: bold;


font-size: 16px;


padding: 15px 0 0 50px;


margin: 5px 2px;


color: Red;


}


 /style 


 div id="header" header /div 


 div id="nav" nav /div 


 div id="content" content /div 


 div id="footer" footer /div 

     2.3 内联样式

     内联样式将表现和内容混杂在一起，这样会损失掉样式表的许多优势，所以一般当样式仅需要在一个元素上应用一次时采用这种方法。

     具体用法：

         在标签内使用style属性。示例如下：

 div id="header" 


header /div 

作者：绿茶叶 
出处：http://www.cnblogs.com/greenteaone/ 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载：http://www.cnblogs.com/greenteaone/archive/2012/02/08/2342276.html