初识CSS
CSS(Cascading Style Sheets)即层叠样式表,它是一种用来为结构化文档(例如HTML文档或XML应用)添加样式的计算机语言,目前由W3C定义和维护。
在前端网页开发中,我们使用CSS来定义网页元素的样式,例如背景颜色、字体展示、元素位置、动画效果等等。
所以,HTML 与 CSS 结合,将网页的内容与样式分离,有利于提高开发效率
一个简单的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
background-color: teal;
}
h1 {
color:white;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
</body>
</html>
我们在HTML文档的<head>元素中,加入了<style>元素,设置其属性type为text/css,表示此处内容为CSS。
CSS基础语法
CSS语法主要包括两部分:选择器和声明。
选择器用于指定我们要修改的HTML元素,在上述实例中,body和h1就是选择器。
选择器 {声明1}
通过声明,我们定义要改变的元素样式。声明由属性和值构成,包含在花括号中,基本格式如下:
{属性: 值;}
CSS样式引入方式
CSS样式有三种引入方式:
- 内部样式表:如同之前实例中所示,在文档头部中引入;
- 外部样式表:通过外部文件引入;
- 内联样式:直接在特定元素中引入。
内部样式表
直接在HTML文件的头部,添加<style type=“text/css”></style>元素。
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
/*样式添加在这里*/
</style>
</head>
外部样式表
将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的中添加CSS文件链接。
<head>
<meta charset="utf-8">
<title>Hello World</title>
/* 引入外部的CSS文件 */
<link rel="stylesheet" href="style.css" />
</head>
属性rel的值stylesheet代表样式表,通常不变。href属性值,代表文件的位置,href属性值的书写方式要根据具体的CSS文件位置。
在实际的项目中,推荐将样式表统一放在CSS文件夹中,使得项目结构更清晰,资源管理更容易。
<link rel="stylesheet" href="CSS/style.css" />
主要优点如下:
-
内容与样式分离;
-
易于开发和维护样式。
-
样式易于复用;
-
可在多个HTML文件中引入相同的样式文件。
-
加载更快。
如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取,而不再需要再一次访问服务器资源。
内联样式
内联样式是指直接在标签内添加样式属性。
<p style="color: Red; margin-left: 24px; font-size:20px;">内联样式CSS表格<p>
样式的优先级顺序
外部样式< 内部样式 < 内联样式