CSS伪类选择器元素显示模式及背景

Emmet语法

1.生成标签按tab键即可

2.生成多个标签，加上*就可以。比如div * 3，就会快速生成3个div

3.如果有父子级关系的标签，用>就可以了。比如ul>li

4.如果有兄弟关系的标签，用+就可以了。比如div+p

5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

6.如果生成的div类名是有顺序的，可以用自增符号$

1.CSS的复合选择器

1.1后代选择器

包含选择器，可以选择父元素里面的子元素

元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)
例如：

ul li {样式声明}  /*选择ul里面所有的li标签元素*/

元素1和元素2中间用空格隔开
元素1是父级，元素2是子集，最终选择的是元素2
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

1.2子选择器(重要)

只能选择作为某元素最近一级的子元素。

元素1 > 元素2 例如：

div > p {样式声明} /*选择div里面所有最近一级p标签元素*/

元素1和元素2之间用大于号隔开
元素1是父级，元素2是子集，最终选择的是元素2

1.3并集选择器(重要)

可以选择多组标签，同时为他们定义相同的形式

元素1,
元素2 {样式声明}
上述语法表示选择元素1和元素2
例如
ul,
div{样式声明}

/*约定的语法规范，并集选择器喜欢竖着写*/
/*最后一个选择器不用加逗号*/

约定的语法规范，并集选择器喜欢竖着写
最后一个选择器不用加逗号

1.4伪类选择器

用于向某些选择器添加特殊的效果

比如给链接添加特殊效果，或选择第1个，第n个元素。

1.5链接伪类选择器

a:link   /选择所有未被访问的链接/
a:visit  /选择所有已被访问的链接/
a:honer  /选择鼠标指针位于其上的链接/
a:active /选择活动链接(鼠标按下未谈起)/

注意事项

1.为确保生效，应按照LVHA的循顺序声明：link-：visited-:hover-:active

2,a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

在实际开发中的写法：

/*a是标签选择器 所有的链接*/
a {
    color: gray;
}
a:hover {
    color: red; /*鼠标经过的时候，由原来的 灰色 变成了红色*/
}

1.6 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {
    background-color: yellow;
}

1.7复合选择器总结

选择器	作用	隔开符号及用法
后代选择器	用来选择后代元素	空格 .nav a
子代选择器	选择最近一级元素	大于 .nav>p
并集选择器	选择某些相同样式的元素	逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	a{}和a:hover实际开发的写法
:focus 选择器	选择获取光标的表单	input:focus

2.CSS的元素显示模式

2.1块元素

<h1>~<h6>
<p>
<div>  (最典型)
<ul>
<ol>
<li>

块级元素的特点：

1.独占一行

2.高度、宽度、外边距以及内边距都可以控制

3.宽度默认是容器(父级宽度)的100％

4.是一个容器及盒子，里面放行内或块级元素

注意：文字类的元素内不能使用块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是<div>
    <h1>~<h6>也不能

2.2行内元素

<a></a>  <b></b>  
<em></em>  <del></del>
<strong></strong> <i></i> 
<s></s>   <ins></ins>
<u></u>  <span>最典型</span>

行内元素的特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高、宽的设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其他行内元素

注意：链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

2.3行内块元素

<img/>
<input/>
<td></td>

行内块特点：

1.和相邻行内元素(行内块)在一行上，但是它们之间有空白空隙，一行可以显示多个(行内元素特点)

2.默认宽度就是它本身内容的宽度(行内元素特点)

3.高度、行高、外边距以及内边距都可以控制(块级元素特点)

2.4元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度高度	它本身内容的宽度

2.5元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加链接a的触发范围。

a{
    width:150px;
    height:50px;
    display:block;
    //把行内元素a -> 块级元素
}
div{
    //把块元素div -> 行内元素
    display:inline;
}
->行内块    display:inline-block;

2.6单行文字垂直居中

文字的行高=盒子的高度

a {
   text-intent: 2em;
   height: 40px;
   line-height: 40px; 
}

3.CSS的背景

3.1背景属性

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

属性	作用	值
background-color	背景颜色	默认值transparent(透明)
background-image	背景图片	none/url
background-repeat	是否平铺	repeat/no-repeat/repeat-x(横向)/repeat-y(纵向)【默认情况下平铺】
background-position	背景位置	length/position: x y
background-attatchment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单
背景色半透明		background:rgba(0,0,0,0.3)，最后一个参数是alpha透明值取0-1，后面必须是4个值

3.2背景图片位置

1.参数是方位名词

• 如果指定的两个值是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
• 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确单位

• 第一个是x坐标，第二个是y坐标
• 如果只指定一个，则为x坐标，另一个默认垂直居中

3.3背景图像固定(背景附着)

background-attachment属性设置背景图像时候固定或者随着页面的其余部分滚动。

background-attachment可以做视差滚动效果

background-attachment: scroll(背景图像是随着对象内容滚动) | 
fixed(背景图像固定)