CSS常见样式

作者：不正经 | 2024-04-08 16:36:13

踩

CSS常见样式

字体相关的样式


		<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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/386843