CSS知识总结

原创

wx63c373b99113d 2023-01-19 07:02:28 博主文章分类：自学知识笔记 ©著作权

文章标签 css3 html 选择器 css 文章分类 运维

©著作权归作者所有：来自51CTO博客作者wx63c373b99113d的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

1、什么是CSS

1.1、如何学习：
1.2、发展史
1.3、基本用法
四种不同的设置基础样式的使用：

2、选择器

2.1、基本选择器
2.2、层次选择器
2.3、(结构)伪类选择器
2.4、属性选择器

3、美化网页

3.1、为什么要美化网页
3.2、字体样式
3.3、文本样式
3.4、阴影
3.5、超链接伪类
3.6、显示商品信息的综合练习
3.7、背景图片
3.8、渐变色

4、盒子模型

4.1、什么是盒子？
4.2、边框
4.3、内外边距
4.4、圆角边框
4.5、阴影

5、浮动

5.1、标准文档流
5.2、display
5.3、float
5.4、父级边框塌陷
5.5、对比

6、定位

6.1、相对定位
6.2、绝对定位
6.3、固定定位fixed
6.4、z-index

1、什么是CSS

1.1、如何学习：

css是什么
css怎么用（快速入门）
css选择器（重点+难点）
美化网页
盒子模型
浮动
定位
网页动画

1.2、发展史

CSS1.0

CSS2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，网页边得简单

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性问题

1.3、基本用法

四种不同的设置基础样式的使用：

h3{
    color: red;
}
h4{
    color: pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个css页面</title>
    <style>
        /*第二种设置方式*/
        h2 {
            color: yellow;
        }
    </style>
    <!--第三种设置方式-->
    <link rel="stylesheet" href="./cssstyle/1css.css">

    <style>
        /*第四种设置方式*/
        @import "./cssstyle/1css.css";
    </style>
</head>
<body>
<!--第一种设置方式：行内设置-->
<h1 style="color: blue">第一种设置样式的方法</h1>
<h2>第二种设置样式的方法</h2>
<h3>第三种设置样式的方法</h3>
<h4>第四种设置样式的方法</h4>
</body>
</html>

2、选择器

作用：选择页面上的某一个或者一类元素

2.1、基本选择器

标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.标签选择器</title>
</head>

<style>
    h1{
        color: red;
    }
</style>
<body>
<h1>标签选择器</h1>
</body>
</html>

类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.类选择器</title>
</head>
<style>
    .pan{
        color: yellow;
    }
</style>
<body>

<h1 class="pan">类选择器</h1>
<h1 class="pan">类选择器</h1>
</body>
</html>

id选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.id选择器</title>
</head>
<style>
    #pan{
        color: blue;
    }
</style>
<body>
<h1 id="pan">这是一个id选择器</h1>
</body>
</html>

**出现的优先级：**id选择器 > 类选择器 > 标签选择器

2.2、层次选择器

1、后代选择器：body的后代元素都会变化

<style>
        body p {
            background: red;
        } 
    </style>

2、子选择器：body的儿子的那一代都会变化

body > p{
            background: yellow;
        }

3、相邻兄弟选择器：与被class=“active” 标记的标签属于同一个等级的情况下，又被p标签的，那么接下来的顺序上的跟着的下一行代码是p标签，那么就会被标记

.active + p{
            background: blue;
        }

4、通用选择器：与被class=“active” 标记的标签属于同一个等级的情况下，又被p标签的，那么所有的p都会被标记

.active ~ p{
            background: blue;
        }

2.3、(结构)伪类选择器

伪类：选择

<style>
        /*p4变色，ul的后面的li的第一个孩子*/
        ul li:first-child{
            background: blue;
        }
        /*p6变色，ul的后面的li的最后一个孩子*/
        ul li:last-child{
            background: yellow;
        }
        /*p标签的父类的下的第一个孩子，如果是p那就变色，如果不是就不变*/
        p:nth-child(1){
            background: red;
        }
        /*p标签的父类下的第一个p标签孩子*/
        p:nth-of-type(1){
            background: red;
        }
        a:hover{
            background: #000;
        }
</style>


<!-- 正文-->
<a href="">666</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>

2.4、属性选择器

基本格式：

a[]{

//效果

}

测试代码：

<style>
    body a {
        background: green;
        display: block;
        height: 50px;
        width: 50px;
        margin: 10px;
        /*margin-right:10px ;*/
        text-decoration: yellow;
        float: left;
        border-radius: 10px;
        text-align: center;
        font: bold 20px/50px Arial;
    }

    a[id *= "pan"] {
        background: black;
    }

    a[id = "pan zhong qiu"] {
        background: white;
    }

    a[class^="yi"] {
        background: aqua;
    }

    a[href$="pdf"] {
        background: gray;
    }
</style>

<body>
<p>
    <a href="https://www.baidu.com" id="pan zhong qiu" class="ren yi jie">1</a>
    <a href="http://" id="pan zhong " class="ren yi jie">2</a>
    <a href="../1.html" class="ren yi jie">3</a>
    <a href="../1.pdf">4</a>
    <a href="../1.jpg" class="yi jie ">5</a>
    <a href="1bc.pdf" class="ren yi jie">6</a>
</p>
</body>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O1r9ZZpG-1578713126178)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578191522474.png)]$

补充的正则式和属性选择器的结合：

=：全等于
*=：包含于
^=：以等号后的为开头的
$=：以等号后的为结尾的

3、美化网页

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

3、提高用户的体验

span标签：重点要突出的字，使用span标签标注出来（约定俗成）

3.2、字体样式

font-family：字体样式（英文和中文可以分开）
font-size：字体大小
font-weight：字体粗细
color：字体颜色

补充：

font:oblique lighter 16px “楷体” 字体风格（四个属性：斜体字体粗细字体大小字体样式）
font:bold 20px/50px Arial （字体的粗细，大小，行高，样式）

3.3、文本样式

颜色
文本的对齐方式
首行缩进
行高
装饰

基本用法如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07文本样式</title>

    <style>
        .p1 {
            /*用十六进制的方式进行颜色分配*/
            /*color: rgb(0,0,255);*/
            /*rgba，该函数的最后一个数字表示透明度（数字位于0~1）*/
            color: rgba(0, 255, 0, 1);
        }

        .p2 {
            /*文本的位置*/
            text-align: center;
        }

        .p3 {
            /*文本的首行缩进*/
            text-indent: 2em;
        }

        .p4 {
            /*当行高和高度相同的时候，文本自动居中对齐*/
            height: 160px;
            line-height: 160px;
        }

        .p5 {
            /*下划线*/
            text-decoration: underline;
        }

        .p6 {
            /*中划线*/
            text-decoration: line-through;
        }

        .p7 {
            /*上划线*/
            text-decoration: overline;
        }
        img ,apan{
            /*使用时需要有参考线*/
            vertical-align: middle;
        }
    </style>

</head>
<body>
<p class="p1">
    第一段
</p>
<p class="p2">
    第二段
</p>
<p class="p3">
    第三段
</p>
<p class="p4">
    第四段
</p>
<p class="p5">
    第五段
</p>
<p class="p6">
    第六段
</p>
<p class="p7">
    第七段
</p>

<p class="p8">
    <img src="../images/1.jpg" alt="" width="400px" height="200px">
    <span>这是一幅风景画</span>
</p>
</body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JGjO7P6d-1578712985893)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578199690029.png)]$

3.4、阴影

3.5、超链接伪类

3.4与3.5的综合应用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09超链接伪类与阴影</title>
    <style>
        body {
            /*所有的内容居中显示*/
            text-align: center;
        }

        a {
            /*去掉下划线，设置默认字体颜色*/
            text-decoration: none;
            color: black;
        }

        /*伪类使用：效果是鼠标经过的时候变色*/
        a:hover {
            color: yellow;
            font-size: 50px;
        }
        /*伪类使用：效果是鼠标点击的时候变色*/
        a:active {
            color: white;
        }

        .mu {
            text-shadow: red 5px 5px 2px;
        }
    </style>
</head>

<body>
<a href="">
    <img src="../images/1.jpg" height="400" width="700" alt="" class="pic">
</a>
<p>
    <a href="#">重庆三峡学院</a>
</p>
<p>
    <a href="#">计算机科学与工程学院</a>
</p>
<p class="mu">3600亩</p>
</body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jFg4LH8E-1578712985895)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578203256607.png)]$

3.6、显示商品信息的综合练习

1、html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<body>
<div>
    <h2 class="title1"> 全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>   <a href="#">音像  </a></li>
        <li><a href="#">加用电器</a>   <a href="#">手机  </a></li>
        <li><a href="#">电脑</a>   <a href="#">办公  </a></li>
        <li><a href="#">家居</a>   <a href="#">家装  </a></li>
        <li><a href="#">服饰鞋帽</a>   <a href="#">个护化妆  </a></li>
        <li><a href="#">礼品箱包</a>   <a href="#">钟表  </a></li>
        <li><a href="#">食品饮料</a>   <a href="#">保健食品  </a></li>
        <li><a href="#">彩票</a>   <a href="#">旅游  </a></li>
    </ul>
</div>
</body>
</html>

2、css样式

body {
    text-indent: 2em;
}

body > div {
    width: 300px;
    background: gray;
}

.title1 {
    line-height: 60px;
    height: 60px;
    background: red;
    font-weight: bolder;
}

ul {
    background: gray;
}

ul li {
    text-indent: 1em;
    /*改变序号的显示方式*/
    /*list-style: circle;*/
    list-style: none;
    height: 30px;
}

a:hover {
    background: orange;
}

a {
    text-decoration: none;
}

3、测试结果

CSS知识总结_css_04

3.7、背景图片

1、设置图片的不同的展开方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10背景</title>
    <style>
        div{
            width: 800px;
            height: 500px;
            /*设置背景图片*/
            background-image: url("../images/5.png");
        }

        .div1{
            /*设置图片的展开方式为仅一个（默认的展开情况是平铺）*/
            background-repeat: no-repeat;
        }
        .div2{
            /*设置图片的展开方式为横向*/
            background-repeat: repeat-x;
        }
        .div3{
            /*设置图片的展开方式为纵向*/
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

2、设置图片的样式：两种方法效果一样

background: red;
background-image: url("../images/7.png");
background-repeat: no-repeat;
background-position: 260px 21px;

background: gray url("../images/6.png") 217px 0px no-repeat;

3.8、渐变色

代码示例：

body{
    background-color: #21D4FD;
    background-image: linear-gradient(19deg,#21D4FD 0%, #B721FF 100%);
}

效果图：

CSS知识总结_css3_05

4、盒子模型

4.1、什么是盒子？

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2UCSJ1Yk-1578712985902)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578221639833.png)]$

margin：外边距

border：边框

padding：内边距

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色
测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>


    <style>
        #box {

            background-color: red;
            border: 1px solid black;
            margin: 0px;
            width: 300px;
        }

        #form1 {
            background-color: yellow;
        }

        div:nth-of-type(1) input {
            border: 1px solid black;
            margin: 13px;
            padding: 5px;
        }

        div:nth-of-type(2) input {
            border: 11px dashed purple;
            margin: 13px;
            padding: 5px;
        }

    </style>
</head>
<body>
<div id=box>
    <span>会员登录</span>
    <form action="#" id="form1">
        <div><span>姓名：</span><input type="text"></div>
        <div><span>密码：</span><input type="text"></div>
        <div><span>邮箱：</span><input type="text"></div>
    </form>
</div>
</body>
</html>

效果图示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8k1s2Dqp-1578712985904)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578223344391.png)]$

重点：

/*设置边框的各个属性：边框大小、边框样式、边框颜色（前者是实线，后者是虚线）*/
border: 1px solid black;
border: 11px dashed purple;

4.3、内外边距

1、ma’rgin的妙用：可以让整个盒子自动的居中对齐

margin: 1px auto;

2、margin的对齐方式

/*顺时针的旋转对齐*/
margin: 0px;
margin: 0 1px;
margin: 0 1px 2px 3px;

3、计算盒子的大小：

盒子大小=margin+border+padding+实际内容的大小

4.4、圆角边框

一个简单的圆形（利用这个特点可以用来绘制半圆、扇形）

<style>
    div{
        width:100px;
        height:100px;
        border:10px solid red;
        border-radius:100px;
    }
</style>

边框的四个参数位置分别是：左上、右上、右下、左下

4.5、阴影

向下和右偏移10px，并且模糊100px，模糊的颜色是黄色

<style>
    div{
        width:100px;
        height:100px;
        border:10px solid red;
        border-shadow:10px 10px 100px yellow;
    }
</style>

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6  p  div  列表 ...

行内元素：不独占一行

span  a img  strong ...

行内元素可以包含在块级元素之内，反之，则不行

5.2、display

1、左右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13display</title>
    <style>
        div {
            border: black solid 1px;
            width: 100px;
            height: 100px;
        }

        span {
            border: 1px solid yellow;
            width: 100px;
            height: 100px;
            /*将行级元素变成块级元素
            行级元素与块级元素的不同：行级元素是一行，不会因为设置了高度和宽度就会改变他的大小
            */
            display: block;
              /*将原本的这个块，变成既是块元素又是行内元素
            display: inline-block;*/
        }
    </style>
</head>
<body>
<div>块内元素</div>
<span>行级元素</span>
</body>
</html>

添加之前：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4wnEfw5-1578712985905)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578235974424.png)]$

添加之后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBUniVWl-1578712985907)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578236029498.png)]$

补充：

5.3、float

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13display</title>
    <style>
        .title1 {
            border: blue solid 1px;
            width: 100px;
            height: 100px;
        }

        #pic1 {
            border: black solid 1px;
            width: 300px;
            height: 250px;
            display: block;
            float: right;
        }

        .pic2 {
            width: 200px;
            height: 150px;
            display: block;
            float: right;
        }

    </style>
</head>
<body>

<div class="title1">块内元素</div>
<span>行级元素</span>
<div>
    <img src="../images/1.jpg" alt="" id="pic1">
    <img src="../images/2.jpg" alt="" class="pic2">
    <img src="../images/3.jpg" alt="" class="pic2">
</div>
</body>
</html>

执行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plUKKgF0-1578712985908)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578237129139.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTyb5EIv-1578712985911)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578237172887.png)]$

总结：目前使用浮动后的图片会随着界面的大小而进行相对应的改动，可以这样假设理解：图片是漂浮在页面之上的，他会对着你的界面，进行一个漂流浮动。

5.4、父级边框塌陷

clear

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

四大解决方案：

1、增加父级元素的高度：给父级边框设置一个高度，让浮动的图片在边框里面，这样图片就不会在外面去了

.father {
    border: 1px #000 solid;
    height: 8000px;
}

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

#over {
    margin: 0;
    padding: 0;
    clear: both;
}

3、overflow：

/*当文本的内容超过显示的范围的时候，就会出现一个滑动条来显示剩余的内容*/
.father{
    width:200px;
    height: 150px;
    overflow: scroll;
}

/*此方式：内容的覆盖会自动地被撑开*/
.father{
    border: 1px #000 solid;
    overflow: hidden;
}

4、父类添加一个伪类：用编程地方式，实现与方法一同样地效果（使用偏多）

.father{
    content: '';
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空div
简单，代码中尽量避免空地div
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制高度
overflow
简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

5.5、对比

display
方向不可控制
float
浮动起来会脱离标准文档流，所以需要解决父级边框塌陷的问题

6、定位

6.1、相对定位

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15相对定位</title>
    <style>
        #father {
            border: 1px solid black;
            font-size: 20px;
            padding: 10px;
        }

        #first {
            background-color: red;
            border: 1px solid red;
            /*相对定位，上下左右，数值表示距离上下左右的意思*/
            position: relative;
            top:-20px;
        }

        #second {
            background-color: pink;
            border: 1px solid red;
            position: relative;
            right: -20px;
        }

        #third {
            background-color: yellow;
            border: 1px solid red;
            position: relative;
            bottom: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

效果图示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7etgoyrL-1578712985913)(C:\Users\Mrpan\AppData\Roaming\Typora\typora-user-images\1578318622706.png)]$

总结：相对定位：position: relative

相对于原来的位置，进行指定的便宜，相对定位的话，它仍然在标准的文档中，原来的位置会被保留

6.2、绝对定位

定位：基于XXX定位，上下左右（absolute）用法于相对定位相同

没有父级元素定位前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移（在父级元素中定义出绝对定位的那一句话，具体的位置多少，由具体的子元素去显示）
在父级元素范围内移动

总结：相对于父级或浏览器的位置，进行指定的便宜，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

6.3、固定定位fixed

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17绝对定位与固定定位</title>
<style>
    body{
        border: 1px solid black;
        height: 1000px;
        margin: 0;
    }
    div:nth-of-type(1){
        position: absolute;
        height: 100px;
        width: 100px;
        background: yellow;
        right: 0;
    }
    div:nth-of-type(2){
        position: fixed;
        height: 50px;
        width: 50px;
        background: pink;
        right: 0;
    }
</style>
</head>
<body>
<div>第一块</div>
<div>第二块</div>

</body>
</html>