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基本样式,这样修改整站风格样式根据快捷方便。如此一来,就更是极大地提高了工作效率。