前端自学第六天——总结CSS进阶

一。符合选择器

1.后代选择器

语法：选择器1 选择器2{CSS}

后代指的是儿子，孙子都可以

div p {
           color: red;
       }

 <p>
        这是一个P标签
    </p>
    <div>
        <p class="co">
            这是一个div儿子P标签
        </p>
    </div>

那么选中孙子呢？

 div span{
            color: red;
        }

<div>
        <p>
            这是p
            <span>
                这是span
            </span>
        </p>
    </div>

这时候 这是span被选中，变红。

2.子代选择器

语法：选择器1>选择器2{CSS}

结果：选中符合条件的，只能选中儿子，后代不行。

 div>p>a {
            color: red;
        }

<div>
        父级空格跟上后代选择器
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>

 标红的是这是div 里面P 里面的a

3.并集选择器

语法：选择器1，选择器2{CSS}

可以同时选中多种标签，设置样式

        p,
        div,
        span,
        h1{
            color: blue;
        }

    <p>pppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>

 4.交集选择器:

标签.类

   p.box{
            color: blueviolet;
        }
    
    <!-- 找到第一个P带box类的标签，改成红色 -->
    <p class="box">ppppppppp</p>
    <p>这是一个P标签</p>
    <div class="box">这是div标签</div

 5.hover伪类选择器

鼠标悬停在上方，变色，离开后恢复。

语法：选择器：hover{CSS}

任何标签都可以

             a:hover{
             color: red;
             background-color: green;
                    }
            div:hover{
            color: blue;
                }
          
    <a href="#">伪类选择器，鼠标放在我身上，我会变色哦,字体变成红色，背景变成绿色</a>
    <!-- 任何标签都可以添加伪类 -->
    <div>div7989</div>

6.Emmet语法

Emmet语法

div	<div>                    </div>
.red	<div class="red">       </div>
#one	<div id="one">                    </div>
p.red#one	<p class="red" id="one">      <p>
ul>li	<ul><li>            </li></ul>
ul>li{00000}	<ul><li>00000</li></ul>
ul>li*3	<ul>          <li></li>          <li></li>          <li></li>      </ul>
div+p	<div></div>   <p></p>
ul>li{34567890}	<ul>          <li>34567890</li>          <li>34567890</li>          <li>34567890</li>      </ul>
div>p	<div>          <p></p>      </div>
ul>li{$}	<ul>          <li>1</li>          <li>2</li>          <li>3</li>      </ul>
font-size	fsz
font-weight:700;	fw700
background-coolor:#888;	bgc
宽度300高度200背景颜色粉色	w300+h200+bgc

二、背景

1.背景颜色 bgc:

2.背景图片

在style中写 

属性名：background-image（bgi） 

属性值：background-image:url(图片的路径)；

会默认重复很多份

 div{
            width: 1000px;
            height: 1000px;
            background-color: pink;
            background-image: url(./photos/1.jpg);
            
        }
  
    <div>567890-</div>

3.背景平铺

                background-repeat: no-repeat;repeat
                background-repeat: repeat-x;repeat-y

 div{
            width: 1000px;
            height: 1000px;
            background-color: pink;
            background-image: url(./photos/1.jpg);
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            /* background-size: contain; */
            /*  background-size: contain;是拉满整个元素*/
            
        }
    
    <div>567890-</div>

拉满整个元素background-size:100%;

4.背景位置

background-position：水平方向，垂直方向。

方位名词

水平left center right

垂直 top center buttom

          /* background-position: right 30px; */

            /* background-position: center ; */

            background-position: -500px -100px;

5.属性连写，无顺序

background:color image repeat psition;

  /* background: pink url(./photos/1.jpg)  no-repeat center bottom; */

font属性连写的时候按顺序。

6.img标签与背景图片的区别

way1.img标签，不设置宽高，会默认原尺寸显示。

way2.div+背景图片

需要设置div宽高，因为背景图片只是装饰CSS的，不能撑开div

img 重要图片

background 不重要的美化效果的