一、 css 导入HTML的方式
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
内联样式:在标签内部使用style属性,属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
内部样式:定义 style 标签,在标签内部定义css样式
<style type="text/css">
div{
color: red;
}
</style>
外部样式:定义link标签,引入外部的css文件
编写一个css文件。名为:demo.css
在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">
./代表当前的目录
../返回当前目录的上一级目录
二、 css 选择器
元素选择器
格式:
元素名称{color: red;}
id选择器
格式:
#id属性值{color: red;}
类选择器
格式:
.class属性值{color: red;}
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
#name{
color: blue;
}
.cls{
color: pink;
}
</style>
</head>
<body>
<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
</body>
</html>