• 技术文章 >web前端 >前端问答

    外链css是什么

    青灯夜游青灯夜游2022-09-01 18:43:32原创656

    外链css是指将CSS样式定义在一个“.css”格式的文件中,接着使用HTML的link标签将该css文件链接到HTML文档中。外链式css会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    外链css是指使用HTML的link标签将css文件链接到HTML文档中。

    CSS文件一般叫CSS外部样式表,是用于放置CSS代码的文本文件,而CSS代码具有一定规律规则的文本代码组成。我们使用记事本将扩展名更改即可变成CSS文件。

    css文件是以.css为后缀名的,我们看到以.css为后缀的文件就是css文件。

    link标签需要放在页面的<head>部分中。

    链接式会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

    下面通过具体的示例来演示一下。

    首先,需要定义一个 .css 格式的样式文件(例如 style.css),如下所示:

    body {
        background-color: linen;
    }
    h1 {
        color: maroon;
        margin-left: 40px;
    }

    然后我们在 HTML 文档中引入这个 style.css 文件,如下所示:

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="./style.css">
        </head>  
        <body>
    	<h1>PHP中文网</h1>
    	<p>//m.sbmmt.com/</p>
        </body>
    </html>

    1.png

    对link标签各个属性的说明:

    一般在定义 <link> 标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

    也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

    提示:在 Firefox 浏览器中可以在菜单中选择“查看 --> 页面样式”选项,然后在子菜单中会显示 title 属性值,只需选择不同的 title 属性值,可以有选择地应用需要的样式表文件。IE 浏览器不支持该功能。

    另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 <link> 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

    说明:

    引入CSS外部样式表除了使用link标签,还可@import。

    外链式(link)与导入式(@import)的区别:

    (学习视频分享:web前端

    以上就是外链css是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css
    上一篇:css怎么将其他类型元素转为内联元素 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css中fff是什么值• css字体样式有几种• css中的important是什么意思• css3怎么让一张图片旋转• css文本行高是哪个属性• css中的选择器包括超文本标记选择器吗
    1/1

    PHP中文网