CSS基础知识（非常详细）

沪漂豫姑娘～

已于 2023-12-18 22:30:28 修改

阅读量348

点赞数 1

文章标签： css 前端 html5

于 2023-11-10 17:34:25 首次发布

本文链接：https://blog.csdn.net/m0_64245578/article/details/134337418

版权

1.什么是CSS

Cascading Style Sheet 层叠级联样式表

1.1CSS美化

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

1.2CSS优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

1.3CSS发展史

CSS1.0
CSS2.0: DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1:浮动、定位
CSS3.0:圆角、阴影、动画…浏览器兼容性

1.4学习路线

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变…）
盒子模型
浮动
定位
网页动画（特效）

2.第一个样式页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
<!--    规范，<style>可以编写css的代码，每一个声明，最好使用分号结尾
        语法：
          选择器{
             声明1;
             声明2;
          }
          样式优先级：行内样式>内部样式>外部样式,就近原则
-->
<!--    内部样式-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style01.css">
</head>
<body>
<h1>Hello css!</h1>
<h2>Hello css!</h2>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h3 style="color: orangered">Hello css!</h3>
</body>
</html>
**css文件**
h2 {
   color: blue;
}

3.外部样式的两种写法

链接式:HTML标签
导入式:CSS2.0

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
<!--    链接式（常用）-->
<!--    <link rel="stylesheet" href="../css/style01.css">-->
    
<!--    导入式-->
    <style>
        @import url("../css/style01.css");
    </style>
</head>
<body>
<h2>我的网页</h2>
</body>
</html>

4.选择器

4.1常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--    选择器：选择页面上的某一个或某一类元素
            id选择器：id选择器必须全局唯一，不可以同名id
                #id名{样式}
            class类选择器：可以多个标签归类，使用同一个class，跨标签
                .class类名{样式}
            标签选择器：标签名
                标签名{样式}
            三者选择器的优先级（不遵循就近原则）：id 选择器>class 选择器> 标签选择器
    -->
    <style>
        /*标签选择器*/
        h1 {
            color: #3e8833;
        }

        /*id选择器*/
        #title2 {
            color: royalblue;
            font-style: oblique;
        }

        /*class选择器*/
        .title3 {
            color: rosybrown;
            font-family: Arial;
        }
    </style>

</head>
<body>
<h1>标题一</h1>
<h2 id="title2">标题二</h2>
<h3 class="title3">标题三</h3>
</body>
</html>

4.2层次选择器

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
    /*后代选择器：在某个元素后面的所有元素*/
    /*    body p{*/
    /*        background: blueviolet;*/
    /*    }*/
    /*子选择器:在某个元素的直系子元素*/
    /*body>p{*/
    /*    background: #3e8833;*/
    /*}*/
    /*相邻兄弟选择器:在某个元素向下的一个兄弟元素（只有一个），没有本身*/
    /*.active + p{*/
    /*    background: aqua;*/
    /*}*/
    /*通用选择器:在某个元素向下的所有兄弟元素（可有多个），没有本身*/
    .active~p{
        background: orange;
    }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

4.3结构伪类选择器

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
<!--    避免使用：class、id选择器
    伪类：条件-->
    <style>
/*ul的第一个子元素*/
    ul li:first-child{
        background: blue;
    }
    ul li:last-child{
        background: aqua;
    }
    /*选择p1：定位到父元素，选择当前p的第一个元素
         选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
    */
    p:nth-child(1){
        background: blueviolet;
    }
    /*选中父元素下的p元素的第二个 类型*/
    p:nth-last-of-type(2){
        background: orangered;
    }
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

4.4属性选择器(常用)

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<!--属性名，属性名=属性值（正则）
    =：绝对等于
    *=：包含这个元素
    ^=：以这个为首
    $=：以某元素为尾
    存在id属性的元素   a[]{}
    a[id]{
        background:yellow;
        }
     a[id=first]{
        background:red;
        }
        -->
<style>
    .demo a{
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: aqua;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*   1. =：绝对等于*/
    a[id=first]{
        background: blue;
    }
    /*   2. *=：包含这个元素*/
    a[class*="active"]{
        background: crimson;
    }
    /*   3.href^=:选中href中以某元素开头的元素*/
    a[href^=https]{
        background: orangered;
    }
    /* 4.href$=:以某元素结尾*/
    a[href$=png]{
        background: #3e8833;
    }
</style>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="images/1.html" class="links item active" target="_blank">2</a>
    <a href="https://douyin.com" class="links item">3</a>
    <a href="images/1.png" class="links item">4</a>
    <a href="/a.pdf" class="links item last obj">5</a>
</p>
</body>
</html>

5.美化网页元素

5.1为什么要美化网页

有效的传递网页信息
美化网页、页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验
span标签：重点要突出的字，要用span套起来

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        .title01{
            color: blue;
            font-size: 60px;
        }
    </style>
</head>
<body>
科目<span class="title01">Java</span>
</body>
</html>
5.2字体样式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
<!--    font-family:字体类型
        font-size:字体大小
        font-weight:字体粗细
        coler:字体颜色-->
    <style>
        .title01{
            font-family: "Arial Black",楷体;
            color:chartreuse;
            font-size: 50px;
            font-weight: bolder;
        }
        /*字体风格*/
        .title02{
            font: oblique bolder 20px "宋体";
        }
    </style>
</head>
<body>
<h1 class="title01">老人与海</h1>
<h2 class="title02">记叙文</h2>
<p>在第85天，老人独自驾船出海了。大海一如既往的平静、美丽，空中还不时有军舰鸟盘旋。</p>
<p>老人将挂有沙丁鱼的钓钩抛到海里，他在等侍着。就在这时，他发现原来笔直地垂在水里的一根钓丝突然倾斜了，是大鱼上钩了吗？经过漫长的等待的老人心中欣喜异常。</p>
<p>第85天了，老人终于钓到了一条鱼。他欣喜若狂，想要把这条鱼拉到水面上来，凭经验判断，这一定是一条大鱼！</p>
</p>一天一夜过去了，大鱼它好像是累了，终于露出了头。让老人吃惊的是，这鱼非常大，比老人的还长两英尺。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <!--    font-family:字体类型
            font-size:字体大小
            font-weight:字体粗细
            coler:字体颜色-->
    <!--    文本样式
            颜色：color rgb rgba
            文本对齐的方式 text-align=center
            首行缩进：text-indent:2em
            行高：line-height
            装饰：text-decoration
            文本图片水平对齐：vertical-align:middle
            排版,居中：text-align
            段落首行缩进：text-indent:2em
            行高和块的高度一致，就可以上下居中-->
    <style>

        .title01 {
            font-family: "Arial Black", 楷体;
            color: chartreuse;
            font-size: 50px;
            font-weight: bolder;
            text-align: center;
        }

        /*字体风格*/
        .title02 {
            font: oblique bolder 20px "宋体";
            color: rgba(0, 255, 255, 0.9);
            text-align:right;
        }

        .p1 {
            text-indent: 2em;
        }

        .p2 {
            background: chartreuse;
            height: 300px;
            line-height: 300px;
        }
        /*    上划线*/
        .pl01 {
            text-decoration: underline;
        }
        /*中划线*/
        .pl02{
            text-decoration: line-through;
        }
        /*下划线*/
        .pl03{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<h1 class="title01">老人与海</h1>
<h2 class="title02">记叙文</h2>
<p class="p1">在第85天，老人独自驾船出海了。大海一如既往的平静、美丽，空中还不时有军舰鸟盘旋。</p>
<p class="p2">老人将挂有沙丁鱼的钓钩抛到海里，他在等侍着。就在这时，他发现原来笔直地垂在水里的一根钓丝突然倾斜了，是大鱼上钩了吗？经过漫长的等待的老人心中欣喜异常。</p>
<p class="p3">第85天了，老人终于钓到了一条鱼。他欣喜若狂，想要把这条鱼拉到水面上来，凭经验判断，这一定是一条大鱼！</p>
<p class="p4">一天一夜过去了，大鱼它好像是累了，终于露出了头。让老人吃惊的是，这鱼非常大，比老人的还长两英尺。</p>
<hr/>
<p class="p5">
<li class="pl01">123</li>
<li class="pl02">234</li>
<li class="pl03">345</li>
</p>
</body>
</html>
5.3阴影和伪链接

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>阴影和伪链接</title>
    <style>
/*默认的颜色*/
a{
    text-decoration: none;
    color:#000000;
}
    /*鼠标悬浮的颜色*/
a:hover{
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:link{
    color:#3e8833;
}
a:visited{
  color: chartreuse;
}
a:active{
    color:green;
}
    /*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: gainsboro 10px 10px 3px;
}
    </style>
</head>
<body>
<a href="#">
    <img src="images/img.png" alt="java书籍">
</a>
<p>
    <a href="#">程序员入门参考书籍</a>
</p>
<p>
    <a href="京东书店"></a>
</p>
<p id="price">￥99</p>
</body>
</html>

6.图像

6.1背景颜色

6.2背景图像平铺方式

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>
        div{
            width:1000px;
            height:700px;
            border: 1px solid red;
            /*默认全部的div标签平铺*/
            background-image: url("../images/A梦.jpeg");
        }
        .div1{
            /*控制图片平铺的方向：横铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*控制图片平铺的方向：竖铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*控制图片不平铺*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

6.3背景图片

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <link rel="stylesheet" href="../css/2.backgroundImage02.css">
</head>
<body>
<div id="nav">
  <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个人护理</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a></li>
    </ul>
</div>
</body>
</html>

#nav {
    width: 300px;
    background: #a0a0a0;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*背景图片*/
    /*颜色 图片 图片位置 平铺设置*/
    background: red url("../images/down.jpg") 270px 10px no-repeat;
    background-size: 10px 10px;
}

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/right.jpeg");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 236px 2px;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: #000;
}

a:hover {
    color: orange;
    text-decoration: underline;
}

6.4渐变

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
<!--    径向渐变，圆形渐变-->
    <style>
        body{
            background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
        }
    </style>
</head>
<body>

</body>
</html>

7.盒子模型

7.1什么是盒子模型？

在这里插入图片描述

7.2边框

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        /*h1、div、form、body总有一个默认的外边距margin：0*/
        /*初始化*/
        h1,ul,li,a,div,body {
            margin: 0;
            border: 0;
            padding: 0;
        }

        /*border:粗细，样式，颜色*/
        #box {
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: #3e8833;
            line-height: 30px;
        }
        form{
            background:blue;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed blue;
        }
        div:nth-of-type(3) input{
            border:3px solid green;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="email">
        </div>
    </form>
</div>
</body>
</html>

7.3内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距/内边距</title>
    <!--  外边距可设置居中-->
    <style>

        /*border:粗细，样式，颜色*/
        /* margin:0 auto;  居中设置*/
        #box {
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
            font-size: 16px;
            background-color: #3e8833;
            line-height: 30px;
            /*上外边距：0*/
            /*margin-top:0;*/
            /*下外边距：0*/
            /*margin-bottom: 0;*/
            /*上下外边距：0  左右外边距：1px*/
            margin: 0 1px;
            /*上下左右外边距：0    */
            /*margin:0;*/
            /*上右下左外边距（逆时针） :0 1px 2px 3px*/
            margin:0 1px 2px 3px;
        }

        form {
            background: #3cbda6;
        }

        input {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="email">
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述

7.4圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <!--   顺时针方向 左上  右上 右下  左下-->
    <!--    圆圈：圆角=半径-->
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px;
        }

        .div2 {
            width: 80px;
            height: 80px;
            padding: 10px;
            margin: 10px;
            border: 6px solid #B721FF;
            border-radius: 0 0 50px 50px;
        }

        img {
            width: 80px;
            height: 80px;
            border:10px solid cornflowerblue;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<hr/>
<div class="div2"></div>
<hr/>
<img src="images/A梦.jpg" alt="哆啦A梦">
</body>
</html>
7.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        .div1 {
            margin: 0 auto; /*居中,前提：块元素，块元素有固定的宽度*/
            border-radius: 50px;
            box-shadow: 10px 10px 100px gold;
        }
    </style>
</head>
<body>
<div class="div1" style="width:300px;height:300px">
    <img src="images/A梦.jpg" width="300px" height="300px" alt="">
</div>
</body>
</html>

8.浮动

8.1简单介绍

标准文档流：自上而下
行内元素：不独占一行
块级元素：独占一行
行内元素可以被包含在块级元素中，反之不可以

8.2display

实现行内元素排列的方式，但是很多情况都是使用float

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>display</title>
<!--  display:
        block:块元素
        inline-block:既是行内元素，也是块元素，保持块元素但可以写在一行
        inline：行内元素
        none:消失
-->
    <style>
        .div1{
            width:100px;
            height:100px;
            border:1px solid red;

        }
        span{
            width:100px;
            height:100px;
            border:1px solid gray;
            display: inline-block;    /*将行内元素变成...元素*/
        }
    </style>

</head>
<body>
<div class="div1">div块元素</div>
<span>span行内元素</span>
</body>
</html>

8.3浮动

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            margin:10px;
            padding:5px;
        }
        #pictures{
            border:1px #000 solid;
        }
        .layer01{
            border:1px #F00 dashed;
            display: inline-block;
            float:left;
        }
        .layer02{
            border:1px #00F dashed;
            display: inline-block;
            float:left;
        }
        .layer03{
            border:1px #060 dashed;
            display:inline-block;
            float:left;
        }
        .layer04{
            border:1px #666 dashed;
            font-size: 12px;
            line-height:23px;
            display: inline-block;
            clear: left; /*清除浮动*/
        }
    </style>
</head>
<body>
<div id="pictures">
  <div class="layer01"><img src="images/A1.jpeg" width="100px" height="100px" alt=""/> </div>
  <div class="layer02"><img src="images/A2.jpeg" width="100px" height="100px" alt=""/> </div>
  <div class="layer03"><img src="images/A3.jpeg" width="100px" height="100px" alt=""/> </div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包
    </div>

</div>
</body>
</html>

8.4父级边框塌陷问题

/*clear:right;右侧不允许有浮动元素
  clear:left:左侧不允许有浮动元素
  clear:both:两侧不允许有浮动元素
  clear:none;*/

增加父级元素的高度

#pictures {
    border: 1px #000 solid;
    height: 800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear: both;
    margin:0;
    padding:0;
}

overflow
在父级元素中增加一个，overflow：hidden或scroll元素

#pictures{
    width:500px;
    height: 150px;
    overflow: scroll; /*解决溢出问题*/
}

父类添加一个伪类:after

#pictures:after{
    width:500px;
    height: 150px;
    /*overflow: scroll; !*解决溢出问题*!*/
    clear:both;
}

小结：

浮动元素后加空的div
简单、代码中尽量空div
设置父元素的高度
简单、元素假设有了固定的高度，就会被限制
overflow
简单，下拉的一些场景避免使用
(推荐使用)父类添加一个伪类 :after()
写法复杂一点，但是没有副作用，推荐使用。
8.5对比
display
方向不可以控制
float
浮动起来的话会脱离标准文档流

9.定位

9.1相对定位

相对定位：相对于自己原来的位置进行偏移

.div1{
    background-color: #3e8833;
    border:1px dashed #21D4FD;
    position:relative;  /*相对定位：上下左右*/
    top:-20px;
    left:10px;
    button:20px;
    top:10px;
}

9.2绝对定位

绝对定位：基于XXXX定位，上下左右

如果有父级标签，会相对于父级元素定位；
如果没有父级元素定位，会相对于浏览器定位；
在父级元素内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不
会被保留

9.3固定定位

无论怎么变化，标签的位置仍保持不变

position:fixed;

9.4z-index

z-index:默认是0，无限大
背景透明度：

opacity:0.5;

10.动画

沪漂豫姑娘～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（非常详细）

1.什么是CSSCascading Style Sheet 层叠级联样式表1.1CSS美化字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…1.2CSS优势内容和表现分离网页结构表现统一，可以实现复用样式十分的丰富建议使用独立于html的css文件利用SEO，容易被搜索引擎收录1.3CSS发展史CSS1.0CSS2.0: DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1:浮动、定位CSS3.0:圆角、阴影、动画…浏览器兼容性
复制链接

扫一扫