CSS的创建与使用。

一个页面应该有几种插入样式表的方法?应该如何插入样式表?

插入样式表的方法总共有三种:

1、外部样式表

2、内部样式表

3、内敛样式

###一、外部样式表

当样式需要应用于很多页面的时候,外部样式表是最理想的选择。在使用外部样式表的时候,你可以通过修改这个外部样式表的文件来同时改变引用这个样式表文件的网页外观。

每个需要引用这个样式表的页面,都需要使用 <link> 标签链接到样式表。**<link> **标签正常情况下应该放在(文档的)头部:

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

当引用外部样式表后,浏览器会从文件style.css中读到样式声明,并根据它来格式文档。 外部样式表可以在任何文本编辑器中打开文件进行编辑。文件中不能包含任何的html标签。样式表应该以**.css**扩展名来进行保存。

###二、内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。使用内部样式表时,可以使用 <style> 标签在文档头部定义内部样式表,例如:

<head>
<style>
body{font-size:12px;color:#FFF;}
</style>
</head>

###三、内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。需要慎重使用这种方法。

当样式仅需要在一个元素上应用时,就可以使用内联样式,你需要在相关的标签内使用样式**(style)属性。style属性可以包含任何css**属性。下面展示如何改变段落内文字的颜色。

<p style="color:#FFF;">kayze</p>

###多重样式

当你同时使用外部样式表与内部样式表时,如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表对 h1 选择器定义三个属性:

h1
{
color:red;
text-align:left;
font-size:8px;
}

内部样式表对 h1 选择器定义两个属性:

h1
{
text-align:right;
font-size:20px;
}

当这个页面同时拥有外部样式表与内部样式表时,h1 得到的样式将会是:

h1{
color:red;
text-align:right;
font-size:20pt;
}

即:这个页面的 h1 选择器 继承的是外部样式表的颜色属性,与内部样式表的文字排列**(text-alignment)和字体尺寸(font-size)**。


下面将解释,为什么h1 选择器会继承这样的属性。

###多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

###具体层叠次序:

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

在上面的层叠次序中,次序数字越大的优先权越高,即

  1. 内联样式(在 HTML 元素内部)

  2. 内部样式表(位于 <head> 标签内部)

  3. 外部样式表

  4. 浏览器缺省设置

    当一个选择器被多个样式表同时定义时,将会优先使用优先权越高的样式表定义的样式。

这个内容将涉及到另一个方面的知识 “CSS的样式优先级机制”。

转载于:https://my.oschina.net/kaye992/blog/742188

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值