前端之CSS 创建css--行内引入、内联样式、外联样式

创建css有三种创建样式,行内引入、内联引入、外联引入。

行内引入

在行内标签引入

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <!-- 行内标签,只在当前标签起作用,font-size调整字体大小 -->
    <!-- span标签过多的时候弄起来就很麻烦,所以就衍生出了 -->
    <span style="color: aqua;font-size: 200px;">测试文字</span>
    <span>测试文字</span>
    <span>测试文字</span>
</body>
</html>

结果

内联样式

在style标签中创建

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <!-- 下面的就是个选择器,将span全部选中,这个style位置可以任意放,建议放在head中 -->
    <style>
        span{
            color: aqua;
            font-size: 120px;
        }
    </style>
</head>
<body>
    <span>测试文字</span><br>
    <span>测试文字</span><br>
    <span>测试文字</span><br>
    <span>测试文字</span>
</body>
</html>

结果

外联样式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式</title>
    <!-- 
        引入css文件两种:
            1:link标签
            2:@import导入
            建议使用link
                link :
                rel属性表示引入入的是什么类型文件
                href表示的是引入连接
                @import:
                这种方式还需要写一个style
                link和@import区别:
                1、link属于标签,而@import完全是css提供的一种方式。@import只能加载CSS。
                2、加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引l用的CSS会等到页面全部被下载完再加载。
                所以浏览@import加载CSS的页面时可能没有样式,网速慢的时候明显可以看到。
                3、兼容性的差别:由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题完全兼容。
                4、使用dom控制样式时的差别:当时用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

     -->
     <-- 路劲要自己设置 -->
     <link rel="stylesheet" href="../css/1.3外联样式.css">
     <!-- <style>
        @import url(../css/1.3外联样式.css);
    </style> -->
    </head>
    
<body>
    <span>测试文字</span>
    <span>测试文字</span>
    <span>测试文字</span>
    <span>测试文字</span>
</body>
</html>

外联样式.css文件

css 复制代码
span{
    color: yellow;
    font-size: 120px;
}

结果

三种样式优先级问题

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式</title>
    <!-- 
        引入css文件两种:
            1:link标签
            2:@import导入
            建议使用link
                link :
                rel属性表示引入入的是什么类型文件
                href表示的是引入连接
                @import:
                这种方式还需要写一个style
                link和@import区别:
                1、link属于标签,而@import完全是css提供的一种方式。@import只能加载CSS。
                2、加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引l用的CSS会等到页面全部被下载完再加载。
                所以浏览@import加载CSS的页面时可能没有样式,网速慢的时候明显可以看到。
                3、兼容性的差别:由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题完全兼容。
                4、使用dom控制样式时的差别:当时用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

     -->
    <link rel="stylesheet" href="../css/1.3外联样式.css">
     <!-- <style>
        @import url(../css/1.3外联样式.css);
    </style> -->
    </head>
    
<body>
    <span>测试文字</span>
    <span>测试文字</span>
    <span>测试文字</span>
    <span>测试文字</span>
</body>
</html>

这个结果就不演示了,感兴趣的大家可以自己跟着注释练习一下。


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

相关推荐
快乐是一切7 分钟前
PDF中的图像与外部对象
前端
前端开发呀14 分钟前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖17 分钟前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate18 分钟前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员
小白640222 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang26 分钟前
vue中构建脚手架
前端·javascript·vue.js
千与千寻酱32 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
朱昆鹏44 分钟前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog44 分钟前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
cjinhuo1 小时前
标签页、书签太多找不到?AI 分组 + 拼音模糊搜索,开源插件秒解切换难题!
前端·算法·开源