1.关系选择器分类：
1.1后代选择器：
/* 后代选择器
选择所有被E元素包含的F元素，中间用空格隔开
E F{}; */
ul li{
color:red;
}
1.2直接子元素：
/* 子代选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用
E>F{} */
div>p{
color: aqua;
}
1.3相邻兄弟选择器：
* 相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素,只能向下选择
E+F{} */
h3+p{
color: red;
}
1.4通用兄弟选择器：
/* 通用兄弟选择器
选择E元素之后的所有兄弟元素F
E~F{} */
h3~p{
color: red;
}
2.外部样式
<link
rel
=
"stylesheet"
href
=
"product.css"
>
product.css
p{
color: aqua;
font-size: 20px;
}
3.字体属性
-
红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
-
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
-
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
-
透明度（A）取值 0~1 之间， 代表透明度。
p{
color: rgba(0, 255, 0, 1);
font-size: 50px;
font-weight: 700;
font-style: italic;
font-family:"微软雅黑";
}
h1{
font-style: normal;
}
4.定位
-
"static"：这是元素的默认值。元素不会被特别定位，元素出现在文档的正常流中。
-
"relative"：元素相对于其正常位置进行定位。因此，"left:20px" 会将元素向右移动20px。
-
"absolute"：元素相对于最近的非 static 定位的祖先元素（而不是相对于视窗）进行定位。如果没有非 static 定位的祖先元素，那么它会相对于<html>元素。
-
"fixed"：元素相对于浏览器窗口进行定位，即使页面滚动，它也始终保持在相同的位置。
-
"sticky"：它是相对于"relative"和"fixed"定位的混合。基本上，元素在跨越特定阈值之前为相对定位，之后为固定定位。
position：关键词；
5.弹性盒子模型
Flexbox布局允许你轻松地在行或列方向上对元素进行对齐和分布。在你的代码中，.container元素是一个flex容器，它包含三个子元素.box1、.box2和.box3。你设置了flex-direction: row;，这意味着子元素将沿着水平方向排列（在正常的文本流中，从左到右）。justify-content: center;和align-items: center;则使得子元素在行和列方向上居中对齐。
每个.box元素都有自己的宽度、高度和背景色，而flex属性则决定了它们在容器中的相对大小。flex: 2;意味着该元素的伸缩比例是其他元素的两倍，而flex: 1;则表示该元素的伸缩比例与其他元素相同。
.container{
width:500px;
height:500px;
background-color: #666;
display: flex;
flex-direction: row;
justify-content:center;
align-items:center;
}
.box1{
width: 100px;
height: 100px;
background-color: aqua;
flex: 2;
}
.box2{
width: 100px;
height: 100px;
background-color:blue;
flex: 2;
}
.box3{
width: 100px;
height: 100px;
background-color: aquamarine;
flex: 1;
}
6.文本属性
-
h3样式类设置文本对齐方式为右对齐（text-align:right;），并添加了上划线装饰（text-decoration:overline;）。
-
p1样式类设置字体大小为30像素（font-size:30px;），文本居中对齐（text-align:center;），并将文本转换为大写（text-transform:uppercase;）。
-
p2样式类设置文本缩进为30像素（text-indent:30px;）。这里的注释是“30像素代表缩进两个单词”，这意味着30像素的缩进可以让你在HTML中看到两个单词的间距
h3{
text-align:right;
text-decoration:overline}
.p1{
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
/* 30像素代表缩进两个单词 */
.p2{
text-indent: 30px;
}
<h3>姬霓太美</h3>
<p class="p1">hello world</p>
<p class="p2">从这次培训看,医疗体系正在快速培训合理的救治方案,以迅速应对新冠感染导致的危急重病患。好消息是,张文宏医生以他一线临床的丰富经验,并凭借其职业身份的号召力,与团队制订了72小时救治方案,可以详细指导基层医生开展工作，即使是那些进口药短缺的地方，也可以实施有效的医学干预。</p>
7.文档流
浮动
清除浮动
你定义了一个名为.container的类，它有一个宽度为500px，背景色为aqua。然后使用::after伪元素来清除浮动，这是在处理浮动布局时常见的一种技巧。定义了一个名为.box的类，代表一个100px x 100px的黑色方块，它有一个5px的外边距，并且是浮动的。
定义了一个名为.text的类，它代表一个100px x 100px的蓝色文本或内容块，该块使用clear属性来避免与浮动元素相邻。
.container{
width: 500px;
background-color: aqua;
}
.container::after{
content: "";
display: block;
clear:both;
}
.box{
width: 100px;
height: 100px;
background-color: black;
margin: 5px;
float:left;
}
.text{
width: 100px;
height: 100px;
background-color: blue;
clear: both;
}
8.盒子模型
padding内
margin外
div{
width: 100px;
height: 100px;
background-color: aqua;
padding:50px 10px;
border: 5px solid black;
margin: 50px 10px;
}
9.背景属性
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width:100px;
height: 100px;
background-image: url("1.jpg");
background-repeat: repeat;
background-size: contain;
background-position:left top;
}
10.表格属性
table,td{
border:1px solid red;
}
table{
border-collapse:collapse; 可以将表格的边框合并为一个单一的边框，从而简化样式和布局
}
td{
padding:20px;
background-color:green;
color: black;
}
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
如果没有 border-collapse:collapse;如下图所示
11.选择器
11.1 ID选择器
#text{
color: aqua;
font-size: 20px;
}
#mytext{
color: aqua;
font-size: 20px;
}
<p id="text">唱跳</p>
<p id="mytext">rap</p>
11.2 元素选择器
span{
color: aqua;
}
<p>唱<span>跳</span>打篮球</p>
11.3 全局选择器
*{
font-size: 30px;
color: aqua;
}
11.4 合并选择器
p,h1{
color: aqua;
font-size: 50px;
11.5 类选择器
.content{
color: aqua;
}
.size{
font-size: 50px;
}
<p class="content size">哎呀呀呀</p>
扫一扫
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
