css的四种引入方式

马肤
这是懒羊羊

文章最后更新时间:2022年11月10日已超过693天没有更新。

前言

今天就给大家讲讲html中必不可缺的css,css的作用也是非常大的,比如说简化页面的格式代码,外部的样式表还会被浏览器保存在缓存中,加快了加载速度,也减少了需要上传的代码数量。免逐个页面的修改,缩短修改页面的时间。能够指定的样式类型除了通用的颜色、字体、背景等等,还可以控制字符间距、填充距、大小等等,显示出了强大的定义能力。


而学css主要是需要学习1.什么是css 2.样式表的创建 3.css语法 4.css的一些属性代码 5.css层叠性的体现 层叠样式表6.外部样式这几个方面

正文

css的四种引入方式 第1张

一、行内样式

别名:行间样式、内联样式


写法:在网页元素上通过style=""属性


<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>


二、内部样式表

写法:在网页创建嵌入的样式表,写在里面


<head>

    <style>

        p{

            color:pink;

            border:blue 1px solid;

        }

    </style>

</head>


三、链入外部样式表

写法:网页引入外部样式表,外部创建一个css文件,在html中通过连接这个css文件,一般写在css前面


<link rel="stylesheet" type="text/css" herf="1.css">

1

四、导入外部样式表

写法:通过@import 引入,不建议开发使用


<style>

    @import"1.css";

</style>


五、css引用的优先级

记住就近原则

内部样式、、@import都出现在HTML的里面,就近原则,距离修改元素近的优先级高

行内样式>内部样式>link>@import

建议开发中链入外部样式,无需改动HTML结构,有利于代码的维护,开发效率高


六、link和@import的区别

1、引入的内容不同


link引入样式文件、图片资源等,而@import只引入样式文件


2、加载的顺序不同


link在页面加载的同时加载,@import在页面加载以后加载


3、兼容性不同


link是XHTML标签,没有兼容性问题,@import在css2.1提出,低版本的浏览器不支持


4、对js的支持不同


link支持js控制dom去改变样式,@import则不能支持



文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,433人围观)

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

目录[+]

取消
微信二维码
微信二维码
支付宝二维码