CSS详解

字数统计: 4.6k字   |   阅读时长≈ 21分钟

CSS详解

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

[网页学习教程][https://www.w3school.com.cn/css3/index.asp]

1. CSS概念简介

  • Cascading Style Sheet 层叠样式表（表现层：美化网页）

1.1 CSS发展史

CSS 1.0

CSS 2.0 :DIV(块) + CSS, HTML和CSS分离

CSS 2.1：浮动和定位

CSS 3.0：阴影，圆角边框，动画（浏览器兼容性）

1.2 快速入门

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--规范：每一个声明最好使用分号结尾-->
<!--语法：
    选择器{
    声明1；
    声明2；
    声明3；
    }-->

    <style>
        h1{
            color: red;
        }
    </style>

使用link标签实现内容和表现分离

CSS的优势

  1. 实现样式的复用
  2. 样式十分的丰富
  3. 内容和表现的分离、
  4. 建议使用独立于html的css文件
  5. 利于SEO,容易被搜索引擎收录！

1.3 CSS的导入方式

优先级：就近原则

  1. 行内样式
1
2
3
4
5
6
7
8
9
10
11
12
13
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--行内样式-->
<h1 style="color: red">我是标题</h1>

</body>
</html>
  1. 内部样式
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--规范：每一个声明最好使用分号结尾-->
<!--语法：
    选择器{
    声明1；
    声明2；
    声明3；
    }-->

    <style>
        h1{
            color: red;
        }
    </style>
  1. 外部样式
1
2
//html
<link rel="stylesheet" href="css/style.css">
1
2
3
4
/*css*/
h1{
    color: red;
}

2. 选择器

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

2.1 基本选择器

  1. 标签选择器（选择一类标签 标签{}）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            /*标签选择器会选用这个页面上所有这个标签的元素*/
            color: aqua;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学CSS</h1>
<h1>CSS很简单</h1>
<p>zhuuu</p>

</body>
</html>
  1. 类选择器(选择class属性一致的标签 .类名{})

作用：class可以归类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器格式 .class的名称{},可以复用*/
        .zhuuu{
            color: antiquewhite;
        }
        .朱酱酱{
            color: aquamarine;
        }
    </style>

</head>
<body>


<h1 class="zhuuu">标题1</h1>
<h1 class="朱酱酱">标题2</h1>
<h1 class="zhuuu">标题3</h1>


<p class="朱酱酱">P标签</p>

</body>
</html>
  1. id选择器(全局唯一，不能重复 #id名{})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器
        #id名称{}*/
        #zhuuu{
            color: #000;
        }
        .朱酱酱{
            color: antiquewhite;
        }
    </style>


</head>
<body>

<!--这里不遵循就近原则：id选择器>类选择器>标签选择器-->
<h1 id="zhuuu">表题1</h1>
<h1 class="朱酱酱">表题2</h1>
<h1 class="朱酱酱">表题3</h1>
<h1 >表题4</h1>
<h1 >表题5</h1>
<h1 >表题6</h1>


</body>
</html>

2.2 层次选择器

  1. 后代选择器：在某个元素的后面全部的标签
1
2
3
4
5
6
7
8
9
10
11
12
<style>
    /*p{*/
    /*    color: aquamarine;*/
    /*}*/

/*后代选择器*/
    body p{
        background: aqua;
    }


</style>
  1. 子选择器:在某个元素后面的一代标签
1
2
3
4
/*子选择器*/
    body > p{
        background: bisque;
    }
  1. 相邻兄弟选择器：同辈下面的一个
1
2
3
4
/*相邻兄弟选择器:只有一个会改变，对下延伸*/
    .active + p{
        background: brown;
    }
  1. 通用(兄弟)选择器：同辈下面的所有
1
2
3
4
/*通用兄弟选择器:当前选中元素向下的所有兄弟元素*/
    .active ~ p{
        background: chartreuse;
    }

2.3 结构伪类选择器

伪类：（带:的）

结构伪类：(带结构的:)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--本次避免使用class,id选择器-->
    <style>
        /*ul第一个子元素*/
        ul li:first-child{
            background: chartreuse;
        }
        /*ul最后一个子元素*/
        ul li:last-child{
            background: aqua;
        }

        /*选择第一个p元素:定位到父元素，选择当前顺序的第一个元素*/
        p:nth-child(1){
            background: bisque;
        }
        /*定位到父元素，选择这个类型的第一个*/
        p:nth-of-type(1){
            background: red;
        }
    </style>

2.4 属性选择器（常用）

可以使用正则表达式

1
2
3
4
5
6
/*存在id属性的元素要选中
属性名=属性值（可以用正则表达式）
= 是绝对等于
*= 是包含就行
^= 是什么什么开头
$= 是以什么什么结尾*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .demo a{
        float:left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: aquamarine;
        text-align: center;
        color: grey;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }


    /*存在id属性的元素要选中
    属性名=属性值（可以用正则表达式）
    = 是绝对等于
    *= 是包含就行
    ^= 是什么什么开头
    $= 是以什么什么结尾*/
    a[id=first]{
        background: yellow;
    }

    a[class*="links"]{
        background: brown;
    }
    

</style>

<body>

    <p class="demo">
        <a href="" id="first">1</a>
        <a href="" class="links zhuuu">2</a>
        <a href="" class="hyperlink">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href=""class="links zhuuu">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
    </p>


</body>
</html>

效果如下：

3. 美化网页元素

[源码之家模板][https://www.mycodes.net/]

3.1 span标签

作用：突出显示title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</head>

<style>
    #title1{
        color: aqua;
    }
</style>

<body>


欢迎来到我的博客 <span id="title1">博客</span>


</body>

3.2 字体样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        font-family:字体
        font-size:字体大小
        font-weight:字体的粗细
        color:字体颜色
        */
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
            color: aquamarine;
        }
        .p1{
            font-weight: bold;
        }
    </style>


</head>
<body>

<h1>Java （计算机编程语言）</h1>Java （计算机编程语言）
<p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，
    还摒弃了C++里难以理解的多继承、指针等概念，
    因此Java语言具有功能强大和简单易用两个特征。
    Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，
    允许程序员以优雅的思维方式进行复杂的编程 [1]  。</p>
<p class="p1">Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2]  。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3]  。
</p>

</body>
</html>

3.3 文本样式

  1. 颜色
  2. 文本对齐的方式
  3. 首行缩进
  4. 行高
  5. 装饰
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
    颜色：
    RGB:0~F
    RGBA:透明度：0-1

    text-align: center  //文本排版居中
    text-indent: 2em;   //段落首行缩进

    height: 200px;
    line-height: 200px;  //高度和行高一致的话就可以上下居中
    text-decoration:underline.line-through.overline 下划线/中划线/上划线

    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }

        .p1{
            text-indent: 2em;
        }
        .p3{
            background: brown;
            height: 200px;
            line-height: 200px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
    </style>

</head>
<body>


<p class="l1">12312</p>
<p class="l2">12312</p>
<p class="l3">12321</p>


<h1>Java （计算机编程语言）</h1>Java （计算机编程语言）
<p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，
    还摒弃了C++里难以理解的多继承、指针等概念，
    因此Java语言具有功能强大和简单易用两个特征。</p>
<p class="p3">Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，
    允许程序员以优雅的思维方式进行复杂的编程</p>
<p class="p1">Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2]  。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3]  。
</p>

</body>
</html>

3.4 超链接伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: aqua;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="images/证件照.jpg" alt="" width="150" height="300">
</a>

<p>
    <a href="#">人物：朱酱酱</a>
</p>

<p>
    <a href="#">人物：Zhuuu</a>
</p>
</body>

3.5 背景

背景图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>   
<style>
        div{
            width: 1000px;
            height: 800px;
            border: 1px solid aqua;
            background-image: url("");
        /*默认是全部平铺的*/
        }
        .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>

3.6 渐变

[渐变效果网址][https://www.grabient.com/]

1
2
3
4
5
6
<style>
    body{
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
    }
</style>

浏览器效果如下：

4. 盒子模型

margin: 外边距

padding: 内边距

border：边框

4.1 边框

border

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    <style>
		/*初始化操作*/
        body,h1,li,a,ul{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box{
            width: 300px;
            border: 1px solid red;  /*记住*/
        }

        h2{
            font-size: 16px;
            background-color: goldenrod;
            margin: 0;
        }

        form{
            background: aqua;
        }
        div:nth-of-type(1) input{
            border: 3px solid azure;
        }
        div:nth-of-type(2) input{
            border: 3px dashed salmon;
        }
        div:nth-of-type(3) input{
            border: 3px dashed darkmagenta;
        }

    </style>


</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

4.2 外边距

margin:用于居中元素

margin: 0 auto;

margin -top

margin -buttom

margin : 0 1px 2px 3px （上右下左 顺时针方向）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
    body,h1,li,a,ul{
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    #box{
        width: 300px;
        border: 1px solid red;
        margin: 0 auto;
    }

    h2{
        font-size: 16px;
        background-color: goldenrod;
        margin: 0;
    }

    form{
        background: aqua;
    }
    input {
        border: 1px solid black;
    }

</style>


<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>

4.3 内边距

padding

padding -top

padding -buttom

padding : 0 1px 2px 3px （上右下左 顺时针方向）

4.4 计算方式

盒子模型计算方式：margin + border+ padding + 内容宽度

4.5 圆角边框

  1. 用圆角边框画图简单
1
2
3
4
5
6
7
8
9
10
11
border-radius

<!--顺时针方向-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px;
        }
    </style>

[CSS常见数学图形][https://www.cnblogs.com/ming1025/p/7363074.html]

4.6 盒子阴影

border-shadow

5. 浮动

5.1 标准文档流

块级元素： 独占一行

行内元素：不独占一行

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

  • 所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

当前所知的脱离文档流的方式有两种：浮动和定位。

5.2 display

这个也是实现行内元素的一个方式

可以转换行内元素和块元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--block:块元素
    inline:行内元素
    inline-block:是块元素，但是可以有行内的性质：在一行
    none:消失-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;

        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>


</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>

5.3 float

  • float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
1
2
左右浮动
float:right/left

[关于浮动的博客讲解][https://blog.csdn.net/u010297791/article/details/76718589]

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

5.4 父级塌陷的问题

clear:

1
2
3
4
5
clear:
        none : 默认值。允许两边都可以有浮动对象
        left : 不允许左边有浮动对象
        right : 不允许右边有浮动对象
        both : 不允许有浮动对象

解决方案:

  1. 增加父级元素的高度~
  2. 增加 一个空的div标签，清除浮动
1
2
3
4
5
6
7
<div class='clear'></div>

.clear{
    clear:both;
    margin: 0;
    padding: 0;
}
  1. overflow(文字图片的属性如果超过规定范围的情况)

在父级元素中增加一个 overflow:hidden

  1. 在父类添加一个伪类：after
1
2
3
4
5
#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

  • 浮动元素后面增加一个空的div(简单，代码中尽量避免空div)
  • 设置父元素的高度（假设元素有了固定的高度，就会被限制）
  • overflow(简单，避免使用)
  • 在父类添加伪类：after(推荐)

5.5 display 对比 float

  • display:方向不能控制
  • float:虽然会脱离标准文档流，所以要解决父级边框塌陷的例子

6. 定位

环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border:  1px solid #666666;
        }
        #first{
            background-color: #6284FF;
            border: 1px dashed green ;
        }
        #second{
            background-color: goldenrod;
            border:  1px solid orange;
        }
        #third{
            background-color: salmon;
            border:  1px solid firebrick;
        }
    </style>


</head>
<body>


<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>


</body>
</html>

6.1 相对定位

1
2
3
<!--相对定位：相对于自己的位置进行偏移-->
<!--position: relative; -->
它仍然在标准文档流中，原来的位置会被保留
1
2
3
4
5
6
7
#first{
    background-color: #6284FF;
    border: 1px dashed green ;
    position: relative;
    top: -20px;  /*相对于原来的位置产生偏移*/
    left: 20px;
}

练习题：

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        #father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding: 30px;
        }
        a{
            background-color: pink;
            height: 100px;
            width: 100px;
            color: #FFFFFF;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            display: block;
        }
        a:hover{
            color: blue;
        }
        #a2,#a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        #a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>


</head>
<body>

<div id="father">
    <a href="" id="a1">链接1</a>
    <a href="" id="a2">链接2</a>
    <a href="" id="a3">链接3</a>
    <a href="" id="a4">链接4</a>
    <a href="" id="a5">链接5</a>
</div>


</body>

6.2 绝对定位

定位：基于XXX定位，上下左右

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动

对象与父级或者浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流汇总，原来的位置不会被保留。

6.3 固定定位

固定定位的作用：把元素定死在浏览器的某个位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>


</head>
<body>

<div>div1</div>
<div>div2</div>

</body>

6.4 z-index

默认是0，最高是无限制（推荐999）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">


</head>
<body>

<div id="content">
    <ul>
        <li><img src="" alt=""></li>
        <li class="tipText">学习</li>
        <li class="tipBg"></li>
        <li>时间2099-01-01</li>
        <li>地点：月球一号</li>
    </ul>
</div>

透明度：opacity:0~1.0

7. 动画

打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2019-2022 Zhuuu
  • PV: UV:

请我喝杯咖啡吧~

支付宝
微信