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