前端入门基础之 HTML 与 CSS 之二

发表于 阅读次数： 评论数： 本文字数： 2.1k 阅读时长 ≈ 2 分钟

大纲

CSS 基础

常用文本属性

1
2
3
4
5
6
7
8
9
10
11
12
/* 字体颜色 */
color: blue;
/* 字体大小，Chrome默认字体大小是16px */
font-size: 60px; 
/* 字体类型，Chrome默认字体类型是微软雅黑；字体可以设置多个，用逗号隔开，按照顺序依次识别，如果全部字体都不被识别，则使用系统默认字体 */
font-family: "宋体";
/* 水平水平居中 */
text-align: center;
/* 字体加粗，正常值是400或者normal，加粗是700 */
font-weight: 700;
/* 首行缩进，建议使用 em 单位： 1em = 当前一个字体的大小 */
text-indent: 2em;

设置颜色的方式

1
2
3
4
5
6
7
8
9
/* 第一种方式: 用单词的方式 */
color: blue;
/* 第二种方式: 十进制的方式 */
color: rgb(183, 155, 55);
/* 第三种方式: 十六进制的方式 */
color: #ff0000;
/* 基于第三种方式，当三种颜色每两位的数值都相同，则可以简写 */
color: #f40;
color: #f00;

盒子的基本三属性

盒子指的就是标签，在网页中都是由一个一个大大小小的盒子组成，其中的三个基本属性如下：

  • width：宽度
  • height：高度
  • background：背景色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="'utf-8">
    <title>盒子的基本三属性</title>
    <style type="text/css">
        div {
            /* 宽度 */
            width: 200px; 
            /* 高度 */
            height: 200px; 
            /* 背景色 */
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示模式

三种显示模式

提示

盒子的显示模式属于块级显示模式

  • 块级显示模式
    • 独占一行显示，设置宽高后起作用；在没有设置宽度的时候，其默认宽度与父元素的宽度一致，而默认高度是 0
    • 拥有块级显示模式的元素（标签）：<html>、<body>、<div>、<h1> - <h6>、<p>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<hr>、<form>
  • 行内显示模式
    • 一行有多个元素（标签），设置宽高不会起作用，尺寸由内容大小决定；在没有设置内容时，其默认宽度和高度都是 0；当行内元素有一个及以上的空格符或者换行符时，显示效果之前会有一个默认的间距
    • 拥有行内显示模式的元素（标签）：<span>、<b>、<i>、<s>、<u>、<strong>、<em>、<del>、<ins>
  • 行内块显示模式：
    • 行内块显示模式：即一行有多个元素（标签），设置宽高后会起作用
    • 行内块显示模式的元素（标签）：<img>、表单标签（例如 <input>、<textarea>）
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="'utf-8">
    <title>显示模式</title>
    <style type="text/css">
        div {
            /* 宽度 */
            width: 200px; 
            /* 高度 */
            height: 200px; 
            /* 背景色 */
            background: blue;
        }

        i {
            background: red;
        }

        span {
            background: blue;
        }

        img {
            width: 60px; 
            height: 60px; 
        }
    </style>
</head>
<body>
    <div></div>
    <i>镇</i>
    <i>镇</i>
    <span>上</span>
    <span>上</span>
    <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg" />
    <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg" />
</body>
</html>

上述代码，在浏览器运行的效果如下：

显示模式转换

  • 显示模式转换
    • 其它显示模式转换成块级显示模式: display: block
    • 其它显示模式转换成行内块显示模式: display: inline-block
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>显示模式转换</title>
    <style type="text/css">
        div {
            /* 宽度 */
            width: 200px; 
            /* 高度 */
            height: 200px; 
            /* 背景色 */
            background: blue;
            /* 转换成行内块显示模式 */
            display: inline-block;
        }
        span {
            /* 宽度 */
            width: 100px; 
            /* 高度 */
            height: 100px; 
            /* 背景色 */
            background: red;
            /* 转换成行内块显示模式 */
            display: inline-block;
        }
        b {
            /* 宽度 */
            width: 100px; 
            /* 高度 */
            height: 100px; 
            /* 背景色 */
            background: yellow;
            /* 转换成块级显示模式 */
            display: block;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <span></span>
    <b></b>
    <b></b>
</body>
</html>

上述代码，在浏览器运行的效果如下：

选择器

标签选择器

  • 标签选择器
    • 定义的语法： 标签名 { 属性1; 属性2; ...}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="'utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        h1 {
            color: red;
        }
        h2 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Java</h1>
    <h2>Python</h2>
    <h2>JavaScript</h2>
</body>
</html>

类选择器

  • 类选择器
    • 定义类名：用点开头 + 类名称
    • 调用类名：用标签的 class 属性指定类名
    • 类名的命名规范：不能用数字开头，可以用字母或者下划线开头，后面可以加上字母、数字、下划线、中划线
    • 建议使用驼峰命名法：第一个单词首字母小写，从第二个单词开始首字母大写
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 type="text/css">
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <h1 class="red">Java</h1>
    <h2 class="blue">Python</h2>
    <h2 class="green">JavaScript</h2>
</body>
</html>

ID 选择器

  • ID 选择器
    • 定义 ID 名称：用 # 开头 + ID 名称
    • 调用 ID 名称：用标签的 id 属性指定 ID 名称
    • 唯一性：标签的 id 属性指定的 ID 名称一般全局唯一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf=8">
    <title>ID选择器</title>
    <style type="text/css">
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="one">Hello Wolrd!</h1>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="'utf-8">
    <title>多类名调用</title>
    <style type="text/css">
        .font {
            font-size: 80px; 
        }
        .red {
            color: #DB4732;
        }
        .blue {
            color: #1B6FEF;
        }
        .green {
            color: #009A57;
        }
        .yellow {
            color: #FFD669;
        }
    </style>
</head>
<body>
    <span class="blue font">G</span><span class="red font">o</span><span class="yellow font">o</span><span class="blue font">g</span><span class="green font">l</span><span class="red font">e</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器</title>
    <style text="text/css">
        .backend h1 {
            color: blue;
        }
        .backend .go {
            color: blueviolet;
        }
        .backend div h3 {
            color: green;
        }
        .fontend h1 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="backend">
        <h1>后端</h1>
        <h3 class="go">Go</h3>
        <h3>PHP</h3>
        <h3>Java</h3>
        <h3>Python</h3>
        <div>
            <h3>C#</h3>
        </div>
    </div>
    <div class="fontend">
        <h1>前端</h1>
        <h3>Vue</h3>
        <h3>NodeJs</h3>
        <h3>Webpack</h3>
        <h3>TypeScript</h3>
    </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
<!DOCTYPE html>
<html>
<head>
    <meta charset="“utf-8">
    <title>并集选择器</title>
    <style type="text/css">
        span, p, h1 {
            color: red;
        }
        .box h2, .box h3 {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>span</span>
        <p>段落</p>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
    </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>一级后代选择器</title>
    <style type="text/css">
        /* 只选中第一级ul标签 */
        .box>ul {
            border: 1px solid red;
        }
        
        /* 只选中第一级ul标签中的第一级li标签 */
        .box>ul>li {
            border: 1px solid blue;
        }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          一级li
          <ul>
            <li>二级li</li>
          </ul>
        </li>
        <li>一级li</li>
        <li>一级li</li>
      </ul>
    </div>
  </body>
</html>

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 第一种：内嵌式，是将CSS代码嵌入到HTML文件中，CSS代码和HTML代码相对分离，代码耦合度相对较低，在工作中偶尔会使用 -->
    <style type="text/CSS">
        .one {
            color:red;
        }
    </style>

    <!-- 第三种：外链式，是将CSS代码单独写在CSS文件中，CSS代码和HTML代码绝对分离，代码耦合度极低，在工作中经常会使用 -->
    <link rel="stylesheet" type="text/css" href="one.css" />
</head>
<body>
    <!-- 第二种：行内式，是将CSS代码写在HTML中，两种代码掺杂在一起，代码耦合很高，会有代码冗余，且难以维护，在工作中偶尔会使用 -->
    <div style="width: 100px; height: 100px; background: red;">我是div</div>
    <div style="width: 100px; height: 100px; background: yellow;">我是div</div>
    <div style="width: 100px; height: 100px; background: yellow;">我是div</div>
    <div style="width: 100px; height: 100px; background: yellow;">我是div</div>
    <div style="width: 100px; height: 100px; background: yellow;">我是div</div>
</body>
</html>

CSS 层叠性

层叠性基础

  • CSS 层叠性
    • 不同的属性都可以实现定义
    • 相同的属性，且在权重相同时，后定义的会层叠（覆盖）先定义的
    • 在权重不同时，谁的权重值高，则实现谁的，权重规则为： 标签选择器 < 类选择器 < ID 选择器 < 行内样式 < !important
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 type="text/css">
        #gray {
            color: gray;
        }
        .pink {
            color: pink;
        }
        .green {
            color: green;
        }
        div {
            color: red !important;
            font-family: "宋体";
        }
        div {
            font-size: 40px;
        }
        div {
            font-weight: 700;
            color: blue;
        }
        div {
            font-size: 50px;
            color: yellow;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="pink green" id="gray" style="color:skyblue">我是div</div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

层叠性进阶

CSS 的三种书写位置，都遵循上面介绍的层叠性规则。

  • one.css
1
2
3
.div {
    color: red;
}
  • demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>层叠性</title>
    <link rel="stylesheet" type="text/css" href="./one.css"></link>
    <style type="text/css">
        div {
            color: green;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="div">我是div</div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

CSS 继承性

  • 标签可以继承父元素关于文本设置的属性（不包括 width、height 等属性），继承的权重是最低的（等价于 0）
  • <a> 标签默认设置了 color、cursor 等属性，继承得到的颜色会被 <a> 标签自身的属性层叠（覆盖）
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 的继承性</title>
    <style text="text/css">
        .box {
            color: red;
            font-size: 30px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>Css</span>
        <i>Html</i>
        <p>JavaScript</p>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

状态伪类

  • 状态伪类：权重是 10，当四个状态同时存在时，要遵循 lvha 顺序
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>状态伪类</title>
    <style type="text/css">
        a {
            font-size: 20px;
        }
        /* 超链接未点击 */
        a:link {
            color: orange;
        }
        /* 超链接已点击 */
        a:visited {
            color: gray;
        }
        /* 超链接获取焦点 */
        a:hover {
            color: black;
        }
        /* 超链接被点击 */
        a:active {
            color: blue;
        }
    </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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>常用的两种状态伪类</title>
    <style type="text/css">
        .baidu {
            color: blue;
            font-size: 20px;
        }
        .baidu:hover {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" class="baidu">超链接</a>
    <a href="##">超链接</a>
</body>
</html>

块元素默认宽度

块元素在不设置固定宽度时，其默认的宽度和父元素的宽度一样，适用于块元素标签：<html>、<body>、<div>、<h1> - <h6>、<p>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<hr>、<form>。

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 type="text/css">
        .one {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .two {
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

text-aligin 水平居中

  • text-align 能让标签内的文本、行内元素、行内块元素水平居中，但不能让标签内的块元素水平居中
  • 若希望让文本、行内元素、行内块元素水平居中，则需要给它们的父元素设置一定的宽度
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="utf8">
    <title>text-align 能让什么水平居中显示</title>
    <style type="text/css">
        h1 {
            background-color: pink;
            text-align: center;
            width: 500px;
        }
        img {
            width: 50px;
            height: 50px;
        }
        .box {
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: yellow;
        }
        .one {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div class="box">
        <b>我是 Box</b>
        <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg" />
        <div class="one"></div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：