CSS之②CSS三种引用方式
QQ:3020889729 小蔡
使用总结
第一点:css引用有三种,但是我决定个人习惯最重要。在学习时,自己可能会对某一种方式很感冒,但是其他操作就不是那么感冒了。那么我觉得就应该用自己喜欢的方式去解决问题。
第二点:如果当下的任务,我们无法用自己习惯的引用方式很好的解决问题——那么,我们就应该使用更好的一种形式。
第三点:融会贯通——无论怎么样的方式都是一种解决问题的途径,而我们如何去选择,就需要我们积累经验来选择合适的方式。
也许,你会觉得废话很多,但是——你细品,肯定会发现……我就是在说废话,这些道理是很多人都有经历的,但是呢,却很多时候都被我们遗忘——正所谓,越是简单的,我们越会忘记,越是简单,越是重要。
下面开始三种引用方式的使用场景介绍~
行内式
style既是一个属性,也是一个标签。(可能说法不是很规范,我是根据用法来说明的)
行内式定义
顾名思义,就是放在开始标签内的css样式定义,体现为在一行设置属性,并显示。
行内式使用例子
<p style="color: red;font-style: italic"> css的行内式设置 <p>
效果:
使用场景
一般用于父级标签对内容的样式的设置,使用比较少,但是在必要的某一个特殊位置可能会比其他两种方法更简单,更清晰。(ps:三种方法,效果都是一样的,实现功能一致,但是在大部分使用的地方,行内式相对使用更为繁琐——在大的项目中设置众多样式时)
内嵌式
内嵌式的定义
优化了行内式的单一范围作用,内嵌式作用的范围更广——因为可被调用(类选择器/id选择器等基础选择器,以及总舵复合选择器)。他被使用style标签来包含,实现内嵌于html代码中。
内嵌式使用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
<!-- 设置类选择器 -->
.cs1 {
color: yellow;
font-style: normal;
}
</style>
</head>
<body>
<p style="color: red; font-style: italic">css的行内式设置</p>
<p class="cs1">css的内嵌式设置</p>
<!-- 调用内嵌式css,设置属性 -->
<!-- 内嵌式定义的选择器,可以在当前html中body的任意位置被使用,适用范围广了很多 -->
</body>
</html>
效果:
使用场景
**一般用于html网页的元素较少的设计中,之所以不常见,不是因为不好,而是因为被外链式更多的代替了,**因为效果一样的——只是呢,有时候,我们需要内嵌、外链都在用,这是为了一些特别的区分需要,因为有时候一些必要的设计放在html避免修改。
外链式
外链式定义
**在html以外创建一个新的css文件,以保存我们对样式的一些属性设置。**包含我们设置的各种基础选择器和复合选择器,而且调用方便——只是呢,在html文件的head标签末尾,添加一个link标签,实现css文件与html文件的链接,这样才能使用css文件中的配置。
外链式使用例子
css中的代码:
.tex3 {
font-family: '华文行楷';
font-weight: bold;
color: green;
}
html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.cs1 {
color: yellow;
font-style: normal;
}
</style>
<link rel="stylesheet" href="./演示css.css">
</head>
<body>
<p style="color: red; font-style: italic">css的行内式设置</p>
<br>
<p class="cs1">css的内嵌式设置</p>
<br>
<p class="tex3">css的外链式设置</p>
</body>
</html>
效果:
使用场景
一般练习的话,我觉得多使用外链式挺好的,既能让html中结构更清晰,两个文件的属性各异,但是在结构功能上相似,这样分开写,我们可以先用类似ps的软件/甚至画板将布局决定,然后在css文件中实现布局,然后再到html中设置相应部分的内容。环环相关,这样就可以实现更多的内容的样式展示。