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>