CSS 三种样式
zhezhongyun 2024-12-11 18:13 39 浏览
本节我们要学习一下 CSS 样式的几种形式，在实际应用中向 HTML 中引入 CSS 样式的方法有三种，分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。
什么是行内样式
行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的：
<p style="font-size: 18px;">行内样式</p>
HTML 中的 style 属性提供了一种改变所有 HTML 元素样式的通过方法，语法格式如下所示：
<标签 style="样式声明1;样式声明2;样式声明3"></标签>
要记得用在每个样式声明之间使用分号 ; 分隔哟，否则样式会失效的。
示例：
例如下面这段代码，通过 CSS 行内样式，将第一个段落中的字体设置成了 20px，颜色为红色，加粗显示。第二个段落中的字体大小设置为 16px，颜色为绿色，倾斜显示：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
</head>
<body>
<p style="font-size: 20px;color: red;font-weight: bold;">侠课岛欢迎你！</p>
<p style="font-size: 16px;color: green;font-style: italic;">侠课岛欢迎你！</p>
</body>
</html>
在浏览器中演示效果：
什么是内嵌样式
内嵌样式就是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。因为它与 HTML 内容位于同一个文件中，所以叫做内嵌样式表。
示例：
例如下面这个例子就是使用了内嵌样式：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<style>
h2{
color: lightsalmon;
}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
</style>
</head>
<body>
<h2>《木兰花令 拟古决绝词》</h2>
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变。</p>
<p>骊山语罢清宵半，泪雨零铃终不怨。</p>
<p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
</body>
</html>
在浏览器中的演示效果：
记得内嵌样式必须写在 <style> 标签中，否则无效。
什么是外部样式
外部样式就是把 CSS 代码保存在一个单独的文件中，文件的扩展名为 .css，然后在 HTML 页面中引入这个 CSS 文件即可。
HTML 文件引入外部样式表有两种方式，分别是链接式和导入式。
链接外部样式表
链接外部样式表就是在 HTML 文件中使用 <link/> 标签链接外部样式表，且 <link/> 标签必须放到 HTML 中的 <head> 标签内。在一个 HTML 页面中可以链接多个 CSS 文件，一个 CSS 文件也可以被多个 HTML 页面引用。
语法如下：
<link rel="stylesheet" type="text/css" href="css文件路径">
其中 rel="stylesheet" 是指在页面中使用这个外部样式表，type="text/css" 是指文件的类型是样式表文本，href 属性用于指定 css 文件的路径。
外部样式表实现了结构与样式的彻底分离，一个 css 文件可以应用到多个 HTML 页面中。当改变 css 文件中的样式时，所有应用这个 css 文件的页面中的样式都会随之改变。
示例：
例如我们创建一个 index.css 的文件，将需要用到的 css 代码保存到这个文件中：
h2{
color: lightsalmon;
}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
然后可以在 HTML 文件中通过 <link/> 标签引用这个文件：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<h2>《木兰花令 拟古决绝词》</h2>
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变。</p>
<p>骊山语罢清宵半，泪雨零铃终不怨。</p>
<p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
</body>
</html>
在浏览器中演示效果：
可以看到最终效果和上一节内嵌样式示例中的是效果一样。只不过 CSS 部分独立为了一个单独的文件。
由于链接式在减少代码书写和减少维护工作方面都非常突出，所以链接式是最常用的一种引用 CSS 样式的方法。
导入外部样式表
导入外部样式表就是在 HTML 页面中使用 @import 导入外部样式表，导入样式表的语法需要放置到 <style> 标签中。
导入外部样式表和链接外部样式表是很像的，都实现了页面与样式的分离。 不同在于导入外部样式表在页面初始化时，就把样式导入到了页面中，这样就变成了内嵌样式。而链接外部样式表是在页面中有标签需要样式时才以链接的方式引入，这样看的话链接外部样式表会更加合适。
语法格式：
<style>
@import url("css文件路径");
</style>
@import 表示导入文件，前面的 @ 符号必须写哟，url 中的则是样式表文件的路径。
示例：
将上述示例中的引入 css 文件的方式改为导入外部样式表：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<style>
@import url("index.css");
</style>
</head>
<body>
<h2>《木兰花令 拟古决绝词》</h2>
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变。</p>
<p>骊山语罢清宵半，泪雨零铃终不怨。</p>
<p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
</body>
</html>
演示效果是不变的，因为 css 文件中的内容并没有改变。导入式除了可以在同一个页面中导入多个样式文件，还可以在 css 样式文件中使用 import 进行导入。
样式优先级
我们学习了关于 CSS 样式的三种引用方式，那么它们之间的优先关系是怎么样的呢？也就是说当元素同时继承这些样式，但是样式之间发生了冲突，最终会应用哪个样式。
示例：
例如在一个 <p> 标签的行内样式中定义了字体大小为16px，在嵌套样式中定义字体大小18px，在外部样式中定义了字体大小为20px。最终会应用哪个字体大小呢？这里我不演示，大家自己来试一下。
试完之后，是不是能得出如下结论呢，CSS 中样式的优先级规则如下所示：
- 行内样式＞内嵌样式＞外部样式
也就是说行内样式的优先级最高，最先会应用行内样式，其次是内嵌样式，最后是外部样式，这讲究一个就近原则。
链接：https://www.9xkd.com/
相关推荐
- 自助机网络监控（自助设备监控）
-
今日领导打电话说上次的自助机修好了，今天又不行了，这是第二次打电话了。目前也没有其他人反馈这个机器的问题。于是我就想能不能根据IP去ping这个自助机的网络是否正常，如果不正常，关机了就自动给我发到科...
- C# 打字练习(WinForm)快速打字小游戏，输入正确自动爆炸效果
-
打字游戏窗体初始化：publicintk;PictureBoxpic=newPictureBox();//生成飞机控件privatev...
- 这三款颜值极高的工具完美契合win10风格，逼格满满
-
今天介绍三款开源软件让你的Windows10逼格再飞跃一个等级，而且功能与颜值兼具！ModernFlyouts这是一款Windows10弹出UI的替代品，比原生UI更漂亮、更现代。提示框的位置可以随意...
- VC界面开发组件Xtreme Toolkit Pro全新发布v17.0.0
-
Codejock软件公司的XtremeToolkitPro是屡获殊荣的VC界面库，是MFC开发中最全面界面控件套包，它提供了Windows开发所需要的11种主流的VisualC++MFC控件，...
- 字体|好看的英文字体合集(四)（最好看的十种英文字体）
-
电脑里的字体不在于多而在精，拥有10000个字体不用的话也是浪费，找起来也不容易，只有经常使用的才是好字体。获取方式：私31.潮流赛博朋克金属字体32.潮流创意可扩展英文字体StretchPro3...
- Qt5 C++入门教程-第13章 自定义控件(Custom Widgets)
-
大道至简，在Qt5C++入门教程的这一部分，我们将创建一个自定义部件。大多数工具包通常仅提供诸如按钮、文本部件或滑块等最常见的部件。没有哪个工具包能够提供所有可能的部件。程序员必须自行创建此类部件...
- 艾灸的美容养生功效（艾灸美容养颜）
-
艾灸，属于医外治物理疗法，通过百草之王艾草和13种名贵中草药特制成香条状，点燃以温热刺激患处四周或相关穴位，帮助人体全面温通经络，从而加速皮肤的血液循环，淡化色斑。艾灸疗法-温和灸1.四白穴：四白...
- 你可能不知道的10个CSS3中的隐藏特性
-
CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些...
- 不会才学-4 Tkinter 控件1一Label、Button、Entry
-
一、标签控件（Label）序号可选项&描述1anchor文本或图像在背景内容区的位置，默认为center，可选值为（n,s,w,e,ne,nw,sw,se,center）eswn是东南西北英文...
- 从0到1建立一张评分卡之可视化分析
-
上一篇文章介绍了如何进行数据预处理，接下来介绍如何进行探索性数据分析。探索性数据分析又叫EDA,即ExploratoryDataAnalysis。其实数据预处理也属于EDA的一部分，EDA的目...
- 高温致日本冲绳最大珊瑚群90%白化褪色
-
来源:新华网高温致日本冲绳最大珊瑚群90%白化褪色A+A-分享2016-09-0412:50:53 来源:新华网查看原文<divclass="video-box"data-vid="...
- 学习笔记(十七)|PPT考点总结（ppt.1）
-
分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard学苑。今天小编为大家带来“学习笔记（十七）|PPT考点总结”，欢迎您的访问。Shareyourinterests,...
- 史上最全的浏览器兼容性问题和解决方案
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一...
- 304071纽郎缝包机送料牙架（缝包机送料牙更换）
-
portant;white-space:normal;font-size-adjust:none;font-stretch:normal;background-color:rgb(25...
- 安卓手机微信设置字体大小导致页面错位的解决方案
-
切图网专注网页切图、小程序切图服务，在最近的客户反应中，当安卓手机设置字体大小以后，会导致从微信公众号进入的页面也会字体放大，导致页面的不同程度的错位，要想解决这个问题，可以通过代码解决，ios相对简...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)