• CSS必知必会

    CSS概念

    css的使用是让网页具有统一美观的页面，css层叠样式表，简称样式表，文件后缀名.css

    css的规则由两部分构成：选择器以及一条或者多条声明

    选择器：通常是需要改变的HTML元素

    声明：由一个属性和一个值组成，每个属性有一个值，属性和值使用类似key：value的形式（如下方h1就是选择器，color就是属性，rebeccapurple就是值，属性和值成为一条声明）

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        h1{
            color: rebeccapurple;
            font-size: 10px;
        }
    style>
head>
<body>
    <h1>Welcome CSSh1>
body>
html>
    复制代码

    CSS的引入

    行内样式：在需要改变的标签内使用style属性，让style属性包含任何css的属性

    注：缺点是缺乏整体统一性，不利于维护

     <h1 style="background-color: blueviolet; font-size: 20px;">Welcome CSSh1>

    内部样式，在单个文档需要的特殊样式，如上方css概念中的例子，在文档头部使用style标签增加样式

    注：可以让单个页面css代码具有统一性，但多个页面容易混乱

    外部样式：当样式应用于多个页面，外部样式在每个需要使用的页面通过link标签链接到样式表。link标签在文档头部

    建立一个public.css文件，写外部样式

    p{
    color: aquamarine;
    font-size: 20px;
}
    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
head>
<body>
    <p>产品p>
body>
html>
    复制代码

     选择器

    全局选择器：优先级最低，一般做初始化样式

    *{
    color: blue;
}

    用通配符 *

    元素选择器：选择页面所有相同类型标签，用于描述这些类型的共性，无论这个标签藏的多深都能被选择上

    HTML文档中的p、div、img等等标签

    p{
    color: blue;
}

    类选择器：用圆点.来定义，针对相同类的标签，类名不能用数字开头，同一个标签可以使用多个类选择器，用空格隔开

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .classone{
            color: red;
            font-size: 30px;
        }
        .classtwo{
            background-color: black;
            height: 100px;
        }
    style>
head>
<body>
    <h1 class="classone classtwo">标题h1>
body>
html>
    复制代码

    ID选择器：针对特定id标签来使用，只能使用一次，用#来定义，不能用数字开头

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #mytext{
            color: red;
        }
    style>
head>
<body>
    <p id="mytext">文本p>
body>
html>
    复制代码

    合并选择器：多个标签提取共同样式，减少重复代码

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #mytext,.mytitle{
            color: red;
        }
        .mytitle{
            background-color: black;
        }
    style>
head>
<body>
    <p id="mytext">文本p>
    <h1 class="mytitle">标题h1>
body>
html>
    复制代码

    选择器优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

    字体属性

    包括颜色、大小、加粗、文字样式

    颜色

    <p style="color: red;">字体颜色p>
<p style="color: #fff000;">字体颜色p>
<p style="color: rgb(0,0,0);">字体颜色p>
<p style="color: rgba(0, 0, 0, 1);">字体颜色p>

    大小

    <p style="color: red;font-size: 30px;">字体颜色p>

    粗细

    数值范围100-900，400是默认值，700等同于bold

     

    <p style="font-weight: bold;">字体颜色p>
<p style="font-weight: bolder;">字体颜色p>
<p style="font-weight: lighter;">字体颜色p>
<p style="font-weight: 900;">字体颜色p>

    文字样式

    <p style="font-style: normal;">字体颜色p>
<p style="font-style: italic;">字体颜色p>
<p style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">字体颜色p>

    背景属性

    属性 值
    background-color
    		 背景颜色
    background-image
    		 背景图片
    background-positio
    		 图片位置
    background-repeat
    		 图片填充
    background-size
    		 图片大小
     
    background-repeat
    属性 值
    repeat 默认值
    repeat-x 水平方向平铺
    repeat-y 垂直方向平铺
    no-repeat 不平铺

    background-size ：可以使用数值设置宽度和高度，也可以使用百分比，最常用的是两个值cover（保持图片横纵比将图片覆盖背景最小大小），contain（保持图片横纵比将图片覆盖背景最大大小）

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1,.box2{
            width: 600px;
            height: 600px;
        }
        .box1{
            background-image: url(./u=1175012548\,1449685026&fm=253&fmt=auto&app=138&f=JPEG.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .box2{
            background-color:rebeccapurple;
            background-position: left top;
        }
    style>

head>
<body>
    <div class="box1">背景1div>
    <div class="box2">背景2div>
body>
html>
    复制代码

    文本属性

    文本对齐方式：居中、靠左、靠右

    <h1 style="text-align: center;">h1h1>
<h2 style="text-align: left;">h2h2>
<h3 style="text-align: right;">h3h3>

    文本添加下划线、上划线和删除线

    <h1 style="text-decoration: underline;">h1h1>
<h2 style="text-decoration: overline;">h2h2>
<h3 style="text-decoration: line-through;">h3h3>

    文本大小写

    <h1 style="text-transform: capitalize;">h1h1>
<h2 style="text-transform: uppercase;">h2h2>
<h3 style="text-transform: lowercase;">h3h3>

    首行文本缩进

    <h1 style="text-transform: capitalize; text-indent: 100px;">h1h1>

    表格边框、颜色、边框折叠

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        table,td{
            border: 1px solid red;
        }
        table{
            border-collapse: collapse; 
            padding: 20px;
        }
    style>
head>
<body>
    <table>
        <tr>
            <td>单元格td>
            <td>单元格td>
            <td>单元格td>
        tr>
        <tr>
            <td>单元格td>
            <td>单元格td>
            <td>单元格td>
        tr>
        <tr>
            <td>单元格td>
            <td>单元格td>
            <td>单元格td>
        tr>
    table>
body>
html>
    复制代码

    关系选择器

    后代选择器：所有所有被A包含的B元素，用空格分开A B{ }

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        ul li{
            color: #fff000;
        }
    style>
head>
<body>
    <ul>
        <li>Ali>
        <li>Bli>
    ul>
body>
html>
    复制代码

    子代选择器：只对所有A标签的直接子标签B起作用，A>B{ }

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div>span{
            color: #fff000;
        }
    style>
head>
<body>
    <div>
        <span>Aspan>
        <h1><span>Bspan>h1>
        <span>Cspan>
    div>
body>
html>
    复制代码

    相邻兄弟选择器：选择紧跟A标签后的B元素，选择向下相邻的第一个兄弟元素， A+B{ }

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        span+p{
            color: #fff000;
        }
    style>
head>
<body>
    <div>
        <span>Aspan>
        <p>Bp>
        <p>Cp>
    div>
body>
html>
    复制代码

    通用兄弟选择器：选择A之后的所有兄弟元素B作用多个，A~B{ }

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        span~p{
            color: #fff000;
        }
    style>
head>
<body>
    <div>
        <span>Aspan>
        <p>Bp>
        <p>Cp>
    div>
body>
html>
    复制代码

    盒子模型

    css的盒子包括外边距（margin），边框（border），内边距（padding），实际内容（content）

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px 10px;
            border: 5px solid red;
            margin: 80px;
        }
    style>
head>
<body>
    <div>
        content
    div>
body>
html>
    复制代码

    弹性盒子模型

    弹性盒子是由弹性容器和弹性子元素组成，弹性容器通过设置display属性值为flex来定义弹性容器，弹性盒子只对弹性子元素生效

    通过flex-direction来设置子元素在容器中的位置（默认水平排列）row左对齐；row-reverse翻转右对齐；column纵向排列；column-reverse翻转纵向排列

    子元素可以通过flex来分配空间

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .container{
            width: 500px;
            height: 500px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
            flex: 10%;
        }
        .box2{
            background-color: yellow;
            flex: 30%;
        }
        .box3{
            background-color: blue;
            flex: 60%;
        }
    style>
head>
<body>
    <div class="container">
        <div class="box1">div>
        <div class="box2">div>
        <div class="box3">div>
    div>
body>
html>
    复制代码

    浮动

    增加一个浮层来放置内容

    float的值 值描述
    left 向左浮动
    right 向右浮动

    浮动以后相当于在页面增加一个浮层来放置内容

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    style>
head>
<body>
    <div class="box1">div>
    <div class="box2">div>
body>
html>
    复制代码

    清除浮动

    浮动元素会造成父元素高度塌陷，如下方例子，不设置父元素的高度，浮动就无法把父元素撑起来

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
            width: 200px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
    div>
body>
html>
    复制代码

    解决方案可以设置父元素的高度，也可以通过清除浮动，通过在父标签加overflow：fidden

     

    复制代码
    .box1{
    width: 200px;
    background-color: red;
    overflow: hidden;
    clear: both;
}
    复制代码

    除了造成父元素塌陷，同样也会影响后续元素，例子如下，我们同样无法看到box3，因为被浮动的box2遮挡

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1{
            width: 200px;
            background-color: red;
            overflow: hidden;
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    style>
head>
<body>
    <div class="box1">
        <div class="box2">div>
        <div class="box3">div>
    div>
body>
html>
    复制代码

    解决方法就是，在需要处理的地方加上clear:both

    复制代码
    .box3{
    width: 100px;
    height: 100px;
    background-color: black;
    clear: both;
}
    复制代码

    定位

    position的值 值描述
    relative 相对定位
    absolute 绝对定位
    fixed 固定定位

    设置后可以通过left、top、right、bottom来调整，每用一个position就会增加一个浮层：

    固定定位是不会随着页面移动变动位置的，永远在固定位置

    相对定位和绝对定位是根据具有定位的父元素进行定位的，如果父级没有定位就会根据页面来定位

    相对定位是不脱离文档流的，绝对定位和固定定位都是脱离文档流的

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 100px;
            top: 300px;
        }
    style>
head>
<body>
    <div>div>
    <div class="box1">div>
body>
html>
    复制代码

    调整位置顺序通过z-index，如下方例子，原本是黑色遮盖红色，如果想调整为红色在上，只需要增加z-index

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    style>
head>
<body>
    <div>div>
    <div class="box1">div>
body>
html>
    复制代码

    z-index大的值在上方

    复制代码
    div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 100px;
    top: 100px;
    z-index: 2;

}
.box1{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
}
    复制代码

     新特性

    圆角特性：使用属性border-radius

    规则：

    一个值：四个圆角值相同

    两个值：第一个值表示左上和右下的值，第二个值是右上和左下

    四个值：第一个值左上，第二个值右上，第三个值右下，第四个值左下

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
    <style>
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 100px;
        }
        .box1{
            border-radius: 80%;
        }
        .box2{
            border-radius: 50px 100px;
        }
        .box3{
            border-radius: 10px 20px 30px 50px;
        }
    style>
head>
<body>
    <div class="box1">box1div>
    <div class="box2">box2div>
    <div class="box3">box3div>
body>
html>
    复制代码

    阴影

    box-shadow的值 描述
    h-shadow 水平阴影位置

    v-shadow

    		 垂直阴影位置
    blur 模糊距离
    color

    阴影颜色
    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
    <style>
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 100px;
        }
        .box1{
            box-shadow: 10px 10px 100px red;
        }
    style>
head>
<body>
    <div class="box1">div>
body>
html>
    复制代码

     动画

    使元素从一种样式逐渐变成另一种样式的效果

    用百分号或者关键词from和to来规定发生的时间

    animation的值 描述
    name 动画名称
    duration 动画持续时间
    timing-function 动画效果的速率
    delay 延迟执行
    iteration-count 循环次数，infinite为无限次数
    direction 动画播放的方向
    animation-play-state 控制动画的播放状态

    box1设置一个鼠标滑动过去动画暂停

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
    <style>
        .box1{
            width: 100px;
            height: 200px;
            background-color: green;
            animation: myAnimation 5s linear 0s infinite ;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: pink;
            animation: mySecAnim 5s linear 0s infinite ;
        }

        .box1:hover{
            animation-play-state: paused;
        }


        @keyframes myAnimation{
            from{
                background-color: red;
            }
            to{
                background-color: black;
            }
        }

        @keyframes mySecAnim{
            10%{
                background-color: rebeccapurple;
            }

            50%{
                background-color: blue;
            }

            100%{
                background-color: gray;
            }
        }
    style>
head>
<body>
    <div class="box1">div>
    <div class="box2">div>
body>
html>
    复制代码

    呼吸效果展示

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
    <style>
        .box1{
            width: 100px;
            height: 200px;
            margin: 100px;
            border-radius: 50%;
            background-color: green;
            box-shadow: 10px 10px 40px black;
            animation: breathe 5s linear 0s infinite alternate;
        }

        .box1:hover{
            animation-play-state: paused;
        }

        @keyframes breathe {
            10%{
                opacity: 0.2;
                box-shadow: 10px 10px 40px green;
            }

            50%{
                opacity: 0.5;
                box-shadow: 10px 10px 40px pink;
            }

            100%{
                opacity: 1;
                box-shadow: 10px 10px 40px gold;
            }
        }
    style>
head>
<body>
    <div class="box1">div>
body>
html>
    复制代码

     媒体查询

    根据页面大小展示不同页面

    如下根据不同页面大小显示不同颜色和不同标签

    复制代码
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./public.css">
    <style>
        .box1{
            width: 100px;
            height: 200px;
            margin: 100px;
            border-radius: 50%;
            background-color: green;
            box-shadow: 10px 10px 40px black;
        }

        @media screen and (max-width: 768px) {
            .box1{
                background-color: red;
            }
            .p1{
                display: none;
            }
            .p2{
                display: none;
            }
        }

        @media screen and (min-width: 768px) and (max-width:996px){
            .box1{
                background-color: aqua;
            }
            .p1{
                display: none;
            }
            .p2{
                display: block;
            }
            
        }

        @media screen and (min-width: 996px) {
            .box1{
                background-color: peru;
            }
            .p1{
                display: block;
            }
            .p2{
                display: block;
            }
            
            
        }
    style>
head>
<body>
    <div class="box1">div>
    <p class="p1">p标签1p>
    <p class="p2">p标签2p>
body>
html>
    复制代码
  • 相关阅读:
    Google Earth Engine 教程——NDVI差异分析以及图像采集迭代分析
    雷达仿真：FMCW DDMA-MIMO 3D点云获取方法
    修改Emlog验证码机制，有效防止恶意识别/解决恶意评论灌水
    跨域的MPLS VXN Option C
    链表OJ练习（2）
    华为云Astro的前世今生：用7年时间革新低代码开发观念
    react 使用WEB3.0控件开发包 V3.0接入海康威视摄像头
    深入理解MySQL数据库（Innodb存储引擎）
    NLP之Bert多分类实现案例(数据获取与处理)
    数据库隔离级别
  • 原文地址：https://www.cnblogs.com/yetangjian/p/17229658.html