DRP之HTML 中插入 CSS样式
DRP之HTML 中插入 CSS样式
DRP前台中用到HTML，在html中就必定少不了CSS，今天小编在这里小结一下，html中
插入CSS的几种方式：
方式一： 内样式
什么是内样式呢？就是编辑表格，字体颜色，字体格式，背景等等的修饰代码直接在
HTML中编写。
1直接html中写
<!--最原始的方式 一-->
<html>
<head>
<title>行内样式表（html标签中的style属性）</title>
</head>
<body bgcolor="#00FF33">
</body>
</html>
2 在head 标签中写
<!-- 内样式 body标签中： 用CSS实现二-->
<!--<html>
<head>
<title>行内样式表（html标签中的style属性）</title>
</head>
/*<!-- <body bgcolor="red">
</body>*/
<body style="background:#00FF33">
</body>
</html>-->
3 在style 标签中写
<!--直接CSS放到style标签中，内样式 利用选择器 三-->
<!--<html>
<head>
<title>行内样式表（html标签中的style属性）</title>
<style type="text/css">
body{
background:red;
}
</style>
</head>
</html>-->
方式二：外样式
1什么是外样式？
就是把将CSS独立与html出来，把HTML和CSS分开了，就像我们一般都会把JS页面和
html分开一样，CSS在html之后的方式我们称之为外样式。
2 例子：
HTML代码：
<!--head 标签中 利用独立的CSS 实现方式四-->
<!--<html>
<head>
<title>外部样式表（将CSS单独放到一个文件夹中）</title>
<link rel="stylesheet" type="text/css"href="style1.css">
</head>
<body>
这是一个红色页面
</body>
</html>-->
CSS代码(style.css)：
body{
background:red;
color:#F30;
}
3 为什么要将CSS独立出来呢？
使用link来引用外部的css的优势是什么？
1、有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引
擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页
的权重，有利于排名。
2、节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页
打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）
3、修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共
用的css基本样式，这样修改整站风格样式根据快捷方便。如此一来，就更是极大地提高了工作效率。