简单使用方式
方式1，在html页面里的style标签中添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
} -->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
style中的h1是选择器，选择下方的h1标签
方式2：css文件引用
…/ 表示当前文件所在的目录的上一级目录
./ 表示当前文件所在的目录(可以省略)
/ 表示当前站点的根目录(域名映射的硬盘目录)
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
} -->
<link rel="stylesheet" href="../css/demo01.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css文件
h1{
color:red;
}
css的导入方式
1.行内样式
<body>
<!--行内样式：在标签元素中编写一个style属性-->
<h1 style="color:red">我是标题</h1>
</body>
2.内部样式
<body>
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
</body>
↑似乎写在head还是body里还是外面都无所谓
3.外部样式
css文件
h1{
color:yellow;
}
优先级：就近原则，行内样式最优先，内部/外部谁离tag的代码近谁生效
选择器
作用：选择页面上某一个或某一类元素
2.1基本选择器
1.标签选择器
2.类 选择器
3.id选择器
1.标签选择器
可以在网页里瞎改然后把改好的格式复制粘贴进style标签
选择一类标签
p {
background: yellow;
border-radius: 24px;
}
2.类选择器
同样标签的可以通过设置类来分别给于样式
<body>
<style>
/*类选择器的格式 .class的名称 {}*/
.test1{
color: #14f212;
}
.test2{
color: #f53667
}
</style>
<h1 class="test1">标题1</h1>
<h1 class="test2">标题2</h1>
<h1 class="test1">标题3</h1>
</body>
类选择器可复用，多个标签可使用同一个类
3.ID选择器
ID选择器不可复用，一个ID只能被一个标签使用
<style>
/* id选择器：
#id 名称{}
*/
#test1{
color: #f53667;
}
</style>
<h1 id="test1">标题1</h1>
<h1 id="test2">标题2</h1>
<h1>标题3</h1>
标题2使用test1会报错。
id和class可以一起使用
<style>
/* id选择器：
#id 名称{}
*/
#test1{
color: #f53667;
}
.test2{
color:#14f212;
}
</style>
<h1 id="test1">标题1</h1>
<h1 class="test2">标题2</h1>
<h1>标题3</h1>
优先级不遵循就近原则，固定id>类>标签选择器
<h1 id="test1" class="test2">标题1</h1>
<h1 class="test2">标题2</h1>
<h1>标题3</h1>
标题1生效的是id选择器
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
