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

1. CSS定义

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

2. CSS如何使用

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

2.1 外部样式表

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

具体用法：

创建后缀为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>标签内部。示例代码如下：

View Code

}
<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" style="background: yellow; height: 100px; margin: 5px; line-height: 100px;padding: 5px; float: left;">
    header</div>

posted @ 2012-02-08 10:10 绿茶叶阅读(461) 评论(0) 编辑收藏举报

刷新页面返回顶部

绿茶叶

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

公告