您的位置：首页 > Web前端 > CSS

在网页中插入CSS样式表的几种方法

2013-04-11 08:01 260 查看
1.style属性方式
利用标签中style属性来改变每个标签的显示样式。

<p style="color: sienna;margin-left: 20px;">
这是一个段落

</p>

<!--这个段落颜色为土黄，左边距为20象素-->
2.style标签方式
在head标签中加入style标签，对多个标签进行统一修改。注意一定要用<stytle>标签，用来启动css引擎。例如：

<head>

<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>

有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示

<head>

……

<style type="text/css">

<!--

hr {color: sienna}

p {margin-left: 20px}

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

-->

</style>
3.导入方式
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例如：我们定义好了一个div.css文件。

<style type="text/css">

@import url(div.css);
</style>
注意：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

<head>

……

<style type=”text/css”>

<!--

@import “mystyle.css”

其他样式表的声明

-->

</style>

……

</head>
4.链接方式
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例如：我们已经将需要导入的语句都放在1.css中了。
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
注意：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

<head>
<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航