CSS进阶

十小结

一.css目标选择器

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

HTML：

<div>
        <p>Lorem ipsum dolor sit amet.p>
        <ul>
            <li>item 1li>
            <li>
                <p>Item 2p>
            li>
            <li>item 3li>
        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 1li>
        <li>Item 2li>
        <li>Item 3li>
        <li>Item 4li>
        <li>Item 5li>
        <li>Item 6li>
        <li>Item 7li>
        <li>Item 8li>
        <li>Item 9li>
        <li>Item 10li>
        <li>Item 11li>
        <li>Item 12li>
        <li>Item 13li>
        <li>Item 14li>
        <li>Item 15li>
        <li>Item 16li>
        <li>Item 17li>
        <li>Item 18li>
        <li>Item 19li>
        <li>Item 20li>
    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>Headingh3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.p>
        div>
        <div class="box">
            <h3>Headingh3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.p>
        div>
        <div class="box">
            <h3>Headingh3>
            <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)
        }

CSS进阶

相关

标签