犟驴学编程

# 初识CSS

作者: 多叉树；转载须注明出处

# 简介

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文件，然后使用 标签引入它。

创建一个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
}

← 选择器 →