术语解释
<style>
/* CSS规则 */
h1{ /* 选择器 */
color: red; /* 声明(属性) */
background-color: lightblue; /* 声明 */
text-align: center; /* 声明(属性) */
}
</style>
<body>
<h1>
现在开始添加样式
</h1>
</body>
选择器
- 选择器：选中元素
- ID选择器：选中的是对应ID值的元素
#id值{} - 元素选择器:
div{} a{} h1{} p{} ... - 类选择器
.class值{}
<!-- 元素选择器 -->
h1{
color: red;
background-color: lightblue;
text-align: center;
}
<!-- #ID选择器 -->
#test{
color: blue;
}
<!-- 类选择器 -->
.red{
color: red;
}
<!-- 类选择器 -->
.big-center{
font-size: 3em;
text-align: center;
}
<h1>这是1级标题</h1>
<p class="big-center red">
Lorem ipsum dolor sit amet.
</p>
<p id="test">Lorem ipsum dolor sit amet.</p>
<p class="red">Saepe odio cupiditate laborum a.</p>
声明块
- 出现在大括号
{}中. - 声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
h1 {
/* 声明块 */
color: red;
background-color: lightblue;
text-align: center;
}
css代码书写位置
- 内部样式表：书写在
<style>元素中。放到<head>元素中告诉浏览器最先加载样式。 - 内联样式表，也叫元素样式表：直接书写在元素内。
<h1 style="color: red; font-size: 2em;">内联样式</h1> - 外部样式表[推荐使用]：将样式书写到独立的CSS文件中。在
<head>元素中使用<link>元素关联CSS文件的样式。- 外部样式表可以解决多页面样式重复的问题。
- 有利于浏览器缓存，从而提高页面响应速度。
- 有利于代码分离（HTML 和 CSS），更容易阅读和维护。
<head>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="red-big-center">
Lorem ipsum dolor sit amet.
</div>
</body>
.red-big-center {
color: blue;
font-size: 5em;
text-align: center;
}
