CSS-属性
属性
1.字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对其方式
- line-height:行高
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
p{
color: #FF0000;
font-size:30px;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<p>奇闻说今古</p>
</body>
</html>
运行结果
2.背景
background:
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
p{
color: #FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border: #00008B solid 1px;
}
div{
border: #FF0000 solid 2px;
width:150px;
height:150px;
background: url(img/QQ截图20220802162029.png) no-repeat;
}
</style>
</head>
<body>
<p>奇闻说今古</p>
<div>
</div>
</body>
</html>
运行结果
3.边框
- border:设置边框,符合属性
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
p{
color: #FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border: #00008B solid 1px;
}
</style>
</head>
<body>
<p>奇闻说今古</p>
</body>
</html>
运行结果
4.尺寸
- width:宽度
- height:高度
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
p{
color: #FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border: #00008B solid 1px;
}
div{
border: #FF0000 solid 2px;
width:150px;
height:150px;
}
</style>
</head>
<body>
<p>奇闻说今古</p>
<div>
</div>
</body>
</html>
运行结果
5.盒子模型:控制布局
- margin:外边距
- padding:内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div{
border: #FF0000 solid 5px;
}
#div1{
width: 50px;
height:50px;
}
#div2{
width:20px;
height:20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
运行结果
