为网页添加样式
术语解释
h1{
color: red;
background-color: lightblue;
text-align: center;
}
CSS规则(整条代码称为CSS规则) = 选择器 + 声明块
选择器
选择器:选中的元素,确定样式的范围,如花括号前面的h1
-
元素选择器: 选中所有该元素
-
id选择器:选中的是对应id值的元素,选择范围窄
-
类选择器(常用):和选择的元素没有关系,只要其元素属性是类
声明块
声明块:出现在大括号里,其中包含了很多声明(属性),每一个声明(属性)都表明了某一方面的样式规则
CSS代码书写位置
-
内部样式表
代码书写在style元素里,通常将style代码放在head里面,想让浏览器最先加载出来样式,直接以妆发完整的出现在用户面前。
-
内联样式表
直接书写在元素的style属性中
-
外部样式表[推荐]
将样式书写到独立的css文件中,使用link元素将css文件与html代码文件链接起来:
<link rel="stylesheet" href="./css/index.css">
- 外联样式表可以解决多页面样式重复的问题
- 有利于浏览器缓存,从而提高页面响应速度
- 有利于代码分离(html和css),更容易阅读和维护
css注释
ctrl+?: /* 这是一个css规则 */