目录
一、什么是CSS
- CSS是一门语言,用于控制网页表现
- CSS(Cascading Style Sheet):层叠样式表
1.1 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: pink;
}
</style>
</head>
<body>
<div>Hello,css</div>
</body>
</html>
代码呈现结果如下
二、CSS导入方式
CSS导入HTML有三种方式
1. 内联样式:在标签内部使用style属性,属性值是css属性键值对
<div style="color: red">Hello CSS~</div>
2. 内部样式:定义<style>标签,在标签内部定义css样式
<style> div{ color: pink; } </style>
3. 外部样式:定义link标签,引入外部的css文件
<link href="../css/demo.css" rel="stylesheet">
外部文件demo.css :
2.1 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: pink;
}
</style>
<link href="../css/demo.css" rel="stylesheet">
</head>
<body>
<div style="color: pink">hello,css</div>
<span>hello,css2</span>
<p>hello,css3</p>
</body>
</html>
三、CSS选择器
- 概念:选择器是选取需设置样式的元素(标签)
- 分类:
1. 元素选择器
2. id选择器
3. 类选择器
3.1 使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: pink;
}
#name{
color: blue;
}
.cls{
color: green;
}
</style>
</head>
<body>
<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>
<span class="cls">span</span>
</body>
</html>