CSS(层叠样式表)的三种引入方式

约定不等于承诺〃 2022-03-29 04:13 292阅读 0赞

**1.行内样式(直接在标签内部通过使用style属性添加CSS样式)**

<p style="color:red;font-size:12px;">这是一个段落</p>

**2.内部样式(在head标签里面通过使用style标签引进CSS样式)**

<head> <style> p{ 
    corlor:red;
    
    font-size:12px;
       }
    
    </head>

**3.外部样式(先在外部建一个css格式的外部样式表,然后在标签里面用标签引入外部样式表)**

<head>
        
         <link rel="stylesheet" type="text/css" href="base.css"/>
        
         </head>

或者用@import引入

<style type="text/css" >   
    @import url("CSS文件");   
    </style>

link和@import的区别:

1.老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link 标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载,网速慢时会影响视觉效果.

link确保并行下载css文件，@import是一个一个下载。在IE中，link会阻断@import延长加载时间，多个@import的使用还会打乱资源文件的下载顺序引发js问题。

3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4.使用DOM控制样式的区别.当使用javascript控制dom去改变样式的时候，只能使用 link标签，因为@import不是dom可以控制的。

使用link:　link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因，普通站点应当尽量使用link

使用@impo:大型门户网站（如淘宝）多个页面link同一个css文件会造成速度下降，@import可以在css中调入样式表，方便对css进行模块化管理.

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3层叠样式表

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

客官°小女子只卖身不卖艺/ 2024年04月07日 10:32/ 0 赞/ 11 阅读

相关 CSS-初识cs 层叠样式表，引入样式的三种方式

概述 Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表；CSS 负责页面样式，属于网页中的表示层；CSS 规则是由“选择器” 和 “格式

Dear 丶/ 2023年08月17日 16:19/ 0 赞/ 79 阅读

相关轻松学习三种层叠样式表！

层叠样式表三种引入方式归纳：引入方式：第一种：行内式 CSS引入使用：在标签内加上style属性在引号内

怼烎@/ 2022年11月11日 13:19/ 0 赞/ 122 阅读

相关 HTML引入css样式的三种方式，css选择器的三种样式

文章目录前言一. css样式的三种方式第一种：内联定义方式第二种：样式块

青旅半醒/ 2022年10月05日 00:53/ 0 赞/ 189 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

傷城~/ 2022年07月15日 04:08/ 0 赞/ 167 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

蔚落/ 2022年07月15日 04:08/ 0 赞/ 178 阅读

相关 CSS(层叠样式表)的三种引入方式

1.行内样式(直接在标签内部通过使用style属性添加CSS样式) <p style="color:red;font-size:12px;">这是一个段落</p>

约定不等于承诺〃/ 2022年03月29日 04:13/ 0 赞/ 293 阅读

相关 CSS：层叠样式表的使用

CSS：层叠样式表（ Cascading Style Sheets ，主要实现网页美化以及各种特效； CSS分为三种：一、行内样式（inline style）　

ゞ浴缸里的玫瑰/ 2021年11月23日 23:06/ 0 赞/ 497 阅读

相关 CSS层叠样式表的入门

目录：点击可快速跳转什么是css？ css的格式： css样式可以写在什么地方？ CSS的选择器有哪些？ 4）复合选择器： 5）属性选择器： 6）伪类选择器：

水深无声/ 2021年11月04日 13:04/ 0 赞/ 377 阅读

相关 html样式表三种引入方式

样式表三种引入方式 1.行间样式，写在开始标签内部，优先级最高，维护性最差，尽量避免使用 2.内部样式表，写在style标签内，优点：一般不会造成样式丢失，缺点：可

阳光穿透心脏的1/2处/ 2021年09月15日 12:44/ 0 赞/ 409 阅读