为网页添加样式
css 规则
css 规则 = 选择器 + 声明块
选择器
选择器：选中元素
- ID 选择器：选中的对应 id 值的元素
- 元素选择器
- 类选择器
声明块
出现在大括号{}中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式
css 代码书写位置
- 内部样式表
书写在 -->
- 内联样式表/元素样式表
直接书写在元素的 style 属性中
- 外部样式表
将样式书写到独立的 css 文件中。
1）外部样式可以解决多页面样式重复的问题
2）有利于浏览器缓存，从而提高页面响应速度
3）有利于代码分离，html 和 css 文件分开，更容易阅读和维护
/* css代码 */
/* 内部样式表 */
<style>
h1{
/* 声明块 */
color:brown;
background-color: aqua;
text-align: center;
}
p{
color: blue;
}
#p1{
color: black;
}
.class{
font-size: larger;
}
.class1{
color: blueviolet;
text-align: center;
}
</style>
/* 引入外部样式表 */
<link rel="stylesheet" href="./css-style.css">
/* css-style.css */
.class3 {
color: blueviolet;
font-size: larger;
text-align: center;
}
<body>
<h1>添加样式</h1>
<!-- ID 选择器 -->
<p id="p1">ID 选择器</p>
<p>2</p>
<p>3</p>
<p>4</p>
<!-- 类选择器-->
<p class="class">类选择器</p>
<div class="class class1">类选择器</div>
<!-- 内联样式表 -->
<div style="color:red">内联样式表</div>
<!-- 使用外联样式表 -->
<div class="class3">外联样式表外联样式表外联样式表</div>
</body>