Cascading Style Sheets——层叠样式表,简称CSS
如果说HTML是决定页面写什么内容的话,那么CSS就是控制这些内容如何显示与表现的。
CSS与HTML结合的三种形式如下:
- 内联式
- 嵌入式
- 外链式
一、内联式
直接在标签内部利用style属性来表示。
例子如下:
<div style="color:red;font-size:20px;line-height:30px">
超文本标记语言定义了多种数据类型的元素内容,如脚本数据和样式表的数据,和众多类型的属性值,包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
<div>
效果如下:
这种方法是比较直观,但是如果两段文字甚至更多段文字都需要设置相同的style属性,会不会造成过多冗余呢?
于是有了嵌入式;
二、嵌入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div{
color:red;
font-size:20px;
line-height:30px;
font-family: '幼圆';
}
</style>
</head>
<body>
<div>
超文本标记语言定义了多种数据类型的元素内容,如脚本数据和样式表的数据,和众多类型的属性值,包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
<div>
</body>
</html>
在head中有个style标签
div是个选择器(后面会具体讲),body中凡是被div标签内的内容全部会变成这个样式。
而在实际开发中,我们更偏向于把html和css分离成两个文件,就引出第三种方式,外链式;
三、外链式
这时候,我们要把在head中的样式放在单个文件中,
HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>
<body>
<div>
超文本标记语言定义了多种数据类型的元素内容,如脚本数据和样式表的数据,和众多类型的属性值,包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
<div>
</body>
</html>
CSS文件内容:
div{
color:red;
font-size:20px;
line-height:30px;
font-family: '幼圆';
}
以上三种方式,
嵌入式一般用在首页,提高显示出来的速度。
外链式是推荐使用的。