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

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>

多选择器

当一个代码片段重复性的出现时,会造成代码执行效率降低,此时可以使用多类名调用来解决代码冗余问题。多类名调用的语法:标签可以调用多个类名,类名之间用空格隔开。

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>

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>

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>

上述代码,在浏览器运行的效果如下: