HTML 样式表
时间：2019-06-08 23:19:24 来源:igfitidea点击:
层叠样式表(CSS)描述了文档在屏幕上、打印中的显示方式，或者它们的发音方式。
自1994年联盟成立以来，W3C一直在积极推动Web上样式表的使用。
层叠样式表(CSS)为HTML标记指定各种属性提供了简单有效的替代方法。
使用CSS，可以为给定的HTML元素指定许多样式属性。
每个属性都有一个名称和一个值，用冒号(:)分隔。
每个属性声明用分号(;)分隔。
HTML 样式表示例
指定文本颜色和字体大小:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
使用CSS的三种方式
外部样式表-在单独的.css文件中定义样式表规则，然后使用HTML<link>标记将该文件包含在HTML文档中。
内部样式表-使用<Style>标记在HTML文档的标题部分定义样式表规则。
内联样式表-使用样式属性直接定义样式表规则和HTML元素。
外部样式表
如果需要将样式表用于不同的页面，则始终建议在单独的文件中定义一个通用样式表。
级联样式表文件的扩展名为.css，使用<link>标记将它包含在HTML文件中。
外部样式表示例
定义了一个样式表文件style.css
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
我们定义了三个CSS规则，它们将适用于为HTML标记定义的三个不同的类。
在下面的HTML文档中使用上面的外部CSS文件:
<!DOCTYPE html>
<html>
<head>
<title>HTML使用外部css样式表</title>
<link rel = "stylesheet" type = "text/css" href = "./src/style.css">
</head>
<body>
<p class = "red">这是红色字体</p>
<p class = "thick">这是粗体字</p>
<p class = "green">这是绿色字体</p>
<p class = "thick green">这是粗体绿色字体</p>
</body>
</html>
内部样式表
如果只想将样式表规则应用于单个文档，则可以使用<Style>标记将这些规则包含在HTML文档的头部 <head>。
内部样式表中定义的规则将覆盖外部CSS文件中定义的规则。
内部样式表示例
使用<style>标签将样式表规则写到HTML文档中：
<!DOCTYPE html>
<html>
<head>
<title>HTML 内部CSS样式表</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">这是红色字体</p>
<p class = "thick">这是粗体字</p>
<p class = "green">这是绿色字体</p>
<p class = "thick green">这是粗体绿色字体</p>
</body>
</html>
内联样式表
我们可以使用style属性将样式表规则直接应用于任何HTML元素。只有当我们只想对任何HTML元素进行特定更改时，才应该这样做。
与元素内联定义的规则覆盖外部CSS文件中定义的规则以及<style>元素中定义的规则。
内联样式表示例
使用这些元素的style属性来编写样式表规则和HTML元素。
<!DOCTYPE html>
<html>
<head>
<title>HTML 内联样式表</title>
</head>
<body>
<p class = "red">这是红色字体</p>
<p class = "thick">这是粗体字</p>
<p class = "green">这是绿色字体</p>
<p class = "thick green">这是粗体绿色字体</p>
</body>
</html>
