CSS语法
1. CSS语法格式
通常情况下语法格式如下:
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
...
}
2. CSS添加方式
2.1 行内样式
直接将样式写在本行的标签内。
<h1><p style="font-size: 48px; color:red;";>行内样式测试</p></h1>
<p>行内样式-对比行</p>
运行效果：
可以看出，行内样式只对当前行产生效果。
2.2 内嵌样式
内嵌样式一般放在HTML文件的 header 中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌样式</title>
<style>
/* P标签的内容全部遵循style格式 */
p {
font-size: 24px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>
第一行
</p>
<p>
第二行
</p>
</body>
</html>
运行效果:
2.3 单独文件
-
这种方式适用于多个页面需要设置为统一的样式。（可以代码复用）
-
保存时文件扩展名为.css
-
也是在head中使用
格式：
<link rel="stylesheet" href="D:\code\4html+css+JS\2024_03_19\global.css">
运行结果：
4. CSS选择器
4.1 标签选择器
标签在最前面
选择器 {
属性名:属性值;
...
}
只要带有选择器的标识的，都会使用此样式
4.2 类选择器
使用 “.” 开头
.类名 {
属性名:属性值;
...
}
多类选择器：
.类名1.类名2 {
属性名:属性值;
...
}
4.3 ID选择器
使用 “#” 开头
#ID名 {
属性名:属性值;
...
}
4.4 复合选择器
多个标签在前面
a b c {
属性名:属性值;
...
}
a标签下的 b标签下的 c标签设置css样式