修饰文本
color:字体颜色。
font-size:字体大小。
font-family:字体。
text-align:文本对齐。
text-decoration:line-through:定义穿过文本下的一条线。
text-decoration:underline:定义文本下的一条线(下划线)。
text-decoration:none:定义标准的文本(可用来消除a链接标签默认的下划线)。
font-style: italic;斜体文本。
font-weight:字体粗细。
line-height:设置行高。
letter-spacing可以指定字符间距。(适用于中文)
word-spacing 指定单词的间距。
text-indent用来设置首行缩进 ;例如text-indent:2em 首行缩进2个字符。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{
color: #7CFC00; /*颜色*/
font-size:px; /* 字体尺寸大小 */
font-family: "楷体";/* 字体样式 */
font-weight:bold;/* 加粗字体 */
letter-spacing:20px;/* 字符间距 */
text-decoration:underline;/* 定义下划线 */
text-indent:2em;/* 定义首行缩进 */
}
a{text-decoration: none;/* 去除下划线 */
}
.p2{
word-spacing:100px ;/* 单词之间的距离 */
}
</style>
</head>
<body>
<p class="p1">
提供了丰富的文档样式外观,以及设置文本和背景属性的能力;
允许为任何元素创建边框,以及元素边框与其他元素间的距离,
以及元素边框与元素内容间的距离;
允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
</p>
<p class="p2">
hello world
</p>
<a href="bilibili.html">bilibili</a>
</body>
</html>
运行:
修饰背景
background-color背景颜色。
background-image背景图片(优先级高于背景颜色,不占用标签空间)。
background-repeat设置背景重复;
background-repeat: no-repeat;停止重复;
repeat-x;在X轴重复。
background-size背景尺寸。
background- position 背景位置;例如 xxx:left top 左上位置。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
width: 1920px;
height:1026px;
background-color: #7CFC00; /* 背景颜色 */
background-image: url(img/BG.png) ;/*背景图片*/
background-repeat: no-repeat;/* 设置背景重复 ,选择不重复 */
background-size: 1000px 800px ;/* 背景大小 */
background-position: right center;/* 背景位置 */
}
</style>
</head>
<body>
<p>
这是一个段落
</p>
</body>
</html>
运行:
修饰列表
list-style-type:/circle/ none; 调整列表前面的样式;
list-style-image:url(baidu.ico);调整列表前的图标;
list-style-position: inside;调整图标的位置,inside里面;outside外面;
text-align: center;列表的位置;
其中,列表的几个属性可以简写在一个里面,不分顺序;
例如:list-style:none inside url(baidu.ico);
案例使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1>li{
list-style-type:none;/* 列表前面得默认图标,设置无 */
list-style-image: url(img/baidu.ico);/* 给列表加图标 */
list-style-position: inside;/* 调整图标的位置,inside里面;outside外面; */
text-align: center;/* 列表位置 */
/* list-style:none inside url(baidu.ico); */
/* 组合使用 */
}
</style>
</head>
<body>
<ul class="p1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
运行:
修饰表格
border-collapse: collapse; 边框折叠,重合部分直接公用一条边框;
解决了之前在表格属性设置的缺陷问题。
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bge{
width: 800px;
height: 1000px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="bge" border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
运行: