PHP基础学习第七篇五中元素的CSS样式（背景、文本、字体、链接、表格）

本文链接：https://blog.csdn.net/xiaomoge__/article/details/126965056

本文详细介绍了CSS的基本用法，包括背景属性、文本样式、字体设置、链接状态及表格样式的设置方法。通过具体实例展示了如何使用这些属性来美化网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

CSS背景属性用于定义HTML元素的背景

CSS属性定义背景效果：

1、background-color（颜色）

CSS中颜色有以下方式定义：

十六进制-如："#ff0000"

RGB-如："rgb(255.0.0)"

颜色名称-如："red"

举例：

h1{background-color:#6495;}

p{background-color:rgb(255,0,0);}

div{background-color:red;}

2、background-image（图片）

描述元素的背景图像默认情况下进行平铺重复显示，以覆盖整个元素

3、background-repeat（图像平铺/重复）

举例如下：不平铺

body{Share/OneHop/background.jpg');

background-repeat:no-repeat;}

4、background-attachment（图像是否随页面滚动）

固定背景图片：

body{Share/OneHop/background.jpg');

background-repeat:no-repeat;

background-attachment:fixed;

}

5、background-position（图像起始位置）

设置背景图片的起始位置举例如下：

body{background-image:url('background.jpg');

background-repeat:no-repeat;

background-position:right top;

}

二、文本（text）

1、文本颜色（color）：

body{color:red;}

h1{color:#00ff00}

h2{color:rgb(255,0,0);}

2、文本对齐（text-align）:

h1{text-align:center;}（居中）

p.date{text-align:right;}（右）

p.main{text-align:justify;}（两端）

3、去除链接下划线（text-decoration）:

a{text-decoration:none;}

4、文本缩进（text-indent）

p{text-indent:50px;}

三、字体（font）

1、字体系列(font-family)

font-family属性设置文本的字体系列。

font-family属性可以设置多个字体作为后备，如果游览器不支持第一种字体，可尝试下一种字体。

注意：如果字体系列的名称超过一个字，英文则不需要，必须使用引号，如：

font-family:"宋体"

p{font-family:"宋体",Times,serif}

2、字体样式(font-style)

p.normal{font-style:normal;} （正常）

p.italic{font-style:italic;} （斜体）

p.oblique{font-style:oblique;}（倾斜）

3、字体大小（font-size）

p{font-size:14px;}

四、链接（link）

链接状态：

a:link{color:blue;}/*未访问链接*/

a:visited{color:blue;}/*已访问链接*/

a:hover{color:blue;}/*鼠标移动到链接上*/

a:active{color:blue;}/*鼠标点击时*/

五、表格（table）

1、表格边框（border）:

table,th,td

{

border:1px solid black;

}

2、表格边框合并（border-collapse）:

table{

border-collapse:collapse;

}

table,th,td

{

border:1px solid black;

}

3、表格宽度（width）和高度（height）

table

{

width:100%;

}

{

height:50px;

}

4、表格文字对齐

水平对齐（text-align）:

td{text-align:right;}

垂直对齐(vertical-align):

{

height:50px;

vertical-align:bottom;

vertical-align:top;备注：向上

}

5、表格边框颜色

table,td,th

{

border:1px solid green:

}

{

background-color:green;

color:white;

}

以下为代码演示效果：

代码如下：

<!DOCTYPE html>
<html>
    <head>
	    
	    <title>08五种元素的CSS样式</title>
		<link rel="stylesheet" type="text/css" href="实验3.css">
	</head>
	<body>
	    <div class="background1"></div>
		<p class="text1">文本字体颜色、大小、设置</p>
		<p class="text2">文体是否居中</p>
		<a href=""><h1>这是一个链接</h1></a>
		<p class="text3">首行缩进100px的一句话</p>
		<p class="font1">这是一段使用楷体的文字并设置斜体</p>
		
		<table>
		    <tr>
				<td><p class="xm1">1-1</p></td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
		    <tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
		    <tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		
		</table>
	</body>
</html>

由于使用了外部样式表以下代码为样式设置代码

.background1{
    width:100%;
	height:10px;
	background-color:blue;

}
body{
	background-image:url('C:/Users/xiaomo/Pictures/IMG_20190419_191256.jpg');
	background-repeat:on-repeat;
	background-position:right top;
	background-attachment:fixed;
}
.text1{
	color:red;
	font-size:100px;
}
.text2{
	text-align:right;
	color:blue;
	font-size:50px;
}
a{
	text-decoration:none;
}
.text3{
	text-indent:100px;
	font-size:80px;
}
.font1{
	font-family:"楷体";
	font-size:80px;
	font-style:italic;
}
table,th,td{
	border:10px solid black;
	border-collapse:collapse;
}
td{
	width:80px;
	height:80px;
	
}
.xm1{
	font-size:50px
}