HTML基础——CSS的简单使用

最新推荐文章于 2022-12-21 16:21:50 发布

Elec Liu

最新推荐文章于 2022-12-21 16:21:50 发布

阅读量521

点赞数

分类专栏： HTML 文章标签：数据库开发 html

本文链接：https://blog.csdn.net/qq_44629819/article/details/123782836

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、CSS示例
二、伪类选择器及伪元素

一、CSS示例

下面通过一个简单的CSS示例来了解一下CSS的新特性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS控制登录页面</title>
	<style>
		td{
			font-size: 9pt;
			color: black;
		}
		.btn_blue{
			font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			font-size: 6pt;
			color:azure;
			background-color:#65C993;
			cursor: hand;
			padding-bottom: 5px;
			padding-top: 5px;		
			padding-left: 15px;
			padding-right: 15px;
			border: 0px;
		}
		input{
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			font-size: 9pt;
			color: crimson;
			border: 2px solid #907373;
		}
		body{
			margin-left: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			margin-top: 0px;
		}
	</style>
</head>

<body>
	<form action="">
		<p>使用CSS样式设置登录页面样式</p>
		<table border="0">
			<tr>
				<td><div align="right">用户名：</div></td>
				<td>
					<div align="left">
						<label for="textfiled1"></label>
						<input type="text" name="text1" id="textfiled1">
					</div>
				</td>
			</tr>
			<tr>
				<td><div align="right">密码：</div></td>
				<td>
					<div align="left">
						<label for="textfiled2"></label>
						<input type="password" name="password1" id="textfiled2">
					</div>
				</td>				
			</tr>
			<tr>
				<td><div align="right">&nbsp;</div></td>
				<td>
					<div align="left"> 
						<input type="submit" name="submit" id="button" class="btn_blue" value="提交">
						<input type="reset" name="reset" id="button1" class="btn_blue" value="重置">
					</div>
				</td>
			</tr>
		
		</table>
	</form>
</body>
</html>

运行截图为：

在这里插入图片描述
发现使用CSS之后页面实在是好看了不少！！

二、伪类选择器及伪元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的元素选择器</title>
<style>
	h1{
		font-size: 16px;
	}	
	p{
		width: 200px;
		padding: 5px 10px;
		border: 1px solid #F5060A;
		font: 14px/1.5 Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	}
	/*第一行特殊样式*/
	p:first-line{
		color:aquamarine; 
	}
	/*第一个字母特殊样式*/
	p:first-letter{
		font-size:30px;
		color: darkred;
	}
</style>
</head>

<body>
	<h1>第一行文字的颜色与其他的不尽相同</h1>
	<p>床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>
</body>
</html>