文章详细介绍了CSS中的复合选择器，包括后代选择器、子元素选择器、并集选择器和伪类选择器，并讲解了元素的显示模式，如块元素、行内元素和行内块元素的特性和转换方法。此外，还涵盖了背景属性，如背景颜色、图片、平铺和位置。最后，提到了CSS的层叠性、继承性和优先级概念，以及盒子模型的组成，如边框、内边距和外边距，以及如何处理边框影响的盒子大小和外边距合并问题。
1.CSS的复合选择器
1.1什么是复合选择器
- 复合选择器可以更准确，更高效得选择目标元素
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器，子选择器，并集选择器
1.2后代选择器 （重要）
元素1 元素2 { 样式声明}
<style>
ul li {color: brown;}
</style>
</head>
<body>
<ul>
<li>我是红色</li>
<li>我是红色</li>
<li>我是红色</li>
</ul>
<ol>
<li> 我是黑色</li>
<li>我是黑色</li>
<li>我是黑色</li>
</ol>
</body>
1.3子元素选择器
只能选择作为某元素的最近一级子元素
元素1>元素2{样式声明}
<style>
.fruit>a {color: brown;}
</style>
</head>
<body>
<div class="fruit">
<a href="#">苹果</a>
<ul>
<li><a href="#">香蕉</a></li>
<li><a href="#">菠萝</a></li>
</ul>
</div>
</body>
1.4并集选择器
元素1,
元素2{样式声明}
<style>
a,
p{color: brown;}
</style>
</head>
<body>
<div>
<a href="#">苹果</a>
<p>我是红苹果</p>
我是青苹果<br>
</div>
</body>
1.5链接的伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择鼠标按下未被弹起的链接
<style>
a：link{
color: brown;
text-decoration: none;
}
a:visited{
color: yellow;
}
a:hover{
color: aqua;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
注意：1.按照LVHA的顺序声明：:link_:visited_:hover_:active
2.在实际工作中，要给链接单独指定样式
1.6focus伪类选择器
把获得光标的表单选取出来
input:focus{
background-color:yellow;
}
1.7复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 子孙后代 | 较多 | 空格.nav a |
| 子代选择器 | 选择最近一级元素 | 亲儿子 | 较少 | 大于.nav>p |
| 并集选择器 | 选择像同样样式元素 | 可用于集体声明 | 较多 | 逗号.nav.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | a:{}&a:hover{} |
| ：focus选择器 | 获得光标的表单 | 跟表单相关 | 较少 | input：focus |
2CSS的元素显示模式
2.1什么是元素的显示模式
作用：元素（标签）到底以什么方式进行显示，HTML一般分为块元素和行内元素
2.2块元素
特点：比较霸道，独占一行
高度，宽度，外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或块级元素
注意：在文字类元素内不能使用块级元素
2.2行内元素
特点：相邻的行内元素在一行上，一行上可以放置多个行内元素
宽和高直接设置是无效的
默认的宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
注意 ：链接内不能再嵌套链接
a 标签内可以放块级元素，但给a转换下一级模式最安全
2.3行内块元素
特点：和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素的特点）
默认宽度就是它本身内容的宽度（行内元素的特点）
高度，行高，边外距以及边内距都可以控制（块级元素的特点）
注：常见的行内块元素,,
2.4元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个 | 可以设置宽高 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行能放多个 | 不可以设置宽高 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行能放多个 | 可以设置宽高 | 它本身内容的宽度 |
2.5元素显示模式的转换
转换为块级元素：display: block;
转换为行内元素:display: inline;
转换为行内块元素：display: inline-block
3.CSS背景
通过CSS背景属性，可以给页面添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等
3.1背景颜色
background-color: 颜色值
一般背景元素的默认值为transparent
3.2背景图片
background-image:none|url="地址"
背景参数：
背景图片不平铺：background-repeat:no-repeat;
沿着X轴平铺：background-repeat:repeat-x;
沿着y轴平铺：background-repeat:repeat-y;
3.3背景图片的位置
利用background-position：x,y;属性可以改变图片在背景中的颜色
1.参数是方位名词，则两个前后顺序无关比如left top和top left效果相同
2.如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
3.参数是精确单位，background-position: 20px 50px; 顺序不可改变
4.参数是混合单位，background-position: 20px center; 顺序不可变
3.4背景图像的固定
background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动
语法：background-attachment:scroll|fixed
| 参数 | 作用 |
|---|---|
| scroll（默认） | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
3.5背景复合写法
background:颜色 url(路径) no-repeat fixed center top
3.6背景颜色半透明
background:rgba(0,0,0,.3)
3.7背景总结
| -属性 | -作用 | -值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值 |
| background-image | 背景图片 | url(路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y坐标 |
| background-attachment | 背景附和 | scroll(背景滚动)/ fixed(背景固定) |
| 背景简写 | 书写更简单 | 颜色 图片地址 背景平铺 背景滚动 背景位置 |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3) |
CSS的三大特性
css有三个非常重要的特性：层叠性，继承性，优先级
1.1层叠性
原则：相同选择器样式冲突，就近原则；样式不冲突，不会重叠；
口诀：长江后浪推前浪，前浪拍死沙滩上
1.2继承性
子元素可以继承父元素的某些样式（text-，font-，line-这些元素开头都可以继承，以及color属性）
口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
行高的继承：font:12px/1.5 让所有子元素的行高是当前元素的1.5倍，可以跟单位也可以不跟
1.3优先级
当同一个元素指定多个选择器，就会有优先级
权重：
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“” | 1，0，0，0 |
| ！important 重要的 | ∞无穷大 |
注意：
1.继承的权重是0，如果该元素没有直接选中，不仅父元素权重有多高，子元素的权重都为零
2.权重是有四组数字组成的，但是不会有进位
复合选择器会权重叠加，但永远不会有进位
CSS的盒子模型
1.盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位，学好盒子模型能非常好得帮助我们布局页面
1.1看透网页布局得本质
网页布局过程：
1.先准备好相关的网页元素，网页元素都是基于盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置（核心）
3.往盒子里装内容
1.2盒子模型的组成
border边框
content内容
padding内边距
margin外边距
1.3边框（border）
border可以设置元素的边框，边框有三部分组成：边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
语法：border: border-width||border-style\\border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式，solid实线边框，dashed虚线边框，dotted点线边框 |
| border-color | 边框颜色 |
边框的复合写法：
border：1px solid red;没有顺序
边框分开写：
border-top：1px solid red; 只设上边框
1.4表格的细线边框
border-collapse: collapse;表示相邻边框合并在一起
1.5边框会影响盒子实际大小
边框会额外增加盒子的实际大小，有两种方式解决：
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要 width/height 减去边框宽度
1.6内边距（padding）
padding-left:20px;
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding 属性（简写属性）可以有一到四个值
值的个数 表达意思
padding: 5px; 1个值，代表上下左右都有5像素内边距；
padding: 5px 10px; 2个值，代表上下内边距是5像素 左右内边距是10像素；
padding: 5px 10px 20px; 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素；
padding: 5px 10px 20px 30px; 4个值，上是5像素 右10像素 下20像素 左30像素 顺时针
当我们给盒子指定 padding 值后，发生了 2 件事情：
1.添加了内边距
2.padding 影响了盒子实际大小
盒子已有宽度和高度，此时再指定内边距，会撑大盒子
解决方案：
让 width/height 减去多出来的内边距大小
如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小
1.7外边距（margin）
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin 简写方式代表的意义跟 padding 完全一致
1.8典型应用
外边距可以让块级盒子水平居中，但必须满足两个条件：
1.盒子必须指定了宽度
2.盒子左右的外边距都设置为 auto
常见的写法：
1.margin-left: auto; margin-right: auto;
2.margin: auto;
3.margin: 0 auto;
**注意：**以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
1.9.外边距合并
外边距的合并，主要有两种情况：
1.相邻块元素垂直外边距的合并
2.嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom ，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
解决方案：
尽量只给一个盒子添加 margin 值
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义内边距
3.可以为父元素添加 overflow:hidden
还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题
8.清除内外边距
-
{
padding: 0; /* 清除内边距 /
margin: 0; / 清除外边距 */
}1.参数值可以为数值或百分比的形式
2.如果是正方形，想设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
3.如果是个矩形，设置为高度的一半就可以做圆角矩形
4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角，两个数值对角线是一个数值
5.分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
1.10圆角边框（重点）
语法：
border-radius: 10px; /* border-radius: length; */
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
1.参数值可以为数值或百分比的形式
2.如果是正方形，想设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
3.如果是个矩形，设置为高度的一半就可以做圆角矩形
4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角，两个数值对角线是一个数值
5.分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
1.11盒子阴影（重点）
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 属性值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 将外部阴影（outset)改为内部阴影 |
注意：
1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占空间，不会影响其他盒子排列
1.12文字阴影
语法：
text-shadow: h-shadow v-shadow blur color;
| 属性值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置 |
| v-shadow | 必需。垂直阴影的位置 |
| blur | 可选。模糊位置 |
| color | 可选。阴影的颜色 |
扫一扫
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
