1. 权重问题:
标签选择器:0001
class选择器: 0010
id选择器:0100
伪类选择器:0010
包含选择器:权重之和
属性选择器:0010
伪元素选择器:0001
内联样式:1000
2. 字体相关样式:
font-style: italic; 是否斜体
font-weight: 900; 粗细
font-size: 10px; 大小
ont-family: "微软雅黑";
3. 文本相关的样式:
text-indent: 2em; 首行缩进
width: 800px;
height: 200px;
background-color: aqua;
text-align: right/center; 文字
line-height: 200px; 行高
4. 文本装饰:
text-decoration: line-through; 链接删除线
text-decoration: none; 去除链接下划线
color:red; 文字颜色
opacity: 0.2; 透明度
5. 列表相关样式:
list-style-type: none; 删除列表装饰
list-style-type: circle; 圆圈
list-style-image: url( ); 图片作为列表样式
list-style-position: inside;
6. 背景:
body {
height: 3000px;
background-color: aqua; 背景颜色
background-image: url(../ ); 背景图片
background-repeat: repeat-y/no-repeat;
background-position: left top
background-attachment: fixed; 滑动但位置不变
background-size: cover; 强行铺满
}
margin: 0 auto; 水平居中
7. 文本方向:
div {
direction: rtl;
}
8. 隐藏元素:
display: none; 完全消失
visibility: hidden; 空间保留
opacity: 0;
9. 元素:块元素、行内元素、行内快元素
块元素:默认独占一行,设置宽高、设置内外边距 div、h1~h6、p、li
行内元素:无法直接设置宽高、内外间距 a、span
行内块元素:可以直接设置宽高、不会独占一行 img、input
display: block; 将其他元素转换为块元素
display: inline-block; 变为行内块元素
10. 边框:
border-width: 20px; 边框厚度
border-style: double/solid/dotted; 边框样式
border-color: black;
border: 1px solid red; 连写
border-radius: 50% 50px; 边框弧度
11. 表格:
cellspacing="0" 间距(用于body)
border-collapse: collapse; 消除表格间隙
td {
width: 100px;
height: 50px;
border: 1px solid black;
text-align: center;
color: pink;
text-decoration: underline;
}
12. 文本域:
textarea {
width: 300px;
height: 70px;
resize: none; 不可放大缩小
}
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
div {
width: 300px;
height: 300px;
background-color: pink;
cursor: cell; 鼠标样式
}
13. <style>
.father {
position: relative;
width: 900px;
height: 400px;
background-color: aqua;
}
.son1 {
position: absolute;
top: 200px;
right: 0px;
z-index: 1; 谁在上谁在下
background-color: blue;
}
.son2 {
position: absolute;
top: 150px;
right: 0px;
background-color: blueviolet;
}
</style>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
14. 固定定位:
div {
position: fixed; 永远停在页面某个位置
bottom: 15px;
right: 10px;
width: 300px;
height: 300px;
background-color: black;
}
15. 粘性定位:
.class名 {
position: sticky;
top: 20px;
background-color: aqua;
}