一、css层叠样式表的三种形式
1.行内样式表
2.内部样式表
3.外部样式表
二、CSS选择器
1.标签选择器
例:
<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>
p{
color: red;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h1>我是h1标签</h1>
</body>
</html>
效果:
2.
id选择器
通过 id可以找到指定的元素。
id类似于身份证号,一个id值,只能给一个标签使用,即通过id选择器,只能选择一个标签。
例:
<style>
#red{
color: red;
}
#blue{
color: blue;
}
</style>
<p id="red">id选择器</p>
<p id="blue">id选择器</p>
<p>id选择器</p>
效果:
3.类选择器
类名的命名规则:可以是字母、数字、下环线、中划线组成,但是不能以数字和中划线开头命名。
一个标签可以有多个类。(class="类名1 类名2 类名3")
例:
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.fs30{
font-size: 30px;
}
</style>
<p>类选择器</p>
<p class="red">类选择器</p>
<p class="blue fs30">类选择器</p>
效果:
4.原子类
在做网页项目之前,可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
例:
.fs12{ .color-red{
font-size: 12px;color: red;
}}
.fs14{ .color-blue{
font-size:14px; color: blue;
}}
5.通配符选择器
找到的是页面上所有的元素,一般用于去除标签默认的内外边距。
例:
*{
margin: 0;
padding: 0;
}