探索CSS世界：从零开始学习CSS
发表时间: 2023-09-03 14:07
简介
CSS (cascading style shett) , 层叠样式表，是用来给HTML标签添加样式的语言。简单来说就是使网页变得更好看。
CSS的出现，使得样式和结构分离，HTML负责结构，CSS负责样式渲染。
CSS 书写位置
内嵌式
内嵌在html网页中， 和html处于同一个文件中 ，样式书写在 style 标签中。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { background-color: red; }</style></head><body> <div>顶顶顶</div></body></html>外链式
将css单独存为.css文件，然后使用 <link> 标签引入它。
创建一个css文件取名css.css
body { background-color: yellow;}然后在用到的html文件中引用， 多个html文件可以引用同一个css样式文件，以达到文件的复用
<!--rel 表示和引入的文件的关系， stylesheet 表示样式表， href 文件的路径--><link rel="stylesheet" href="css/css.css">行内式
样式写在HTML标签的style属性内，这样样式只能作用在此标签上，常用于微调此标签的样式
<div style="color:white"> heihei </div>导入式
导入式，在style标签中 使用 @import 语法进行导入，不常用， 使用导入式， 不会等待 css加载完毕， 网页会先加载html结构，所以css的样式渲染会延迟。
body { background-color: yellow;}<style> @import url('css/css.css');</style>CSS书写基本语法
<!-- 外层h1 表示选择器, 边界用大括号括起来 最里面的单个样式式key-value 结构数组 --><!--最后一个样式可以不写分号--><!--css 也可以没有换行，但是为了可读性，还是要换的-->h1 { background-color: green; color: white}
鲁公网安备37020202000738号