CSS 即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、几种常见的文字样式、文本样式、边框样式。
字体样式：
文本样式：
边框样式：
margin ： 20px 30px 边框与浏览器边界的距离
padding ： 20px 30px 边框与内部文本的距离，有默认值
width： 900px 边框及内部整体的宽
height： 1000px 边框及内部整体的高
boder：1px solid red 边框本身的大小、类型、颜色
二、三种导入css样式的方法
1.内联样式
在<head></head>标签里建立一个<style></style>标签，在里面可以对相应的标签对象的基本属性进行赋值，如颜色、大小，对齐方式等，
对已有的标签进行修饰的标签选择器格式如下：
<head>
<style>
/* 对<h1>标签里面的内容进行修饰 */
h1{
/* 字体颜色 */
color: aqua;
/* 字体大小 */
font-size: 50px;
/* 对齐方式 有左对齐left，右对齐right，居中center*/
text-align: center;
}
/* 对<p>标签里面的内容进行修饰 */
p{
color: rgb(153, 149, 153);
font-size: 10px;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>除此之外，还有对多个标签进行统一修饰的类选择器，在标签内使用class=“类名”对标签进行定义，在<style></style>中使用 ".类名{}"的格式对属性赋值，格式如下：
<head>
<style>
.color1{
color: yellow;
font-size: 20px;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="color1">这是一些文字</p>
<p class="color1">这是一些文字</p>
</body>以及对单个标签元素进行修饰的id选择器，在标签内使用id=“类名”对标签进行定义，在<style></style>中使用 "#类名{}"的格式对属性赋值，格式如下：
<head>
<style>
#hoby1{
color: crimson;
font-size: 20px;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="hoby1">这是一些文字</p>
</body>这三种选择器的优先级与它们的生效范围成反比，范围越大，优先级越低，即优先级：标签选择器<类选择器<id选择器
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1{
color: aqua;
font-size: 50px;
}
p{
color: rgb(153, 149, 153);
font-size: 10px;
}
.color1{
color: yellow;
font-size: 20px;
}
.color2{
color: blue;
font-size: 20px;
}
#hoby1{
color: crimson;
font-size: 20px;
}
#hoby2{
color: cyan;
font-size: 20px;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是一篇短文</h1>
<p class="color1">这是一些文字</p>
<p class="color1">这是一些文字</p>
<p class="color2">这是一些文字</p>
<p class="color2" id="hoby2">这是一些文字</p>
<p id="hoby1">这是一些文字</p>
<h2>这是一个结尾</h2>
</body>
</html>运行结果;
2.内部样式
即在标签位置的内部直接对标签里面的内容进行修饰
格式如下：
<h1 style="color: darkblue;">一些文字</h1>3.外联样式
即在HTML页面的外部新建一个以.css为后缀的css文件，内部书写的内容与内联样式<style></style>标签内部书写的内容完全一致，格式如下：
然后在HTML5页面内的<head></head>标签内部加上：
<!-- 外联样式 -->
<!-- ./后面为外联样式css文件的位置 -->
<link rel="stylesheet" href="./外联样式.css">这样就可以将内容与样式分开，减少了主页面的代码量，使界面展示更加的简洁。
关于外联样式，还有一种较为古老的格式，即在`中添加如下格式：
<style>
@import url(CSS文件路径);
</style>也可以实现外联样式，但它有几个缺点：
1.url中只能使用css文件路径。
2.在不兼容css2.1版本的浏览器中不能显示。
并且这种格式下的所有功能都能用<link>标签实现，且功能更丰富，所以我们现在基本已经不再使用这种格式。
比较这三种CSS的导入方式的优先级，内部样式最高，内联样式和外联样式的优先级相同，在同一个页面内，依照代码从上往下的实现顺序，对同一个标签的修饰，内联样式和外联样式中越靠后的样式优先级越高，代码实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 测试外联与内联优先级 -->
<link rel="stylesheet" href="./外联样式1.css">
<!-- 内联样式 -->
<style>
h1{
color: red;
}
h2{
color: salmon;
}
h3{
color: cyan;
}
</style>
<!-- 外联样式 -->
<!-- ./后面为外联样式css文件的位置 -->
<link rel="stylesheet" href="./外联样式.css">
</head>
<body>
<!-- 内部样式,优先级最高 -->
<h1 style="color: darkblue;">内部最高为蓝，内联为红，外联为黑</h1>
<h2>内联在外联之后，内联最高为粉，外联为黄</h2>
<h3>外联在内联之后，内联最高为蓝绿，外联为红</h3>
</body>
</html>结果：
