CSS和布局

CSS和布局

CSS

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="zh-cn">
    <!-- css样式 -->
    <!-- 引入方式
        1.内部样式：在style中定义选择器
        2.外部样式：在style中使用@import "css/a.css" -->
    <head>
        <meta charset="utf-8"/>
        <!-- 选择器的分类：
            1.基础选择器：id选择器，元素选择器，类选择器
            2.扩展选择器：选择所有元素，并集选择器，子选择器，父选择器，属性选择器，伪类选择器 -->
        <style>
            /* id选择器和类选择器优先级大于元素选择器 */
            /* id选择器 */
            #p_hello{
                color:blue;
                background-color: green;
                width: 40px;
                height: 20px;
            }
            /* 元素选择器 */
            div {
                color:blue;
                background-color: pink;
                width: 120px;
                height: 20px;
            }
            /* 类选择器 */
            .span_hello{
                color:yellow;
                background-color: blueviolet;
                font-size:30px;
            }
        </style>
    </head>
    <body>
        <p id="p_hello">hello</p>
        <div>hello,world</div>
        <div>hello,world</div>
        <!-- span会自适应字体的长度和大小 -->
        <span class="span_hello">hello</span>
    </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
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
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
         <!-- 选择器的分类：
            1.基础选择器：id选择器，元素选择器，类选择器
            2.扩展选择器：选择所有元素，并集选择器，子选择器，父选择器，属性选择器，伪类选择器 -->
        <style>
            /* 选择所有元素 */
            /* *{
                color:blue;
            } */

            /* 元素选择器大于所有元素选择器 */
            /* span{
                color:green;
            } */

            /* 并集选择器，选择多个选择器 */
            /* p,span,div,.h_gen,#h_sta{
                color:blue;
            } */

            /* 子类选择器 */
            /* h1 span span{
                color:rgb(92, 168, 244);
            }
            h1 span{
                color:green;
            } */

            /* 父选择器 */
            /* span:has(h1){
                color:aqua;
                background-color: black;
            } */

            /* 属性选择器 */
            /* span[color="black"]{
                background-color: aqua;
            }

            span[color="black"],h1[color="black"]{
                background-color: aqua;
            } */

            /* 伪类选择器 */
            a:link{
                color:aqua;
            }
            a:visited{
                color:black;
            }
        </style>
    </head>
    <body>
        <!-- <h2 id="h_sta">start</h2>
        <h1 class="h_gen">Genshin</h1>
        <span>hahaha</span>
        <div>hehehe</div>
        <p>hhhhh</p> -->

        <!-- <h1><span><span>hello,world</span></span></h1>
        <h1><span>hello,world</span></h1> -->

        <!-- 父类选择器会将父类内的所有元素设置同一样式 -->
        <!-- <span>
            <h2>hello,world</h2>
            <h1>hello,world</h1>
        </span> -->

        <!-- 属性选择器 -->
        <!-- <span color="black">hhhhhhhh</span>
        <h1 color="black">eeeeeeeee</h1> -->
        <!-- 伪类选择器 -->
        <a href="#" target="_new">chick</a>
    </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
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <style>
            #sp_1{
                color:aqua;
                background-color: black;
                /* float:right; */
                /* padding-bottom:40px; */
            }
            #div_1{
                color:aqua;
                background-color: brown;
                /* box-sizing设置padding是否影响标签大小 */
                /* content-box影响,border-box不影响 */
                box-sizing:border-box;
                margin: 40px;
                width: 200px;
                height: 400px;
                /* padding: auto; */
                /* padding会额外影响外部标签的大小 */
                padding-left: 100px;
                padding-top:50px;
                /* float影响盒子靠左还是靠右 */
                float:right;
                align-content: center;
            }
            
        </style>
    </head>
    <body>
        <div id="div_1">
            <span id="sp_1">hello,wrold</span>
            <br>
            <span id="sp_1">hello,world</span>
        </div>
        <span id="sp_1"></span>

    </body>
</html>
前端
#前端
CSS和布局
http://example.com/2024/01/17/CSS/
作者
smg
发布于
2024年1月17日
许可协议