CSS的基本语法
- css样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。
选择器名{属性:属性值;......}
- 样式设置在style标签中
- css声明要以分号结尾,声明要用{}括起来
- 建议一行一个声明
- 如果属性值由多个单词组成,要给值加上引号
- 代码块
<!DOCTYPE html>
<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>CSS的基础语法和注释</title>
<!-- 样式设置在style标签中 -->
<style type="text/css">
body{
background-color: antiquewhite;
color: red;
font-family: "arial black";
}
</style>
</head>
<body>
HELLO WORLD !!
</body>
</html>
CSS的使用(样式就近原则)
1.行内样式
- 将样式定义在html标签上的style属性中
- 以行内样式写的CSS耦合度较高
<p style="color: black;font-family: 宋体;">床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
2.内部样式
- 定义在head标签中的style标签中
-<style type="text/css"> p { color:blue; font-family: 楷体; } </style>
3.外部样式
-
通过link标签引入外部的CSS文件
-
<link rel="stylesheet" href="style.css">
-
rel:当前文件与引入文件之间的关系
-
type:类型,CSS类型
-
href:引入的资源的路径
-p { color: red; font-family: 楷体; }
- 代码块
<!DOCTYPE html>
<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>CSS的使用</title>
<!-- 定义内部样式 -->
<style type="text/css">
/* p 标签 */
p {
color:blue;
font-family: 楷体;
}
</style>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3><p style="color: black;font-family: 宋体;">床前明月光,疑是地上霜。举头望明月,低头思故乡。</p></h3>
<h4><p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p></h4>
</body>
</html>