📢📢📢📣📣📣
哈喽!大家好,我是「奇点」,江湖人称 singularity。刚工作几年,想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】!😜😜😜
喜欢java和python,平时比较懒,能用程序解决的坚决不手动解决😜😜😜
✨ 如果有对【java】感兴趣的【小可爱】,欢迎关注我❤️❤️❤️感谢各位大可爱小可爱!❤️❤️❤️
————————————————如果觉得本文对你有帮助,欢迎点赞,欢迎关注我,如果有补充欢迎评论交流,我将努力创作更多更好的文章。
目录
👩🏫:我们上节课学习了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样式的方法,我们能很容易的发现第三种,使用外部样式方式是最好的,符合我们的编码规则,减少了一样的代码的重复编写等这种方式有一下三种优点
- 解决相同样式代码等重复编写
- 代码分离,利于维护和阅读
- 浏览器会缓存,提高页面的响应速度