CSS常见样式

最新推荐文章于 2024-10-02 15:35:50 发布

麦农111

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量288

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_60286636/article/details/137425054

版权

本文详细介绍了CSS中的各种基础样式，包括字体样式（如斜体、加粗等）、文本对齐、列表样式、背景设置、隐藏元素、元素类型转换、边框设计以及表格的合并单元格和文本域的定制。

摘要由CSDN通过智能技术生成

字体相关的样式

		<style>
			div{
				/* 斜体 */
				font-style: italic;
				/* 加粗 100-900*/
				font-weight: 900;
				/* 字体大小 */
				font-size: 20px;
				/* 声明字体格式 */
				font-family: "微软雅黑";
			}
		</style>

div内部文字垂直居中

只需要将行高设为其height的大小即可。

div{
				text-align: center;
				line-height: 100px;
			}

文本相关的样式

		<style>
			p{
				/* 缩进 */
				text-indent: 2em;
				/* 行高 */
				line-height: 20px;
			}
			div{
				/* 设置div的宽和高以及背景颜色 */
				width: 200px;
				height: 200px;
				background-color: skyblue;
				/* 设置字对齐方式 */
				text-align: center;
				/* 设置行高*/
				line-height: 200px;
			}
		</style>

文本装饰

		<style>
			a{
				/* 删除超链接的下划线 */
				text-decoration: none;
				/* 改变颜色 */
				color: bisque;
			}
		</style>

列表相关样式

	<style>
		li{
			/* 删除列表前面的黑点 */
			list-style-type: none;
			/* 设置为图片 */
			list-style-image: url(./images/懒洋洋.jpg); 
			/* 设置黑点的定位 */
			list-style-position: inside;
		}
	</style>

背景

		<style>
			body{
				height: 5000px;
				/* 背景颜色 */
				background-color: aqua;
				/* 背景图片 */
				background-image: url(./王者背景.jpg);
				/* 设置背景不重复 */
				background-repeat: no-repeat;
				/* 设置定位 */
				background-position: 45px 30px; 
				/* 固定背景图 */
				background-attachment: fixed;
				/* 背景图强制铺满 */
				background-size: cover;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>

隐藏元素

		<style>
			div{
				/* 隐藏元素1 */
				display: none;
				/* 隐藏元素2 */
				visibility: hidden;
				/* 隐藏元素3 */
				opacity: 0;
				height: 200px;
				width: 200px;
				background-color: pink;
			}
		</style>

元素类型

		<style>
			/* 将其他元素转化为块元素 */
			span{
				display: block;
			}
		</style>

		<style>
			/* 转为行内块元素 */
			div{
				display: inline-block
			}
		</style>

边框

		<style>
			div{
				width: 300px;
				height: 100px;
				background-color: aqua;
				/* 设置边框像素 */
 				border-width: 20px;
				/* 设置边框样式 */
				border-style: double;
				/* 设置边框颜色 */
				border-color: pink; 
				/* 合并写 */
				border: 20px double pink;
				/* 设置边框弧度 */
				border-radius: 10px;
			}
		</style>

合并单元格相邻部分

		<style>
			td{
				border: 1px solid black;
			}
			table{
				border-collapse: collapse;
			}
		</style>

文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			textarea{
				/* 禁止拖拽 */
				resize: none;
				/* 改变悬停时的鼠标样子 */
				cursor: col-resize;
			}
		</style>
	</head>
	<body>
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</body>
</html>