简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style>可以编写CSS代码-->
<!--在这h1是一个选择器 选择了html的h1标签并进行一定的设置-->
<style>
h1{
color: brown;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
效果:
将css 放在其他文件符合规范
创建一个css文件
h1{
color: brown;
}
在html通过link标签引用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
其他的导入方式
CSS的使用原则是就近原则
1.在标签内部直接使用(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: aquamarine">我是标题</h1>
</body>
</html>
2.使用import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css/style.css";
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
使用这种方式是先加载网页后渲染