图片 套网站模板下载 迅雷下载 迅雷下载地址东莞网站建设方案报价
CSS（Cascading Style Sheets）层叠样式表
是一种用于描述网页内容视觉表现的样式表语言。它通过定义 规则（Rules） 控制 HTML 或 XML 文档的布局、颜色、字体、动画等外观特性，实现内容与样式的分离。
CSS添加到HTML的基本方式
1.内联（lnline）：在HTML元素中使用样式属性
<!-- lnline(内联)css样式应用到一个元素上 --><h1 style="color: red;">红色标题</h1><p style="color: brown;">棕色的段落</p>
2.内部（lnternal）：在<head>部分使用<style>元素，用于定义HTML页面风格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* lnternal(内部)CSS */body{background-color: blue;}h1{color: rgb(81, 203, 0);}p{color: brown;}#p01{color:yellow}p.error{color: aqua;}</style>
</head>
<body><h1>标题</h1><p>段落内容</p>
</body>
</html>
3.外部（External）：使用外部CSS文件，可以用来定义多个HTML页面风格
使用外部样式表，是在HTML页面的<head>部分添加一个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="t01.css">
</head>
<body><h1>标题</h1><p>段落内容</p>
</body>
</html>
外部样式表可以使用任何文本编辑器编写。文件不能包含任何HTML代码，必须保存为一个以 .css 为扩展名的文件。样式如下：
body{background-color: blanchedalmond;
}
h1{color: blue;
}
p{color: red;
}CSS基本属性
CSS属性 color 定义颜色，font-family 定义字体，font-size 定义文本大小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{color: aqua;font-family: verdana;font-size: 300%;}p{color: violet;font-family: courier;font-size: 160%;}</style>
</head>
<body><h1>标题</h1><p>段落内容</p>
</body>
</html>
CSS边框 属性定义一个HTML元素的边框
p{border: 1px;/* 边框 */
}
CSS内边距（Padding） 属性定义文本和边框之间的填充（空格）
p{border: 1px;padding: 30px;/* 内边距 */
}
CSS外边距(Margin) 定义边界外的边距
p{border: 1px solid powderblue;margin: 50px;/* 外边距 */
}id属性
为特定元素定义特定样式，可以为该元素添加特定id，然后为特定id元素定义样式
<!-- id属性，为特定元素添加特定样式 --><p id="p01">段落段落</p>
<style>#p01{color:yellow}</style>
class 属性，为特殊类型的元素定义样式，可以向元素添加类属性
<!-- 为特殊类型的元素定义样式，请向元素添加类属性 --><p class="error">class属性...</p>
然后为特定类定义元素的样式
<style>p.error{color: aqua;}</style>
外部样式引用
外部样式表可以引用完整的URL或与当前网页相对应的路径
<link rel="stylesheet" href="填入对应的网页路径">