您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第五课 如何使用CSS样式表？

 skeeter | Div+css教程 | 2010-3-14 | 216点击 | 0评论

这一课,我们将学习如何使用CSS样式表,以及了解CSS外部样式表,CSS内部样式表,CSS内联样式

在你浏览网站时，当服务器读到一个样式表时，浏览器会根据它来格式化 HTML 文档的样式。


使用样式表的方法有三种：外部样式表，内部样式表，内联样式


--------------------------------------------------------------------------------


外部样式表


适用于多个HTML文档使用同一个CSS样式表的情况下


外部样式表是使用中最为常见的一种，在head中插入一段link：

<head>

             <link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>


浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式化HTML文档。以上代码可以直接复制使用，需要改动的只是把 mystyle.css改为你的CSS文件名，当然，CSS文件应该与HTML文档在同一目录下。
外部样式表可以在任何文本编辑器中进行编辑，样式表应 该以 .css 扩展名进行保存。下面是一个简单CSS文件的例子：

@charset "utf-8";  /*这里是DW默认新建CSS文件时自动创建的一行，代表该文档的编码采用UTF-8，一般情况不用去修改*/

/* CSS Document */

h1 {font-size:12;}

a {margin-right:30px;}

div {background-image: url("bg.jpg");color:red;}


提示：属性值与单位之间没有空格。例如：“margin:20 px” 而不是 “margin:    20px” ，就会在某些浏览器上无法正常工作。


--------------------------------------------------------------------------------


内部样式表


内部样式表适用于单个HTML文档使用CSS样式的情况下


在head中插入一段style：


<head>

<style type="text/css">

    hr {color: sienna;}

    p {margin-left: 20px;}

    body {background-image: url("images/back40.gif");}

</style>

</head>


提示：<style> </style> 标签中的样式内容与外部样式表中的内容格式是一样的。


--------------------------------------------------------------------------------


内联样式


内联样式适用于个别HTML元素需要使用CSS样式的情况下

在HTML元素标签中插入一段style：

<p style="color:blue; margin-left:20px">

这个是一个文本颜色为蓝色的段落

</p>


注意：<style> </style> 标签里的样式要用“双引号”括起来


--------------------------------------------------------------------------------


多重样式


如果某些元素在不同的样式表中被同样的css选择器定义，那么最终的属性值将取决于 css继承 的效果 和 样式定义的优先级。


例如，外部样式表拥有针对 h1 选择器的三个属性：

h1 {

  color: red;

  text-align: left;

  font-size: 8pt;

  }


而内部样式表拥有针对 h1 选择器的两个属性：

h1 {

  text-align: right;

  font-size: 20pt;

  }


假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h1 得到的样式是：

h1 {

   color: red;

   text-align: right;

   font-size: 20pt;

   }


即color属性将被继承于外部样式表，text-alignment和font-size属性会被内部样式表中的规则取代。
更详细的内部样式表、外部样式表，内联样式之间优先权说明请参考：第一课 CSS概述

关键字:如何使用CSS样式表,外部样式表,内部样式表,内联样式

上一篇:第四课 什么是CSS选择器下一篇:第六课 如何设置CSS背景

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net