层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
这就是CSS。
CSS的组成:
这就是一个简单的CSS语法。
css的属性必须放在{ }里面。
属性和属性值要用冒号连接 。
每条声明结束必须加上分号结尾;。
样式表分为三种:内部样式表,外部样式表,行内样式表。
内部样式表,就是写在头部标签里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:greenyellow;
}
</style>
</head>
<body>
<h1>祝你们以后身上都带点这个颜色!!!!</h1>
</body>
</html>
外部样式表:
就是建一个.css文件,把样式写在这个文件,然后在html里面导入就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" type = "text/css" href = "2.css" />
<!--
法二:
<style type = "text/css">
@import url("2.css");
</style>
-->
</head>
<body>
<h1>祝你们以后身上都带点这个颜色!!!!</h1>
</body>
</html>
link标签:
<link rel = "stylesheet" type = "text/css" href = "css文件所在位置">
import:
<style type = "text/css">
@import url("css文件所在位置");
</style>
行内样式表:
就是写在同一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style = "color: aqua;">祝你们以后身上都带点这个颜色!!!!</h1>
</body>
</html>
优先级:行内样式表>内部样式表>外部样式表