诺小新 | Neuerliu
0%

前端入门:(三)css基础

Posted on In

1.css快速了解

css是用于美化标签，例如：

1
<img src="..." style="height:100px" />

1.1 css应用方式

1.1.1 在标签上

1
2
3
<div style="color:red;">
    中国联通
</div>

1.1.2 在head标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='c1'>欢迎使用本系统</h1> #应用head中定义的样式
</body>
</html>

1.1.3 样式写到文件中

1
2
3
4
5
6
7
.c1{
    height:100px;
}

.c2{
    color:red;
}
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link style="stylesheet" href='common.css' />
</head>
<body>
    <h1 class='c1'>欢迎使用本系统</h1> #应用文件中定义的样式
</body>
</html>

1.2 在flask中应用

我们针对登录页面进行美化

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        /*定义h1标签的样式*/
        .c1{
            color: red;
        }
        /*定义form内标签的样式*/
        .c2{
            height: 50px;
        }
    </style>
</head>
<body>
    <h1 class="c1">用户登录</h1>
    <form method='post' action="/login">
        <div class="c2">
            用户名：<input type="text" name="username" />
        </div>
        <div class="c2">
            密码：<input type="password" name="password" />
        </div>
        
        <input type="submit" value="提交">
    </form>
</body>
</html>

使用flask开发的缺点：

  • 每次修改后均需要重启
  • 规定部分文件必须放到特定文件夹下
  • 新建页面需要定义对应函数、新建相关的html文件

1.3 css的选择器

主要有以下三种：

  • 类选择器(用的最多)
1
2
3
4
5
.c1{
    color: red;
}

<div class='c1'>你好<div>
  • ID选择器
1
2
3
4
5
#c2{
    color: blue;
}

<div id='c2'>你好<div>

  • 标签选择器

    1
    2
    3
    4
    5
    6
    7
    8
    li{
        color: red;
    }

    <ul>
    	<li>北京</li>
    	<li>上海</li>
    </ul>

  • 属性选择器

1
2
3
4
5
input[type='text']{
            border: 1px solid red;
}

<input type="text">
  • 后代选择器
1
2
3
4
5
6
7
8
9
10
11
12
#在后代中寻找所有符合条件的标签
.yy li{
    color: blue;
} #类名为yy且后代中有li

<div class='yy'>
    <ul>
        <li>美国</li>
        <li>中国</li>
        <li>英国</li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#在下一代中寻找符合条件的标签
.yy > a{
    color: blue;
}

<div class='yy'>
	<a>你好</a>
    <ul>
        <li>美国</li>
        <li>中国</li>
        <li>英国</li>
    </ul>
	<div>
		<a>hello</a>
	</div>
</div>

关于多个样式同时使用的问题：

同时使用多个样式会合并样式，但当多个样式中存在交叉时，会以定义的最后一个样式信息为准，进行格式覆盖

1
2
3
4
5
6
7
8
9
10
11
.c1{
    color: red;
	border: 1px solid red;
}

.c2{
	font-size: 28px;
	color: green;
}

<div class='c1 c2'>你好<div>

如果不希望以最后一个进行格式覆盖，可以这样处理：

1
2
3
4
5
6
7
8
9
10
11
.c1{
    color: red !important;
	border: 1px solid red;
}

.c2{
	font-size: 28px;
	color: green;
}

<div class='c1 c2'>你好<div>

1.4 css样式

1.4.1 高度和宽度

直接指定高度、宽度

1
2
3
4
.c1{
	height: 300px;
	width: 500px;
}

此外，宽度还支持百分比表示(高度并不支持百分比表示，因为页面可以很长)

1
2
3
4
.c1{
	height: 300px;
	width: 50%;
}

注意：

  • 高度、宽度设置对于行内标签无效，只对块级标签有用(块级标签：h1\div\ol\ul；行内标签：span\a\img)

1.4.2 块级和行内标签

通过css样式，我们可以使得一个标签既拥有块级标签的特点，也拥有行内标签的特点，即通过使用display: inline-block;

注意：行内标签和块级标签并不是绝对的，我们可以通过修改样式，使得行内标签变为块级，反之亦然。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内和块级标签</title>
</head>
<body>
    <div style='inline'>中国</span> #变为行内标签
    <span style='block'>联通</span> #变为块级标签
</body>
</html>

1.4.3 字体和颜色

字体可以设置颜色、字体大小、加粗比例、字体格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        .c1{
            color: #00ff7f;
            font-size: 18px;
            font-weight: 700;
            font-family: JetBrains Mono;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通hello</div>
    <div>中国移动</div>
</body>
</html>

1.4.4 文字对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;
            text-align: center; /*水平方向居中*/
            line-height: 59px; /*垂直方向居中--->设置文本高度和行内标签高度一致*/
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
</body>
</html>

1.4.5 浮动

浮动示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right;">右边</span>
    </div>
</body>
</html>

一般div标签默认占据一行，当使用浮动时，可以使得div标签占据实际大小，不会占据整行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item{
            float: left;
            width: 200px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果将标签浮动，则会使得标签脱离文档流，不会显示父级标签的格式，我们需要使用一些方式拉回文档流：

1
2
3
4
5
6
7
8
<div style="background-color: dodgerblue;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div style="clear: both;"></div> #拉回文档流
</div>

1.4.6 内边距和外边距

可以通过设置padding-top等设置内边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 400px;
            width: 200px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div>听妈妈的话</div>
        <div>
            小朋友你是否有许多问号
        </div>
    </div>
</body>
</html>

还可以通过padding=20px，默认所有边距设置为20px。当我们将一系列参数传递给padding，它会以上右下左(顺时针)的顺序设置内边距。

此外，我们还可以设置外边距，只需要将上述padding替换为margin即可。

1.5 案例：小米商城

  • body标签默认存在边距，因此需要我们设置margin: 0去除
1
2
3
4
5
<style>
    body{
        margin: 0;
    }
</style>

  • 网站内容居中

    • 文本居中：文本会在区域中居中 

      1
      <div style='text-align: center;'>文本</div>

    • 区域居中：定义的区域居中，自己具有宽度

      1
      2
      3
      4
      5
      6
      7
      8
      .container{
      	width: 980px;
      	margin: 0 auto;
      }

      <div class='container'>
          你好
      </div>

  • 父标签没有高度、宽度，则会被子标签支撑起来，由子标签的高度和宽度决定大小

  • 如果加入浮动float，一定要加上<div style='clear: both'></div>

  • 关于布局：先观察布局，分析如何划分，再用css样式实现

小结：

  • a标签是行内标签，行内标签的高度、宽度、内外边距设置无效，必须通过display: inline-block才可以起作用
  • 内容垂直方向居中
    • 对于文本，可以采用line-height: <块宽度>
    • 对于图片/区域，需要采用设置边距起作用
  • a标签有链接时存在下划线，可以通过text-decoration: none去除下划线
  • 标签悬停颜色：设置hover

2.css进阶知识

css进阶：

  • 伪类
    • hover
    • after

2.1 hover知识进阶

hover可以实现对于标签/类别本身在鼠标悬停时的一些样式变化，还可以对于标签内部标签在鼠标悬停时的样式变化。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1{
            color: red;
            font-size: 18px;
        }
        .c1:hover{
            color: green;
            font-size: 50px;
        }

        .c2{
            height: 300px;
            width: 500px;
            border: 1px solid red;
        }
        .c2:hover{
            border: 3px solid green;
        }

        .download{
            display: none;
        } #默认不显示

        .app:hover .download{
            display: block;
        } #当鼠标悬停时，才显示app内部的download类的内容
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1">联通</div>
    <div class="c2">广西</div>

    <div class="app">
        <div class="title">下载APP</div>
        <div class="download">
            <img src="img/qrcode.png" />
        </div>
    </div>
</body>
</html>

2.2 after讲解

after可以实现文本后内容附加

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1:after{
            content: 'Hello';
        } /*对于特定样式实现文本追加*/

        .item{
            float: left;
        }

        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="c1">你好</div>
    <div class="c1">中国</div>

    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <!-- <div class="clear: both"></div> 这个相当于对于在area样式后附加 -->
    </div>
</body>
</html>

2.3 position定位

有些内容，我们希望固定在页面上，可以通过position实现。

position存在三个值：fixed/relative/absolute

2.3.1 fixed—>固定在窗口某个位置

案例：返回顶部按钮

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 页面取消页边距 */
        body{
            margin: 0;
        }
        /* 顶部设置 */
        .header{
            background-color: #333;
        }

        /*单独为浮动设置一个样式*/
        .left{
            float: left;
        }

        img{
            width: 100%;
            height: 100%;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        /* 顶部左边菜单栏设置 */
        .header .menu{
            float: left;
            color: white;
            height: 38px;
            line-height: 38px;
        }
        /* 顶部右边账户栏设置 */
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;
        }
        
        /* 顶部栏中a标签样式 */
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px; /*文字间隔*/
            text-decoration: none;
        }

        .header a:hover{
            color: #fff;
        }

        /* 标签浮动在窗口上 */
        .back{
            position: fixed; 
            width: 60px;
            height: 60px;
            border: 1px solid red;

            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
    <!-- 顶部栏 -->
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/index.html">小米商城</a>
                <a href="https://www.mi.com/index.html">MIUI</a>
                <a href="https://www.mi.com/index.html">云服务</a>
                <a href="https://www.mi.com/index.html">有品</a>
                <a href="https://www.mi.com/index.html">开放平台</a>
            </div>
            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

    <!-- 返回顶部按钮 -->
    <div class="back"></div>
</body>
</html>

案例：对话框

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }

        /* 对话框样式 */
        .dialog{
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            /* 实现居中 */
            left: 0;
            right: 0;
            margin: 0 auto;

            top: 100px; /*注意：只有设置positio的位置(top/left)等，它才会显示 */
            z-index: 1000;
        }

        /* 模仿一般页面中的幕布效果，设置一定的透明度 */
        .mask{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.4;
            z-index: 999; /*通过设置z-index来控制显示的层级*/
        }
    </style>
</head>
<body>
    <div style="height: 1000px; background-color: #5f5750;">321432423432</div>

    <!-- 对话框 -->
    <div class="mask"></div>
    <div class="dialog"></div>
</body>
</html>

2.3.2 relative和absolute联合使用

可以实现放置相对位置的标签

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1{
            height: 500px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }

        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: green;
            position: absolute;

            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

案例：实现小米商城悬停显示下载app

2.4 border

可以通过border设置实现，此外还可以通过设置border-left等设置一个方向的边框。还可以通过设置transparent设置透明色，当悬停时显示边框等。

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>Document</title>
    <style>
        .c1{
            width: 500px;
            height: 300px;
            margin: 100px;
            background-color: #5f5750;
            border-left: 2px solid transparent; /*设置透明色*/
        }

        .c1:hover{
            border-left: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="c1">

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

2.5 背景色

我们可以通过设置background-color来设置背景色。