【web前端】CSS语法
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样式