3.CSS常见样式
3.1常见语法
选择器{
属性：属性值
}
3.2常见样式
3.2.1 控制字体
字号：font-size:10px；
字颜色：color:red；
字体：font-family:"宋体"；
行高：line-height:200%;
body{
font-size: 20px;
color: brown;
font-family: "楷书";
line-height: 300%;
font-weight: bolder;
border: 1px solid royalblue;
}3.2.2样式特点
1.继承性：子元素继承父元素样式
2.层叠性：子元素与父元素样式相同类型子元素会覆盖父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 20px;
color: brown;
font-family: "楷书";
line-height: 300%;
font-weight: bolder;
border: 1px solid royalblue;
}
p{
font-size: 20px;
color: rgb(70, 2, 2);
font-family: "宋体";
line-height: 300%;
font-weight: bolder;
border: 1px solid rgba(3, 37, 140, 0.963);
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>效果：
3.2.3控制文本
text-indent：控制文本缩进
text-align：文本对齐方式
text-tranform：文本的大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one{
text-indent: 2em;
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<p id="one">这是一个段落 this is</p>
<p>this is </p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
