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

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值