hooyantsing's Blog

第17次课程

字数统计: 1k阅读时长: 5 min
2019/05/20

源辰74班

第17次课程

05.20.2019

**内容    **

CSS

1.样式

内联样式、内部样式、外部样式

注意:CSS样式优先级,最靠近标签的CSS优先级最高。

等价于:内联样式>内部样式/外部样式

HTML

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>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <!--内部样式-->
      <style>
            h1{
                  color:blue;
                  font-size: 30px;
            }
      </style>
      <!--外部样式-->
      <link rel="stylesheet" href="css/style1.css" />
</head>
<body>
      <!--内联样式-->
      <p style="color: red;font-size: 20px" >锄禾日当午</p>
      
      <h1>汗滴禾下土</h1>
      <h2>粒粒皆辛苦</h2>
</body>
</html>

外部CSS

1
2
3
4
h2{
   color:pink;
   font-size: 10px;
  }

2.CSS选择器

优先级:内联样式>(id>class>tag)内部样式

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                  li{/* tag */
                        /* 颜色 */
                        color: pink;
                        /* 字号 */
                        font-size: 20px;
                        /* 字体 */
                        font-family: "隶书";
                  }
                  .cred{/* class */
                        color: red;
                        font-size: 30px;
                        font-family: "楷体";
                  }
                  #cblue{/* id */
                        color: blue;
                        font-size: 40px;
                        font-family: "宋体";
                  }
            </style>
      </head>
      <body>
            <!-- div盒子标签 -->
            <div>
                  <!-- 快捷键:ul>li*4 + TABLE键 -->
                  <ul>
                        <li>家用百货</li>
                        <li>各类书籍</li>
                        <li>手机数码</li>
                        <li>日用百货</li>
                  </ul>
            </div>
            <div>
                  <!-- 快捷键:ul>li*4 + TABLE键 -->
                  <ul>
                        <li class="cred">家用百货</li>
                        <li class="cred">各类书籍</li>
                        <li id="cblue">手机数码</li>
                        <li style="color:green;font-size: 50px;">日用百货</li>
                  </ul>
            </div>
      </body>
</html>

效果图:

a3c4ec4ff336c891d5859535a57d7882.png

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
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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                   body{
                        font-size: 15px;
                        font-family: "微软雅黑";
                  }
                  #note{
                        width: 80%;
                        margin: 0 auto;
                  }
                  table{
                        border: 1px solid grey;/* 边框1px,实线,灰色 */
                        width: 80%;/* 重点!宽度永远仅占页面的80% */
                        border-collapse: collapse;
                        border-spacing: 0;
                        margin: 0 auto;/* 外边距 */
                  }
                  table tr{/* 解释:对table标签内的tr标签进行CSS */
                        border: 1px solid gray;
                  }
                  table th,td{
                        padding: 10px;/* 内边距 */
                        text-align: center;/* 字体居中 */
                  }
            @media only screen and (max-width: 500px)
            {
                  table{
                        border: 0;
                  }
                  table thead{
                        display: none;
                  }
                  table tr{
                        margin-bottom: 10px;
                        display: block;
                        text-align: center;
                        border: 1px dashed #ccc;
                  }
                  table td{
                        display: block;
                        text-align: right;
                        border: 1px dashed  #ccc;
                  }
                  table td:before{
                        content: attr(data);
                        font-weight: bold;
                        float: left;
                  }
            }
            </style>
      </head>
      <body>
            <div id="note">
                  <h1>演示:纯CSS实现自适应布局表格(缩小显示区域看下)</h1>
                  <p>调整页面宽度,或者在不同屏幕尺寸的设备上(PC,手机)尝试浏览器本页, 你会发现下面的表格呈现出自适应布局特征,能够自动的使用不同的屏幕尺寸, 数据的表现不会因为屏幕大小变化而变得不合适。</p>
            </div>
            <table>
                  <thead>
                        <th>支付</th>
                        <th>日期</th>
                        <th>金额</th>
                        <th>周期</th>
                  </thead>
                  <tr>
                        <td data="支付" = "">支付#1</td>
                        <td data="日期">02/01/2015</td>
                        <td data="金额">¥2,311</td>
                        <td data="周期">01/01/2015 - 01/31/2015</td>
                  </tr>
                  <tr>
                        <td data="支付">支付#2</td>
                        <td data="日期">03/01/2015</td>
                        <td data="金额">¥3,311</td>
                        <td data="周期">01/01/2015 - 01/31/2015</td>
                  </tr>
            </table>
      </body>
</html>

4.标签归纳

1

CATALOG