CSS-第二天（B站黑马程序员）

一、emmet语法

1、快速生成父子级关系

<!-- 父子级关系 ul>li -->
<ul>
    <li></li>
</ul>

2、快速生成兄弟及关系

<!-- 兄弟级关系 div+p -->
<div></div>
<p></p>

3、快速生成class

省略前置标签时默认生成div

<!-- 快速生成class: .one[div]  p.one -->
<div class="one"></div>
<p class="one"></p>

4、快速生成id

省略前置标签时默认生成div

<!-- 快速生成id: #one[div]  p#one -->
<div id="one"></div>
<p id="one"></p>

5、快速生成自动排序

$：自增符号

<!-- 快速生成自动排序 $*num : .demo$*5-->
<!-- $:自增符号 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

6、设置标签中默认文字

<!-- 标签中默认的文字{} -->
<!-- div{这是复制的文字} -->
<div>这是默认文字</div>

7、快速复制多条相同语句

<!-- div{$}*5 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

8、快速生成CSS样式语法

还有很多，不一一列举。

<style>
        /* tac */
        text-align: center;

        /* ti2em */
        text-indent: 2em;

        /* w100 */
        width: 100px;

        /* h200 */
        height: 200px;

        /* lh26px */
        line-height: 26px;

        /* tdn */
        text-decoration: none;
</style>

二、复合选择器

1、后代选择器

<style>
        /* 我想要把ol的li中的文字变为pink */
        /* 后代选择器的元素用 空格 隔开 */

        /* 选择ol标签中所有li标签,包括儿子、孙子等等 */
        ol li {
            color: pink;
        }

        /* 选择ol标签中的li标签中的 所有a标签 */
        ol li a {
            color: red;
            text-decoration: none;
        }

        /* 选择所有class为nav的标签中的li标签中的 所有a标签 */
        .nav li a {
            color: yellow;
            text-decoration: none;
        }
</style>

2、子元素选择器

与后代选择器类似，但是仅选择最近一级子元素。

<style>
        /* 只选择最近一级子元素 亲儿子 */
        ul>a {
            color: red;
        }
</style>

3、并集选择器

注意书写规范，要加逗号，竖着写。

<style>
        /* 用英文逗号分隔，竖着写。任何形式都可以作为并集选择器一部分 */
        div,
        p,
        .pig li {
            color: pink;
        }
</style>

4、链接伪类选择器

实际开发中一般只写 a 与 a:hover 。书写时注意顺序，不可颠倒。

<style>
        /* a链接在浏览器中具有默认样式，因此需要单独给链接指定样式 */
        /* LVHA顺序不能乱 */

        /* 尚未访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 访问过的链接 */
        a:visited {
            color: blue;
        }

        /* 鼠标放在链接上的显示效果 */
        a:hover {
            color: red;
            text-decoration: underline;
        }

        /* 鼠标点击链接的显示效果 */
        a:active {
            color: pink;
        }
</style>

5、focus伪类选择器

选择获得光标的表单元素。

<style>
        /* 把获得 光标 的 input表单元素 选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
</style>

三、元素显示模式转换

1、三种元素对比

（1）块元素内可以放行内元素或者块元素，但特殊的p和h内不可以放块元素。

（2）行内元素内只能放行内元素和文本。

2、元素显示模式转换

<style>
        /*转换为块元素*/
        display:block;

        /*转换为行内元素*/
        display:inline;

        /*转换为行内块元素*/
        display:inline-block;
</style>

四、背景设置

1、背景颜色

<style>
        /* 设置背景颜色 */
        background-color: pink;
        
        /* 设置背景透明度 */
        /* 最后一个参数是alpha透明度，取值范围是0~1 */
        /* 0.3的0可以省略，写成 .3 */
        background: rgba(0,0,0, .3)
</style>

2、背景平铺

可选择属性：repeat平铺（默认）/ repeat-x X轴平铺 / repeat-y Y轴平铺 / no-repeat 不平铺

<style>
        background-repeat: no-repeat;
</style>

3、背景图片

（1）插入背景图片

<style>
        /* url()不可省略 */
        background-image: url(images/bg.png);
</style>

（2）图片位置设置

（a）方位名词设置

<style>
        /* 方位名词：center right left //center top bottom */
        /* 水平 垂直 名词顺序可改变，不固定 */
        /* 若只设定一个方向的参数，另一个方向参数省略，默认居中 */
        background-position: center top;
</style>

（b） 精确设置

<style>
        /* 精确单位有严格顺序，先x轴，再y轴 */
        background-position: 20px 50px;
</style>

（c）混合设置

<style>
        /* 混合单位有严格顺序，先x轴，再y轴 */
        background-position: left 50px;
</style>

（3）背景固定

<style>
        /* 背景图像可以滚动scroll（默认），也可以固定fixed */
        background-attachment: fixed;
</style>

 （4）背景复合属性

<style>
   /* 当简写背景属性时，没有特定的书写顺序，一般习惯的约定顺序为：颜色 url 平铺 是否滚动 位置 */
   body {
       background: pink url(images/bg.jpg) no-repeat fixed center top;
   }
</style>