CSS的入门之旅
这是我参与「第五届青训营 」笔记创作活动的第3天
今天要学习css的基础知识第二部分
下面就来简单介绍CSS的第二部分基础知识吧
CSS复合选择器
【作用】：复合选择器就是可以更准确，更高效的选择目标元素
- 复合选择器是由两个或多个基础选择器，通过不同方式组合而成的
以下就是一些常见的复合选择器：
1.后代选择器
- 后代选择器又叫做包含选择器，可以选择父元素里面的子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开
【语法】：
元素1 元素2{样式声明}
- 元素2是元素1的后代
【例如】：
ul li {样式声明} 选择ul标签里的所有li标签元素
- 如果出现有两个相同的标签而且后代标签也相同的话，可以添加类名并引用
2.子选择器
- 子选择器只能选择某元素最近一级子元素
【语法】：
元素1>元素2 {样式声明}
【例如】：
div > p{样式声明} 选择div里所有最近一级的p标签
- 最后选择的是元素2
3.并集选择器
- 并集选择器可以选择多组标签，并为他们定义相同的样式
【语法】：
元素1，元素2 {样式声明}
【例如】：
ul,div {样式声明} 选择ul和div标签
-
标签之间用逗号隔开
-
选择器标签一般竖着放
4.伪类选择器
-
伪类选择器就是用于给某些选择器添加特殊效果，比如给链接添加特殊效果，或选择某个元素
-
【特点】：用冒号表示，比如：hover
-
伪类选择器也有多种，下面就来先讲解链接伪类
1.链接伪类
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择鼠标按下但还未跳转的链接
-
在实际开发中需要按照lvha的顺序声明：:link :visited :hover :active
-
因为a标签在浏览器中具有默认样式，所以我们需要给链接设置特定样式
2.:focus伪类选择器
:focus就是用于选择获得焦点的表单元素，一般情况下<input>类表单才能获取
【例如】：
input:focus{
background-color: red;
}
- 此代码就实现了鼠标点击到哪个input类型标签元素时，元素背景颜色就会变成红色
CSS网页显示模式
- 元素显示模式就是元素以什么方式进行显示
HTML一般分为块元素和行内元素
1.块元素
- 常见的块元素有
<h1>~<h6> <p> <div> <ul> <ol> <li>
【特点】：
1.独占一行
2.高度，宽度，外边距和内边距都可以改
3.宽度默认是容器的100%
4.内部可以放行内块元素或者块级元素
2.行内元素
- 常见的块元素有
<a> <strong> <b> <em> <i> <del> <ins> <u> <span>
【特点】：
1.相邻行内元素在一行，一行可以显示多个
2.无法直接设置宽度和高度
3.默认宽度就是本身内容宽度
4.行内元素只能放下文本和其他行内元素
3.行内块元素（特殊）
- 常见的块元素有
<img/> <input/> <td>
【特点】：
1.相邻行内元素在一行，一行可以显示多个
2.可以设置宽度和高度
3.默认宽度就是本身内容宽度
4.显示模式转换
1.转换为块级元素：
- diplay:block
2.转换为行内级元素：
- diplay:inline
3.转换为行内级元素：
- diplay:inline-block
CSS的背景
- 通过CSS背景属性，可以给页面元素添加背景样式，比如背景颜色，图片，是否平铺，图片位置，图像固定等等
1.背景颜色
【语法】：
background-color:颜色值;
-
如果颜色值不写一般默认为transparent（透明）
-
颜色半透明：
background：raba（0，0，0，0.3）
a即是aloha透明度
2.背景图片
【语法】：
<background-image: url(images/1.jpg);>
3.背景平铺
【语法】：
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
4.背景位置
【语法】：
background-position:x y;
- x与y的坐标可以使用方位名词或者精确单位
| 参数 | 意思 |
|---|---|
| length | 百分数或者有单位标识符组成的长度 |
| position | top center bottom(垂直方向)/left center right（水平方向） |
-
如果方位名词只写了一个值则第二个值默认居中
-
如果用精确单位则第一个必须是x值，第二个是y值，如果只写了一个，那这一个就一定是x值
-
还可以使用混合方式，但第一个值一定是x，第二个是y
5.背景固定
背景固定就是可以固定页面看是否随着页面其余部分滚动
【语法】：
background-attachment :scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随着页面内容滚动（默认） |
| fixed | 背景图像固定 |
背景属性顺序写法
background：颜色 图片地址 平铺 图像滚动 图片位置
【例如】：
background：transparent url（images.jpg） rapeat-x fixed top;
- 以上就是关于CSS基础知识的第二部分啦，希望大家能够掌握
