-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-05-29
来源 ：
阅读 1046
评论 0
摘要：在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
一、前言
在 HTML 中使用 CSS，包括内联式、内嵌式、链接式和导入式。
二、分类
2.1 内联式
内联式是所有样式应用方式中最为直接的一种，它通过对 HTML 标记使用 style 属性，将 CSS 代码直接写在其中。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS之内联式</title>
</head>
<body>
<p style="color: #39f;">在HTML中使用CSS之内联式</p>
</body></html>
内联式是最简单、直接的 CSS 使用方法，但它的针对性很明显，只能作用于当前标记，造成代码冗余，维护比较困难。
2.2 内嵌式
内嵌式与内联式使用方法不同，它将 CSS 代码写在 <head> 标记之间，并需要采用 <style> 标记进行声明。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS之内嵌式</title>
<style>
p{
color: #39f;
}
</style>
</head>
<body>
<p>在HTML中使用CSS之内嵌式</p>
</body></html>
使用内嵌式 CSS 用法时 CSS 代码将被集中放在 <head> 标记中，这样方便查找，对后期维护比较方便，页面代码也会减少。但是，如果一个网站有很多页面，如果多个网页的某个标记要使用相同的样式效果，内嵌式也会 出现代码冗余和维护困难的问题，所以，内嵌式比较适合个别风格特殊的页面效果设置。
2.3 链接式
在实际的网页设计中，链接式 CSS 用法是最常用的，也是效果最好的。链接式特点是将 CSS 代码单独放在一个或多个 .css 文件中，实现了 CSS 代码和 HTML 代码的分离，这样使前期设计和后期维护都很方便，也有助于实现前台美工设计与后台程序设计人员的合理分工。
链接式 CSS 使用时需要在 <head> 标记中使用 <link> 标记，通过 <link> 标记的相关属性指明外部 CSS 文件的路径，以方便找到其中定义的 CSS 样式并运用在当前网页元素上。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS之链接式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>在HTML中使用CSS之链接式</p>
</body></html>
@charset "utf-8";/* CSS Document */p{
color: #39f;
}
链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离，这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS，可以在设计整个网站时，将多个页面都会用到的 CSS 样式定义在一个或多个 .css 文件中，然后在需要用到该样式的 HTML 网页中通过 <link> 标记链接这些 .css 文件，通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。
2.4 导入式
导入式和链接式的用法基本相同，区别在于语法和使用方式上略有不同。导入式通过在 <head> 标记的 <style> 标记中使用 @import 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时，会将该 CSS 文件导入 HTML 文件中，作为此 HTML 文件的一部分，类似于内嵌式的效果，而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS之导入式</title>
<style>
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<p>在HTML中使用CSS之导入式</p>
</body></html>
不只是 HTML 文件的 <style> 标记可以导入 CSS 文件，在 CSS 文件内也可以导入其他的 CSS 文件。例如，可以在 style.css 文件中不写任何 CSS 代码，只写 @import url(style.css);，这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 style.css 中定义的所有样式效果。
三、提醒
如果你网页中使用多种方式，样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则：
内联式 > 内嵌式 > 外部样式；
在多个样式中，后出现的样式的优先级高于先出现的样式；
在样式中，选择器的优先级：id 样式 > class 样式 > 标记样式。
为了避免 CSS 冲突，建议你不要混合使用多种，强力推荐使用链接式。
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
