字体相关的样式
<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>
