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中文网 !!