文档章节

CSS的创建与使用。

 凯泽鲜森
发布于 2016/09/04 19:04
字数 322
阅读 9
收藏 0
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的样式优先级机制”。

© 著作权归作者所有

粉丝 0
博文 2
码字总数 499
作品 0
中山
私信 提问
2015年50+ CSS 工具、框架、库合集

CSS动画工具 & 库 1. Animate Plus 一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。 2. Rocket 一个创建WEB动画的简单的工具。 3. Tuesday 新奇CSS动画库。 4. Shift.css 创建定时CSS...

柠檬酷
2015/12/15
120
0
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0
CSS 图像透明/不透明

使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CS...

wybo521
2016/01/21
25
0
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.6K
12
Web 设计师不可错过的 25+ CSS 工具

当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美...

oschina
2015/07/28
6.5K
13

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
58
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
61
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
57
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部