Collection
Collection
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
<style type="text/css">
h1{color:red;}
p{color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</>
</body>
</html>
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
</head>
<body>
<a href="http://www.118qq.top/" style="text-decroation:none;">访问118qq.top</a>
</body>
</html>
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>我使用了外部样式文件来格式化文本</h1>
<p>我也是！</p>
</body>
</html>
css是为了更好的渲染HTML文档而引入的
css可以通过下列方式添加到HTML文档中
l 内联样式：在HTML文档中使用style属性
l 内部样式表：在HTML文档头部<head>使用<style>元素来包含css
l 外部引用：使用外部的css文件
最好的方式是外部引用css文件
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关标签中使用样式属性。样式属性可以包含任何css属性。
实例：
<p style=”color:red; margin-left:20px;”>
文本颜色为红色，左外边距为20像素</P>
以上实例是改变段落颜色和左外边距
背景色background-color定义一个元素的背景色
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个背景为红色的标题</h2>
<p style="background-color:green;">这是一个背景为绿色的段落</p>
</body>
</html>
我们可以使用font-family（字体）、font-size（字体大小）、color（颜色）属性来定义文字样式
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
</head>
<body style="background-color:yellow;">
<h1 style="font-family:微软雅黑;">这是一个文字字体为微软雅黑的标题</h1>
<p style="font-family:微软雅黑; color:red; font-size:20px;">这是一个字体为微软雅黑颜色为红色大小为20像素的段落</p>
</body>
</html>
使用text-algin（文字对齐）指定文本水平与垂直的对齐方式
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>118qq.top</title>
</head>
<body style="background-color:yellow;">
<h1 style="text-algin:center;">居中对齐的标题</h1>
</body>
</html>
当单个文件需要特别样式时，就可以使用内部样式表。可以在<head>部分通过<style>标签定义内部样式表
实例：
<head>
<meta charset="utf-8">
<title>118qq.top</title>
<style type="text/css">
body{background-color:yellow;}
p{color:blue;}
</style>
</head>
当样式需要被应用到多个页面时，外部样式表将是最理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观
实例：
<head>
<meta charset="utf-8">
<title>118qq.top</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
