Zephon Blog
0%

第二天CSS

发表于 更新于 分类于
本文字数： 13k 阅读时长 ≈ 12 分钟

第二天

CSS(层叠样式表)

内容与样式相分离

选择器

选择器selctor 标签选择器：针对所有标签，css中直接用标签名 类选择器：针对某一些标签，css中以.开头 ID选择器：针对某个标签，css中以#开头 伪类：针对标签的某个状态，css中用标签:状态如(a:hover{}) 后代选择器：针对标签中的子元素，css中用父 子{} 表示如(box p{}) 群组选择器：并列选择元素，css用a,b{}表示如(h2,ul,li{})

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>
    <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <style>
            /* 选择器selctor */
           h2{
               font-size: 100px;
               color: #f00;
           } 
           span{
               font-size: 50px;
               color: blue;
           }
        </style>
    </head>
    <body>
        <h2>网页：内容与样式相分离</h2>
        <span>abc</span>
        <h2>层叠样式表</h2>
    </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>property+selctor</title>
        <style>
            li{ /* 标签选择器 */
                width: 150px;
                height: 33px;
                list-style: none;/* 前面点去除点 */
                border: 1px solid #039;/* 边框(线的宽度、实线、颜色)*/
                line-height: 33px;/* 单行垂直居中 */
                text-align: center; /* 水平居中 */
                font-size: 14px;
                margin: 8px;
            }
            .red{ /* 类选择器 */
                color: red;
                font-weight: bold;
            }
            .dash{
                border: 1px dashed #039;/* dotted点划线，dashed破折线 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="dash">标签选择器</li>
            <li class="red">类选择器</li>
            <li class="red dash">ID先择器</li>
            <li>伪类</li>
            <li>后代选择器</li>
            <li>群组选择器</li>
        </ul>
    </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器</title>
        <style>
            ul,h2,p{/* 群组选择器,做CSS先去默认有padding和margin的padding、margin */
                padding: 0;
                margin: 0;
            }
            #box{/* ID选择器，唯一，id不能重复 */
                width: 300px;/* 高度不给，由内容决定，宽度不给，由父元素决定 */
                padding: 9px;
                border: 1px solid #ccc;
            }
            #box h2{/* 后代选择器(父子选择器，定义具体的标签选择器的时候大多采用这种样式 */
                line-height: 30px;/* 行高 */
                text-align: center;
                font-size: 16px;
            }
            #box p{
                font-size: 12px;
                line-height: 180%;/* font-size*1.8 */
                color: #999;
                text-indent: 2em;/* 首行缩进，em表示字体大小,此处为2个字符 */
            }
            #box a{
                text-decoration: none;/* 去下划线 */
                color: #c00; /* 去颜色 */
            }
        </style>
    </head>
    <body>
        <div id="box">
            <h2>CSS选择器</h2>
            <p>
                后代选择器 、群组选择器、交集选择器、并集选择器是CSS选择器的特殊用法
                <a href="#">[更多]</a>
            </p>
        </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类</title>
        <style>
            a{
                width: 140px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background-color: #c00;
                color: #fff;
                text-decoration: none;
                display: block; /* a的默认的display为inline，不能设置宽高等属性，要改为block才可以设置 */
                float:left; /* float的元素会自动变为display:block */

            }
            a:link{/* 伪类，link、visited、hover、active顺序尽量不要改变 */
            }
            a:visited{/* 访问过的 */
                color:#fff;
            }
            a:hover{/* 鼠标悬浮 */
                font-weight: bold;
                background-color: #00f;
            }
            a:active{/* 鼠标左键按下时效果 */
                text-decoration: line-through;
                background-color: #0ff
            }
        </style>
    </head>
    <body>
        <a href="#">伪类</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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>层叠与继承</title>
        <link rel="stylesheet" href="test3.css">
        <!-- 同优先级的，后定义的css覆盖前定义的，没覆盖的可以继承 -->
        <!-- 优先级 复杂后代>后代>id>类>标签-->
        <style>
            body #box h2{
                color: pink;
            }
            #box h2{
                color: gray;
            }
            #h2{
                color:orange;
            }
            .h2{
                color:green;
            }
            h2{
                color: red
            }
        </style>
        <!-- <link rel="stylesheet" href="test3.css"> -->
    </head>
    <body>
        <div id="box">
            <h2 class = "h2" id = "h2">
                我是什么颜色？
            </h2>
        </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>框模型box model</title>
        <style>
            #a{/* 盒子实际高度为 300+60+40+1+1+30+30=462px */
                width: 300px;
                height: 300px;
                border: 1px solid #c00;
                padding: 60px 50px 40px 30px;/* 上 右 下 左 (顺时针) */
                margin: 30px auto;/* 两个值 上下 左右 ,左右margin为auto盒子居中 */
            }
            /* margin的叠加： a、b间的距离为40px，是两个之中的最大值 */
            #b{
                width: 300px; /* width是盒子内容的宽度，不是盒子的宽度 */
                height: 300px;
                border: 1px solid #c00;
                padding: 10px 20px 30px; /* 三个值 上 左右 下 */
                margin: 40px auto;
            }
        </style>
    </head>
    <body>
        <div id="a">框模型</div>
        <div id="b">距离</div>
    </body>
</html>

清除浮动的方式

  1. 给父元素设置高度
  2. 给父元素设置 overflow:auto/hidden
  3. 给浮动后面出现的元素增加clear:both属性(其margin-top可能不起作用)
  4. 建立clearfix类，给浮动的父元素使用
  5. 增加一个新的空的元素，为其增加clear:both(不推荐使用)
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>
    <head>
        <meta charset="utf-8">
        <title>float</title>
        <style>
            .parent{
                /* height: 230px; */
                /* overflow: hidden;溢出隐藏 */
            }
            .f{
                width:200px;
                height: 200px;
                border: 1px solid #c00;
                font-size: 50px;
                float: left;
            }
            /* h2{
                clear:both;
            } */
            .clearfix:after{
                content:"";
                clear: both;
                font-size: 0;
                height: 0;
                visibility:hidden;
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="parent clearfix">
            <div class="f">1</div>
            <div class="f">2</div>
            <div class="f">3</div>
            <div class="f">4</div>
        </div>
        <!-- 浮动破坏了正常的文档流 -->
        <h2>浮动之后</h2>
        <!-- 如何清除浮动？ -->
        <!-- 1.给父元素设置高度-->
        <!-- 2.给父元素设置 overflow:auto/hidden-->
        <!-- 3.给浮动后面出现的元素增加clear:both属性(其margin-top可能不起作用)-->
        <!-- 4.建立clearfix类，给浮动的父元素使用 -->
        <!-- 5.增加一个新的空的元素，为其增加clear:both(不推荐使用)-->
    </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>布局(layout)</title>
        <style>
            #wrap{/* 容器 */
                width: 1200px;
                margin: 0 auto;
            }
            #header{
                height: 60px;
                background-color: #00f;
            }
            #nav{
                height: 40px;
                background-color: #0f0;
            }
            #main{
                width: 800px;
                height: 400px;
                float: left;
                background-color: #f00;
            }
            #aside{
                width: 400px;
                height:400px;
                float: left; 
                background-color: #ff0;
            }
            #footer{
                clear: both;
                background-color:#f0f;
                height:80px;
            }
        </style>
    </head>
    <!-- 电脑网站宽度一般：960-1440之间，1200 -->
    <!-- 做布局的方法：做宽高、做浮动、做清除 -->
    <body>
        <div id="wrap">
            <div id="header">
            </div>
            <div id="nav">
            </div>
            <div id="main">
            </div>
            <div id="aside">
            </div>
            <div id="footer">
            </div>
        </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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>absolute绝对定位</title>
        <style>
            #header{
                height: 100px;
                background-color: #ccc;
                position: relative;/* 相对定位，重新定义子元素的绝对定位的元素的坐标起点 */
            }
            /* 绝对定位和浮动的元素不给宽高，宽高为内容的宽高 */
            #logo{
                position: absolute;
                left:50px;/* 距离的是header左边50px */
                top:10px;
            }
            #login{
                position: absolute;
                right:20px;
                top:10px;
            }
        </style>
    </head>
    <body>
        <!-- 绝对定位，可用于下拉列表、轮播等-->
        <div id="header">
            <div id="logo">logo</div>
            <div id="login">login</div>
        </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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109

### 常用模板

#### 上图下文

``` html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上图下文</title>
    <style>
        ul,
        p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            display: block;
            /* 重要，去除浏览器兼容性问题 */
        }

        .sxlist {
            width: 1200px;
        }

        .sxlist li {
            width: 200px;
            float: left;
            margin: 6px;
        }

        .sxlist img {
            width: 200px;
            height: 100px;
        }

        .sxlist p {
            line-height: 26px;
            font-size: 14px;
            text-align: center;
            color: #999;
        }
    </style>
</head>

<body>
    <ul class="sxlist">
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
    </ul>
</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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于绝对定位的上图下文</title>
    <style>
        ul, p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            display: block;/* 重要，去除浏览器兼容性问题 */
        }

        .sxlist {
            width: 1200px;
        }

        .sxlist li {
            position: relative;
            width: 200px;
            float: left;
            margin: 6px;
        }

        .sxlist img {
            width: 200px;
            height: 100px;
        }

        .sxlist p {
            position: absolute;
            left:0;
            bottom:0;
            width: 100%;
            background-color: rgba(0,0,0,0.5);

            /* 不用绝对定位 */
            /* 有position属性(relative absolute fixed)的元素，才可以设置z-index */
            /* margin-top: -26px; */
            /* position: relative; */
            /* z-index:2; */

            line-height: 26px;
            height: 26px;
            font-size: 14px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="sxlist">
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../Day1/2.png"><!-- 不用加反斜杠 -->
                <p>这里是文字</p>
            </a>
        </li>
    </ul>
</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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左图右文</title>
        <style>
            ul,h3,p{padding: 0;margin: 0;}
            ul{list-style: none}
            a{text-decoration: none}
            img{border: none;display: block}
            .zylist{
                width: 800px;
            }
            .zylist li{
                overflow: hidden;
                border-bottom: 1px solid #ccc;
                margin-bottom: 5px;
                padding: 4px;
            }
            .zylist img{
                width: 150px;
                height: 100px;
                float: left;
                margin-top: 10px;
                margin-right: 10px;
            }
            .yw{
                float: left;
                height: 110px;
                width: 250px;
            }
            .yw h3{
                font-size: 16px;
                color: #c00;
                line-height: 28px;
            }
            .yw p{
                line-break: 20px;
                font-size: 14px;
                color: #ccc;
                text-indent: 2em;
            }
            .yw a{
                color: #c00;
            }
        </style>
    </head>
    <body>
        <ul class="zylist">
            <li>
                <a href="#">
                    <img src="../Day1/2.png">
                </a>
                <div class="yw">
                    <h3>这里是标题</h3>
                    <p>这里是好呢多的文字，右边的文字的高度与左边的图片的高度大致相同。花木成畦手自栽 塔顶地花木成畦手自栽 
                        <a href="#">更多>></a>
                    </p>
                </div>
            </li>
        </ul>
    </body>
</html>