CSS进阶

一.css目标选择器

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

HTML：

Lorem ipsum dolor sit amet.

item 1
Item 2
item 3

Lorem ipsum dolor sit amet.

设置背景颜色：

 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标签前两个无需跳转最后一个跳转百度

 第一页
    第二页
    百度

CSS：

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

效果图：

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

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

 第一页
    第二页
    百度

解决方法: 添加属性值

CSS：

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

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

input标签修改

HTML：

CSS：

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

效果图：

二、nth.child伪类选择器

基础HTML：


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

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：

姓名

css样式：

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

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

效果图：

把：after改为：before

效果图：

before应用场景：图片覆盖：

基础HTML：

 
        欢迎来到秋裤在线
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, culpa?
    
    
        Lorem, ipsum dolor.
        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.

基本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：


        
            Heading
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.
        
        
            Heading
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.
        
        
            Heading
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.

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：

欢迎来到秋裤在线
    欢迎来到秋裤在线
    欢迎来到秋裤在线
    欢迎来到秋裤在线

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:

 
        欢迎来到秋裤在线
    
    
        
            标题
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam
                repellat.
        
        
            标题
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam
                repellat.

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：

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：

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：

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：

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进阶

Lorem, ipsum dolor.

Heading

Heading

Heading

欢迎来到秋裤在线

欢迎来到秋裤在线

欢迎来到秋裤在线

欢迎来到秋裤在线

标题

标题

相关

标签