/*
标签选择器：0001
class选择器：0010
id选择器：0100
伪类选择器：0010
包含选择器：权重之和
属性选择器：0010
伪元素选择器：0001
内联样式：1000
| 权重问题，代码运行的优先级和同级层叠性 |
/*是否斜体文本*/
font-style: italic;
| 文本格式 |
font-weight: bold;
| 字体粗细 |
font-size: 20px;
| 字体大小 |
font-family: "微软雅黑";
| 字体种类 |
font: 100 italic 29px/200px/*/后面是行高*/ "微软雅黑"：
| 连写格式 |
text-indent:28px;/*可以用2em做单位，默认自适用*/
| 段首文本缩进 |
line-height: 100px;
| 行高 |
text-align: center;
| 文本水平居中 |
/*文本装饰：去除a链接默认装饰*/
text-decoration: none;/*去下划线*/
| 去超链接下划线 |
/*设置文本颜色*/
color: #fff;
| 文本颜色 |
/* color: rgba(rgb(2rgb(63, 216, 63)9, 39), rgb(70, rgb(50, 50, 200), 70), rgb(26, 26, 191), .4) */
| 设置透明度 |
list-style-type: none;
| 去除列表小圆点 |
list-style-image: url();
| 列表中项前的小图标 |
list-style-position: inside;
| 改变标识符的位置 |
/*背景颜色*/
background-color: aqua;
| 背景颜色 |
/*背景图片*/
background-image: url();
| 背景图片插入 |
background-repeat: no-repeat;/*repeat-y只铺满y轴*/
| 图片填充 |
/*background-position-x: 45px 30px;*//*left top固定左上角*/
| 图片位置固定 |
background-attachment: fixed;
| 图片跟随滚轮固定 |
/*强行铺满*/
/*background-size: cover;*/
| 图片涂满页面 |
direction: ltr;
| 文本方向 |
div{
/* */
/*display: none;*/
/* */
/*visibility: hidden;*/
opacity: 1;
width: 300px;
height: 300px;
background-color: aquamarine;
}
div:hover{
opacity: 0;
}
| 隐藏元素 |
/*元素：块元素，行内元素，行内块元素
块元素：默认独占一行，设置宽高，设置内外边距 div,h1~h6,p,li
行内元素：无法直接设置宽高，内外间距，多元素可以放置同一行 a,span
行内块元素：可以直接设置宽高，不会独占一行 img,input
*/
| 元素类型 |
div{
width: 300px;
height: 100px;
background-color: aqua;
/* border-width: 20px;
border-style: solid;
border-color: black;*/
border: 1px solid red;
border-radius: 10px;
}
| 用·border描边设置边框 |
table{
border-collapse: collapse;
}
| 表格中合并框框 |
td{
border: 1px solid red;
text-decoration: underline;
}
| 表格中设置边框颜色和文字加 下划线 |
cursor: pointer;
| 光标为一只手 |
resize: none;
| 文本框中初始不可拉伸 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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;
}
.son {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
</body>
</html>
| 绝对定位 |
position: fixed;
| 固定定位 |
<style>
.pol{
position: sticky;
top: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<p class="posi">Soluta laborum minima aliquam laudantium! Tenetur consequuntur ratione cupiditate, perferendis quos
dolores molestiae atque obcaecati ullam possimus aspernatur porro delectus accusantium </p>
</body>
| 粘性定位 |
本文详细解释了CSS中的各种选择器类型（如class、id等）、内联样式设置、优先级和层叠规则，以及元素的绝对、固定和粘性定位方法，涵盖了CSS基础和布局技巧。
926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
