目录
文字文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字样式</title>
<style>
div#sp1{font:italic bold 50px "宋体";color:blue;text-align:center;}
div[id="sp2"]{
text-align: center;
letter-spacing: 1em;
line-height: 50px;
font-family: "楷体";
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<!--
文字常用样式:字体类型(font-family);字体加粗(font-weight);字体倾斜(font-style);字体大小(font-size);字体大小写(font-variant)
标签名{
font-family:"宋体";
font-weight:bold;
font-style:italic;
font-size:100px;
}
复合样式写法:font:font-style font-weight font-size font-family,复合样式写法的顺序是固定的,不能错乱
标签名{font:italic bold 100px "宋体";}
文本常用样式:
对齐方式:text-align:center;
行间距:line-height: 50px;
首行缩进:text-indent:2em; em为单个汉字字符的距离
文本线:text-decoration
字间距:letter-spacing
词间距:word-spacing
-->
<div id="sp1"><span>林则徐</span><br></div>
<div id="sp2"><span><br>苟利国家生死以<br>岂因祸福避趋之</span><br></div>
</body>
</html>
背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
div#di1{
width: 500px;
height: 400px;
background-color: yellow; /* 设置背景颜色 */
background-image: url("../img/img1/287149.jpg"); /* 设置背景图片 */
background-repeat: no-repeat; /* 设置背景图片不平铺 */
background-size: 400px 300px; /* 设置背景图片大小 */
background-position: center; /* 设置背景定位 */
}
/* 复合样式:background:颜色 图片 是否平铺 背景定位/背景大小 */
div#di2{
width: 500px;
height: 400px;
border: 1px solid blue;
background: yellow url(../img/img1/287149.jpg) no-repeat center/400px 300px;
}
</style>
</head>
<body>
<div id="di1">
<p style="text-align: center; color: red; font-size: 20px;">这是一个背景</p>
</div>
<br>
<div id="di2">
<p style="text-align: center; color: red; font-size: 20px;">这是一个背景复合样式</p>
</div>
</body>
</html>
常用样式