0基础和小Q学前端---(6)css的多种写法以及推荐方法

📢📢📢📣📣📣
哈喽!大家好,我是「奇点」,江湖人称 singularity。刚工作几年,想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】!😜😜😜
喜欢java和python,平时比较懒,能用程序解决的坚决不手动解决😜😜😜

✨ 如果有对【java】感兴趣的【小可爱】,欢迎关注我

❤️❤️❤️感谢各位大可爱小可爱!❤️❤️❤️
————————————————

如果觉得本文对你有帮助,欢迎点赞,欢迎关注我,如果有补充欢迎评论交流,我将努力创作更多更好的文章。

目录

CSS的写法及推荐写法

内部样式表:

内联样式表

外部样式表(推荐)


👩‍🏫:我们上节课学习了css的基本知识,这节课我们学习一下css最基本的使用,来看看加了样式之后,我们的页面会有什么样子的变化吧。

CSS的写法及推荐写法

内部样式表:

写在元素的style标签⾥⾯的

👨‍🏫: css和html的写法有很多不同,今天我们就来说说css的几种写法和推荐的写法。主要写法有三种方式,我们依次讲解。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        百度
    </div>
</body>

</html>

 这里设置了一个简单的样式,div中的颜色是红色。

内联样式表

写在styles属性⾥⾯的,整行的样式都会改变

 

 <div style="background-color:yellow">
        谷歌
 </div>

外部样式表(推荐)

通过link标签将css资源引⼊,这种方式和我们之前html中的img标签的方式差不多

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        百度
    </div>
    <br>
    <div style="background-color:yellow">
        谷歌
    </div>

    <br>
    <div>
        腾讯
    </div>
</body>

</html>

👨‍🏫:看了这么三种引入css样式的方法,我们能很容易的发现第三种,使用外部样式方式是最好的,符合我们的编码规则,减少了一样的代码的重复编写等这种方式有一下三种优点

  • 解决相同样式代码等重复编写
  • 代码分离,利于维护和阅读
  • 浏览器会缓存,提高页面的响应速度

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智达教育‍

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值