CSS的几种使用方式

   
   
   
样式表有三种插入方式

一.外部样式表

· 使用外部样式表可以将同一样式应用于多张网页,通过这个方法你只需改动一个文件就能改变整个网站的外观。

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

使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用。

:文件内容不应该包含任何的html标签,后缀名应为.css。

二.内嵌样式表

· 内嵌样式表应该在当有单独文档有特殊样式的时候使用

例:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

使用<style>标签在head区域内定义样式。

:浏览器会忽略未知标签,当老浏览器不支持<style>标签时,便会将里面的代码显示到屏幕,用<!--注释-->语句将代码括起可以防止此问题。

三.行内样式

· 一般这类方法在个别元素需要改变样式的时候使用。

 例:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。链子中将展示怎样给一个段落加上左外补丁并将颜色改为sienna

四.多重样式表

如果一些属性被相同的选择器设置成不同的样式,值就会向更为具体的样式所继承(具体化)。

举个例子,一个外部样式表有这样的h3选择器属性:

h3 
{
color: red;
text-align: left;
font-size: 8pt
}
同时有一个内嵌样式表有这样的h3选择器属性:
h3 
{
text-align: right;
font-size: 20pt
}
如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变为:
color: red; 
text-align: right;
font-size: 20pt
颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值