html页面中加页内连接,css嵌入页面方式有哪些？

css嵌入页面方式有哪些？下面本篇文章给大家介绍一下html页面里嵌入CSS的四种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在HTML中定义CSS的方式有：行内样式、内嵌式、连接式、导入式，下面通过实例为大家详细介绍下它们的特点

一、内嵌式

使用HTML的style元素，在文档中定义CSS样式。

h1{color:red}

p{color:blue}

二、行内样式

每一个HTML元素都包含一个style属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

内联样式

三、连接式

在html的head中插入以下语句：

href中的是要插入的样式的css文件

通过连接式解决了多个html使用一个css样式的问题

四、导入式

head中插入style标签

@import url=("css文件路径");

导入式一般不用

四种插入方式的优先级

若四种方式同时使用,那么他们都会生效果；

若碰到相同的属性,且都修改了同样属性,后定义的生效；

若内嵌与导入式放到一起,始终是内嵌式起作用；

如何选择使用内嵌式还是链接式

内嵌式虽然没有解决多个html页面服用一个css样式的问题 但是浏览器在加载的时候只需要加载这一个css样式,速度比较快

而链接式,若一个html页面用多个css样式,那么在浏览器加载的时候每个css文件都得单独下载,速度相对内嵌式比较慢

根据实际情况考虑,若追求的是速度,对代码复用问题不较真,推荐使用内嵌式

若追求的是代码的可服用,那么就得舍弃一点速度,来使用链接式来嵌入CSS样式。

更多web前端工程师相关知识，请查阅 HTML中文网 ！！