外联式css怎么写_html中是如何引⼊css样式
⼀、HTML导⼊css样式的⽅法
HTML主要负责⽹页的内容展现，⽽CSS⽂件负责⽹页内容的样式，在HTML中使⽤css样式的⽅法有：⾏内式、内嵌式、外联式，
⽽外联式⼜分：链接式(link)和导⼊式(@import)。那么下⾯就给⼤家介绍⼀下：
1.⾏内式----HTML标签中使⽤CSS
代码实例：
⾏内式
⾏内式⾏内式⾏内式⾏内式⾏内式⾏内式⾏内式⾏内式⾏内式
效果图：
8.jpg
css引⽤的⾏内式也可称为内联式或者⾏级式，它直接在标签内部引⼊，显著的优点是⼗分的便捷、⾼效；但是同时也造成了不能够重⽤样式的缺点，如果代码⾏数到达⼀定长度不建议采⽤。通常内联CSS作为测试使⽤，可以查代码中bug。
2.内嵌式---将CSS内容通过style标签写在head标签中
css怎么创建
代码实例：
内嵌式
p{
background-color:#21B4BB;
color:#fff;
font-size:20px;
}
内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式
效果图：
9.jpg
css引⽤的内嵌式也可称为内部式或者页级式，整体是放在head标签⾥边的，在style标签⾥边定义样式，作⽤范围仅限于本页⾯的元素；如果你写的代码超过了⼏百⾏，想想每次把代码页拉到最上边都很烦，所以它在可维护性⽅⾯较差。
3.外联式---通过link标签引⼊外部样式表(css样式⽂件)
1)链接式(link)
语法：
代码实例：
HTML代码：
链接式
链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式
css样式⽂件--style.css代码：
p{
font-size:20px;
color:#fff;
background-color:#70DBDB;
}
效果图：
9.jpg
链接式会以⽹页⽂件主体装载前装载CSS⽂件，因此显⽰出来的⽹页从⼀开始就是带样式的效果的，它不会象导⼊式那样先显⽰⽆样式的⽹页，然后再显⽰有样式的⽹页，这是链接式的优点。
2)导⼊式(@import)
语法：
@importurl("CSS⽂件");
代码实例：
HTML代码：
导⼊式
@importurl("style.css");
导⼊式导⼊式导⼊式导⼊式导⼊式导⼊式导⼊式导⼊式导⼊式
效果图：
9.jpg
导⼊式会在整个⽹页装载完后再装载CSS⽂件，因此这就导致了⼀个问题，如果⽹页⽐较⼤则会⼉出现先显⽰⽆样式的页⾯，闪烁⼀下之后，再出现⽹页的样式。这是导⼊式固有的⼀个缺陷。
⼆、链接式(link)与导⼊式(@import)的区别
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；⽽@import属于CSS范畴，只能加载CSS；
link引⽤CSS时，在页⾯载⼊时同时加载；⽽@import需要页⾯⽹页完全载⼊以后加载。
link是XHTML标签，⽆兼容问题；⽽@import是在CSS2.1提出的，低版本的浏览器不⽀持。
ink⽀持使⽤Javascript控制DOM去改变样式；⽽@import不⽀持。
@import可以在CSS⽂件中再次引⼊其他样式表；⽽link不⽀持。
本⽂转载⾃中⽂⽹

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。