HTML中使⽤CSS样式⽅法
CSS样式表能很好的控制页⾯显⽰，已达到分离页⾯内容和样式代码的⽬的。其⽅式通常包括⾏内样式，内嵌样式，链接样式，导⼊样式1、⾏内样式：⾏内样式是所有样式中⽐较简单，直观的⽅法，就是把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在，通过
  这种⽅法，可以简单地对某个元素单独定义样式。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⾏内样式</title>
</head>
<body>
<p >⾏内正⽂标题</p>
<p >⾏内样式内容字体⼤⼩为16px，字体颜⾊为蓝⾊，字体加粗</p>
</body>
</html>
  注：⾏内样式简单，但这种⽅法不常使⽤，因为这样添加⽆法完全发挥样式表。
2、内嵌样式：内嵌样式就是把CSS样式代码添加到<head>与</head>之间，并且⽤<style>和</style>标记进⾏声明。这种写法虽然没有完全实现页⾯内容和样式的控制代码完全分离，但可以
  设置⼀些⽐较简单的样式，并统⼀页⾯样式。实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内嵌样式</title>
<style type="text/css">
p{
color: red;
font-size: 16px;
font-weight:bolder;
}
</style>
</head>
<body>
<p>这段内容使⽤内嵌样式修饰</p>
</body>
</html>
3、链接样式：链接样式是CSS中使⽤频率最⾼，也是最实⽤的⽅法，它很好的将“页⾯内容”和“样式风格代码” 分离成两个⽂件或多个⽂件，实现了页⾯框架HTML代码和CSS代码的完全
  分离，是前期制作和后期维护都⼗分的⽅便。
  链接样式是指在外部定义CSS样式表并形成以 .css为扩展名的⽂件，然后在页⾯中通过<link>链接标记链接到页⾯中，⽽且该链接语句必须放在页⾯的<head>标记区，如下：
<link rel="stylesheet" type="text/css" href="链接样式.css">
  1）link：指定链接样式表，其值为stylesheet
  2）type：表⽰样式表类型为CSS样式表
  3）href：指定CSS样式表所在的位置，此处在当前路径下，名称为链接样式.css的⽂件
    注：这⾥使⽤的是相对路径。如果HTML⽂档和CSS样式表没在同⼀路径下，则需要指定样式表的绝对路径和引⽤位置
  实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<link rel="stylesheet" type="text/css" href="链接样式.css">
</head>
<body>
<h1>链接样式标题居中</h1>
<p>链接样式修饰字体⼤⼩18px，字体颜⾊红⾊，字体倾斜</p>
</body>
</html>
链接样式css⽰例：“链接样式.css”
h1{
text-align: center;
}
p{
font-size: 18px;
color: red;
font-style: oblique;
}
4、导⼊样式：导⼊样式和链接样式基本相同，都是创建⼀个独⽴的CSS⽂件，然后在引⼊到HTML⽂件中，只不过语法和运作⽅式有差异。采⽤导⼊样式的样式表，在
  HTML⽂件初始化时，会被导⼊到HTML⽂件内，作为⽂件的⼀部分，类似于内嵌效果，⽽链接样式是在HTML标记需要样式风格时才以链接⽅式引⼊
  导⼊样式表使⽤@import导⼊⼀个外部样式表，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导⼊样式</title>
<style>
@import "导⼊样式.css";
</style>
</head>
<body>
<h1>导⼊样式标题居中</h1>
<p>导⼊样式修饰字体⼤⼩20px，字体颜⾊橙⾊</p>
css样式表优先级最高</body>
</html>
导⼊样式css⽰例："导⼊样式.css"
h1{
text-align: center;
}
p{
font-size: 20px;
color: orangered;
}
5、⾏内，内嵌，链接，导⼊样式优先级：
  如果同⼀个页⾯采⽤了多种css代码⽅式，例如⾏内样式，内嵌样式，链接样式，导⼊样式这⼏种样式共同作⽤⼀个标记时，就会出现优先级问题。
  假如都设置字体颜⾊，⾏内样式优先级⼤于内嵌样式，内嵌样式优先级⼤于链接样式，链接样式优先级⼤于导⼊样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。