摘要:一前言在中使用,包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记,通过标记的相关属性指明外部文件的路径,以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。
一、前言
在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。
二、分类 2.1 内联式内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记使用 style 属性,将 CSS 代码直接写在其中。
在HTML中使用CSS之内联式 在HTML中使用CSS之内联式
内联式是最简单、直接的 CSS 使用方法,但它的针对性很明显,只能作用于当前标记,造成代码冗余,维护比较困难。
2.2 内嵌式内嵌式与内联式使用方法不同,它将 CSS 代码写在 标记之间,并需要采用 标记进行声明。
在HTML中使用CSS之内嵌式 在HTML中使用CSS之内嵌式
使用内嵌式 CSS 用法时 CSS 代码将被集中放在 标记中,这样方便查找,对后期维护比较方便,页面代码也会减少。但是,如果一个网站有很多页面,如果多个网页的某个标记要使用相同的样式效果,内嵌式也会 出现代码冗余和维护困难的问题,所以,内嵌式比较适合个别风格特殊的页面效果设置。
2.3 链接式在实际的网页设计中,链接式 CSS 用法是最常用的,也是效果最好的。链接式特点是将 CSS 代码多带带放在一个或多个 .css 文件中,实现了 CSS 代码和 HTML 代码的分离,这样使前期设计和后期维护都很方便,也有助于实现前台美工设计与后台程序设计人员的合理分工。
链接式 CSS 使用时需要在 标记中使用 标记,通过 标记的相关属性指明外部 CSS 文件的路径,以方便找到其中定义的 CSS 样式并运用在当前网页元素上。
在HTML中使用CSS之链接式 在HTML中使用CSS之链接式
@charset "utf-8"; /* CSS Document */ p{ color: #39f; }
链接式 CSS 用法的最大特点是将 CSS 代码和 HTML 代码分离,这样就可以实现将一个 CSS 文件链接到不同的 HTML 网页中。使用链接式 CSS,可以在设计整个网站时,将多个页面都会用到的 CSS 样式定义在一个或多个 .css 文件中,然后在需要用到该样式的 HTML 网页中通过 标记链接这些 .css 文件,通过链接式 CSS 可以降低整个网站的页面代码冗余并提高网站的可维护性。
2.4 导入式导入式和链接式的用法基本相同,区别在于语法和使用方式上略有不同。导入式通过在 标记的 标记中使用 @import 方法导入相应的 CSS 文件。被导入的 HTML 文件在初始化时,会将该 CSS 文件导入 HTML 文件中,作为此 HTML 文件的一部分,类似于内嵌式的效果,而链接式是在 HTML 的标记需要 CSS 样式的时候才会以链接的方式引入进来。
在HTML中使用CSS之导入式 在HTML中使用CSS之导入式
不只是 HTML 文件的 标记可以导入 CSS 文件,在 CSS 文件内也可以导入其他的 CSS 文件。例如,可以在 style.css 文件中不写任何 CSS 代码,只写 @import url(style.css);,这样所有导入或链接到该 CSS 文件的 HTML 页面都可以使用 style.css 中定义的所有样式效果。
三、提醒如果你网页中使用多种方式,样式之间可能会出现冲突。这时解决 CSS 冲突你就要了解在 HTML 中使用 CSS 的优先级规则:
内联式 > 内嵌式 > 外部样式;
在多个样式中,后出现的样式的优先级高于先出现的样式;
在样式中,选择器的优先级:id 样式 > class 样式 > 标记样式。
为了避免 CSS 冲突,建议你不要混合使用多种,强力推荐使用链接式。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49804.html
摘要:一前言在中使用,包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记,通过标记的相关属性指明外部文件的路径,以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。 一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记...
摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...
摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...
摘要:每条属性声明实现对网页元素进行某种特定格式的设置,由一个属性和一个值组成,属性和值之间使用冒号连接,不同声明之间用分号分隔,所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要:我们可以做很多事情来减少阻塞渲染的,例如,缓存等。但是如何减少阻塞渲染的为此,可以拆分并优先加载首次渲染所需要的关键,然后再加载其它。请注意,文件在标签里引入,因此将会阻塞渲染。 showImg(https://segmentfault.com/img/remote/1460000011503289?w=600&h=321); 原文地址: Critical CSS and Webpa...
阅读 3044·2021-09-24 10:26
阅读 3147·2021-09-23 11:54
阅读 4563·2021-09-22 15:33
阅读 2219·2021-09-09 09:33
阅读 1618·2021-09-07 10:10
阅读 932·2019-08-30 11:09
阅读 2790·2019-08-29 17:13
阅读 974·2019-08-29 12:35