3.1CSS简介
CSS：让HTML更美观，由选择器和一条或多条声明构成
<style>
p{
color: red;
font-size: 200px;
}
</style>
3.2CSS的引入
内联
内部（同3.1，需要设置style）
外部（推荐！）：在外部创建一个css文件，并设置其样式，最后在HTML文件中用link部署
<link rel="stylesheet" href="first.css">
3.3CSS选择器
3.3.1全局选择器：一般用于初始化
<style>
*{
color: blue;
font-size: px;
}
</style>
3.3.2元素选择器：描述共性，不能描述个性（同最上方）
HTML上所有元素（p，img，b，a...）都可以作为标签选择器
<style>
p{
color: red;
font-size: 200px;
}
</style>
若想单独给其中几个字加样式，可以加一个<span>标签选择器
<style>
span{
color: red;
font-size: 20px;
}
</style>
<body>
<p>我的<span><b>前端</b></span>学习之路</p>
</body>
3.3.3类选择器（最广泛！！！）：灵活
class类的属性：
【1】类选择器可应用于多种标签
【2】类名不能以数字开头，只能以字母或杠
【3】同一个标签可应用多个类选择器
<style>
.content{
color: red;
font-size: 30px;
}
</style>
<body>
<p>你怎么样？</p>
<p>我很好。</p>
<p class="content">我很伤心。</p>
<p class="content">我有点难过。</p>
</body>
3.3.4id选择器：唯一
不能以数字开头
<style>
#decs{color: aquamarine;
font-size: 30px;
}
</style>
<body>
<p id="decs">我的前端学习之路</p>
<p>我有点难过。</p>
</body>
3.3.5合并选择器：提取共同样式，减少重复代码
语法：选择器1，选择器2
<style>
p,h3{
color: aqua;
font-size: 20px;
}
</style>
<body>
<p>我的前端学习之路</p>
<h3>我有点难过。</h3>
</body>
3.3.6选择器优先级
行内选择器 > id选择器 > 类选择器 > 元素选择器
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
