CSS进阶

一.css目标选择器

（1）设置需要的div、p、ul、li

HTML：

<div>
        <p>Lorem ipsum dolor sit amet.</p>
        <ul>
            <li>item 1</li>
            <li>
                <p>Item 2</p>
            </li>
            <li>item 3</li>
        </ul>
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
    <p>Lorem ipsum dolor sit amet.</p>

设置背景颜色：

 div>p {
            background: #ddd;
        }

效果图：

 

 

为什么item 2 并没有背景颜色？

 原因：div>p

指的是所有父级元素为div的p标签，包裹item的p标签父级元素为li 所以它并没有被选择上 因此也就没有背景颜色

（2）HTML不变

增加新的CSS

div+p {
            background: #333;
            color: #FFF;
        }

效果图：

 

 

 原因：div+p

 指的是div和div后面紧跟着的p标签  表示的是div标签的下一个兄弟元素  并不是div和p标签 

直接元素的后一个兄弟元素

（3）选择属性

在HTML页面增加三个a标签  前两个无需跳转 最后一个跳转百度

 <a href="#">第一页</a>
    <a href="#">第二页</a>
    <a href="http://baidu.com" target="_blank">百度</a>

 CSS：

/* 属性选择 */
        a[target] {
            background: #ff0000;
            color: #FFF;
        }

效果图：

 

 原因：a[target] 是通过选择a标签的一个属性来给设置样式

那如果 有重复属性的a标签呢

 <a href="#">第一页</a>
    <a href="#" target="_self">第二页</a>
    <a href="http://baidu.com" target="_blank">百度</a>

解决方法: 添加属性值

CSS：

/* 属性选择 */
        a[target="_blank"] {
            background: #ff0000;
            color: #FFF;
        }

效果图：依旧只给第三个百度跳转页面添加了样式

 

 input标签修改

HTML：

 <form>
        <input type="text" placeholder="姓名">
        <input type="email" placeholder="邮箱">
        <input type="submit" placeholder="提交">
    </form>

CSS：

input[type="text"],
        input[type="email"] {
            width: 100%;
            margin-bottom: 5px;
        }

效果图：

 

 二、nth.child伪类选择器

基础HTML：

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
        <li>Item 20</li>
    </ul>

CSS：

li {
            padding: 0.25rem;
            margin: 0.25rem;
            list-style: none;
        }

效果图：

 

first-child以及last-child的使用

　　　1.first-child 只选择父元素的第一个子元素

CSS;

li:first-child {
            background: #ff0000;
        }

效果图：

 

 

　　2.last-child  只选择父元素的最后一个子元素

 CSS：

li:last-child {
            background: #ff0000;
        }

效果图：

 

 

 

3.如果要选择第三个li标签:

CSS:

 /* 选择第三个li */
        li:nth-child(3) {
            background: #ff0000;
        }

 需要用到：nth-child(需要设置样式的序号)

指定序号进行样式设置

如果：

4.nth-child（3n）的效果：

li:nth-child(3n) {
            background: orange;
        }

效果图：

 

 变色的行数都是3的倍数

5.:nth-child(3n+7)

从7开始 三行一变色

CSS：

 li:nth-child(3n+7) {
            background: yellow;
        }

效果图：

 

 

 6.奇数选择

CSS：

li:nth-child(odd) {
            background: blue;
        }

效果图：

 

 7.偶数行变色

CSS

li:nth-child(even) {
            background: pink;
        }

效果图：

 

 三、伪元素：after&before

　　当我们添加伪元素后并不会文档中生成

基础HTML：

<label for="name" class="is-required ">姓名</label>
    <input type="text">

css样式：

.is-required:after {
            content: '*';
            color: red;
            padding-left: 2px;
        }

用到的伪类    ：after （单冒号）

效果图：

 

 把：after改为：before

效果图：

 

 before应用场景：图片覆盖：

基础HTML：

 <header>
        <h1>欢迎来到秋裤在线</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, culpa?</p>
    </header>
    <section>
        <h3>Lorem, ipsum dolor.</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vel dignissimos sunt sapiente atque.
            Tempore quam harum sequi, nostrum maiores itaque quidem vero officiis ab, voluptates temporibus qui
            obcaecati. Atque.
        </p>
    </section>

基本CSS样式：

body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #333;
            color: #fff;
            margin: 0;
        }

        header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100vh;
        }

        header>h1 {
            font-size: 4rem;
            margin: 1rem;
        }

 

 ：before最主要的

            content: ;

CSS：

 header {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100vh;

        }

        header:before {
            content: '';
            background: url('./img/111.jpg') no-repeat no-repeat center center/cover;
            opacity: 0.4;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

 四、盒子阴影

基本HTML：

<div class="container">
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p>
        </div>
        <div class="box">
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p>
        </div>
    </div>

CSS：

外阴影：

水平方向 垂直方向 模糊半径 扩散半径 颜色

offset-x |offset-y | blur-radius spread-radius |color

box-shadow: 3px 3px 10px 1px rgb(0, 0, 0, 0.6);

 

效果图：

 

 内阴影： 正负数值相反

水平方向 垂直方向 颜色 内阴影

offset-x/offset-y/ color/inset 

box-shadow: 10px 10px teal inset：

效果图：

 

双重阴影：

box-shadow: 3px 3px 10px blue, -3px -3px 10px greenyellow;

 

 五、文字阴影：

基本HTML：

<h1 class="a">欢迎来到秋裤在线</h1>
    <h1 class="b">欢迎来到秋裤在线</h1>
    <h1 class="c">欢迎来到秋裤在线</h1>
    <h1 class="d">欢迎来到秋裤在线</h1>

1.水平方向 垂直方向 颜色

h-shadow |v-shadow | color;

text-shadow: 0.2rem 0.2rem steelblue;

2.水平方向 垂直方向 模糊半径 颜色

h-shadow|v-shadow | blur| color;

            text-shadow: 0.4rem 0.4rem 0.7rem olivedrab;

 

 3.白色字体：

CSS：

h1.c {
            /* white text */
            color: #fff;
            text-shadow: 0.2rem 0.2rem 1rem tomato;
        }

 4.负值

text-shadow: -0.4rem -0.3rem 0.7rem olivedrab;

 

 六、CSS变量自定义属性

HTML:

 <header>
        <h1>欢迎来到秋裤在线</h1>
    </header>
    <div class="container">
        <div class="box box-1">
            <h3>标题</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam
                repellat.</p>
        </div>
        <div class="box box-2">
            <h3>标题</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam
                repellat.</p>
        </div>
    </div>

CSS:

 :root {
            /* 定义方法实例 */
            --primary-color: #333;
            --light-color: #ccc;
            --secondary-color: #f4f4f4;
            --max-width: 768px;
            --box-1-width: 3;
            --box-2-width: 2;
        }

        * {
            padding: 0;
            margin: 0;
        }

        header {
            background-color: var(--primary-color);
            color: #fff;
            border-bottom: 5px var(--secondary-color) solid;
            text-align: center;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.4;
            background: var(--light-color);

        }

        .container {
            display: flex;
            margin: 0 auto;
            width: var(--max-width);
        }

        .box {
            background-color: var(--primary-color);
            border-bottom: 5px var(--secondary-color) solid;
            color: #fff;
            padding: 1rem;
            margin: 1rem;
        }

        .box-1 {
            flex: var(--box-1-width);
        }

        .box-2 {
            flex: var(--box-2-width);
        }

 

 最重要的是： ：root

七：css动画01

HTML：

 <div class="box"></div>

CSS：

body {
            background: #333;
        }

        .box {
            background: white;
            height: 200px;
            width: 200px;
            position: relative;
            /* animation-name: animate1; */
            /* 动画时间 */
            /* animation-duration: 2s; */
            /* 动画次数 */
            /* 循环 */
            /* animation-iteration-count: infinite; */
            /* animation-iteration-count: 1; */
            /* 在播放完或播放后的动画效果是否可见 */
            /* 在播放完停留 展示最终效果 */
            /* animation-fill-mode: forwards; */
            /* 动画的延迟时间 */
            /* animation-delay: 1s; */
            /* 奇数次正向播放 偶数次反向播放 */
            /* animation-direction: alternate; */
            /* 动画反向播放 */
            /* animation-direction: reverse; */
            /* 结合 */
            /* 奇数次反向播放 偶数次正向播放 */
            /* animation-direction: alternate-reverse; */
            /* 速度曲线 */
            /* 先慢后快 */
            /* animation-timing-function: ease; */
            /* 缓慢开始 */
            /* animation-timing-function: ease-in; */
            /* 缓慢结束 */
            /* animation-timing-function: ease-out; */
            /* 结合 缓慢开始缓慢结束 */
            /* animation-timing-function: ease-in-out; */
            animation: animate1 2s infinite forwards alternate-reverse ease-in-out;
        }

        @keyframes animate1 {
            form {
                width: 200px;
                top: 0;
            }

            to {
                width: 600px;
                background: red;
                top: 300px;
            }
        }

八:CSS动画02

HTML：

   <div class="box"></div>

CSS：

 body {
            background: #333;
        }

        .box {
            background: #fff;
            width: 200px;
            height: 200px;
            position: relative;
            top: 0;
            left: 0;
            animation: animate1 5s forwards ease-in-out;
        }

        @keyframes animate1 {
            25% {
                top: 0;
                left: 300px;
                background: red;
                border-radius: 50% 0 0 0;
            }

            50% {
                top: 300px;
                left: 300px;
                background: blue;
                border-radius: 50% 50% 0 0;
            }

            75% {
                top: 300px;
                left: 0;
                background: green;
                border-radius: 50% 50% 50% 0;
            }

            100% {
                top: 0;
                left: 0;
                background: white;
                border-radius: 50%;

            }
        }

九：过渡

HTML：

<div class="box"></div>

CSS：

 body {
            background: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .box {
            background: white;
            width: 100px;
            height: 100px;
            /* transition-property: background; */
            /* 过渡周期 */
            /* transition-duration: 1.5s; */
            /* 过渡延迟 */
            /* transition-delay: 1s; */
            /* 时间曲线 */
            /* transition-timing-function: ease-in-out; */
            /* all代替所有属性 */
            transition: all 2s ease-in-out;
        }

        .box:hover {
            background: red;
            border-radius: 50%;
            height: 300px;
            width: 300px;
        }

十：旋转平移

HTML：

    <div class="box"></div>

body {
            background: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .box {
            background: white;
            width: 300px;
            height: 300px;
            /* 旋转 25° */
            /* transform: rotate(25deg); */

            /* 扭曲 */
            /* transform: skew(25deg); */

            /* 放大两倍 */
            /* transform: scale(2); */

            transition: all 1s ease-in-out;


        }

        .box:hover {
            transform: rotate(25deg);
            transform: skew(25deg);
            transform: scale(2);
            /* 平移 */
            /* 正数向下 负数向上 */
            transform: translateY(100px);
            /* 正数向右 负数向左 */
            transform: translateX(100px);
            /* 斜着平移 */
            /* 正数右下 负数左上 */
            transform: translate(100px, 100px);
            /* 3D */
            transform: translate3d(100px, 100px, 100px)
        }