CSS 对于(文本、背景、列表、表格)的修饰

最新推荐文章于 2022-11-14 00:17:04 发布

小智RE0

最新推荐文章于 2022-11-14 00:17:04 发布

阅读量426

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/MrTumnus/article/details/114853869

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

修饰文本
修饰背景
修饰列表
修饰表格

修饰文本

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>