HTML5(13)——CSS

用CSS来修饰HTML

CSS称为层叠样式表,它能够控制网页在屏幕上的展示方式。它能够很快的改变几个web的排版。
CSS添加到HTML的方式有三种:

  • Inline 行内的添加,利用style属性。
  • Internal 从文档本身添加,利用<style><head>
  • External 从外部添加CSS文件
    一般来说,我们用的最多的就是从外部添加CSS文件,这样能够很好的管理和分离HTML文件。

Inline CSS

这样的CSS,只能用来控制网页中特定的网页元素,而且是使用style属性来进行添加的。如:
<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS

这样的CSS是用来定义单一的一个网页,因为添加在网页文件中。它是用<style>元素添加在<head>中,而head是用来存放网页metadata内容的,能够影响整个网页,但是不会将其中的内容显示出来。我们在HTML5(1)——介绍一文中简要提到过,可以看这一篇文章。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

外部的CSS文件,就可以实现多个网页显示方式的修改,可以批量实现,你就时刻实现一个网站的所有网页的改变。它也是需要添加在<head>块中。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部的CSS 文件可以使用文本编辑器来编写,但是不许是不含HTML任何代码,且文件保存的后缀名为.css

1
2
3
4
5
6
7
8
9
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS字体

在CSS中,通常用color来定义文本颜色,font-family来定义字体,font-size用来定义文本的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>

CSS边界、空行和边缘

边界一般用border,是在文本外面添加框,而文本和框之间的空白多少是用padding来实现的。而整个框很页面的距离,则是用margin来进行定义的。

1
2
3
4
5
p {
border: 1px solid powderblue;
padding: 30px;
margin: 50px
}

id和class属性

你在head给你的样式命名,让后你可以使用id属性来调用这个名称,从而来定义特定元素的样式。但是这个命名一定要独一无二。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

而为了给特定元素类型,比如段落,可以使用class属性来定义某类特殊元素的样式。同样也是需要调用一个名称,而且这个名称可以在网页中重复使用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

通过外部链接添加CSS

同样可以在HTML的<head>中,添加CSS链接,从而来调用CSS文件。而使用外部文件,则不需要使用style元素。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
坚持原创技术分享,您的支持将鼓励我继续创作!