htmlbase

HTML CSS

我们都知道html中的元素,使用CSS可以控制其样式及整个页面的布局，那么html页面中如何添加CSS样式信息呢?
下文笔者将一一道来,如下所示

CSS加入网页的方法分享

方式1:
  内联样式
     在HTML元素中使用"style" 属性

内部样式表:
     在HTML文档头部 <head> 区域
	   使用<style> 元素 来包含CSS

外部引用:
     在html中的head引入外部CSS文件,如下所示
	 <head>
		<link rel="stylesheet" type="text/css" href="test.css">
	 </head>
      test.css:指引用的CSS路径
   
笔者认为最好的方式是:
     使用"外部引用"的方式为html加入css样式信息
	    因为这个方式可以实现CSS的公用,及以后维护起来非常的方便
HTML 样式标签 标签 描述 <style> 定义文本样式 <link> 定义资源引用地址

内联样式

将样式使用style属性直接写在html元素上 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>二八年华(linux28.com)内联样式</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">标题背景红色</h2>
<p style="background-color:green;">段落背景绿色</p>
</body>
</html>
html内联样式的示例分享

内部样式表

在头部使用style标签编写样式信息,然后在html元素上进行相应的引用 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>二八年华(linux28.com)--内部样式表</title> 

<style type="text/css">
body {background-color:yellow;}
p {color:green;}
h2 {background-color:red;}
</style>

</head>
<body>
<h2 >标题背景红色</h2>
<p >段落背景绿色</p>
</body>
</html>

外部引用

编写一个外部 test.css并放入以下内容 
body {background-color:yellow;}
p {color:green;}
h2 {background-color:red;}

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>二八年华(linux28.com)--外部引用</title> 

<link rel="stylesheet" type="text/css" href="test.css">

</head>
<body>
<h2 >标题背景红色</h2>
<p >段落背景绿色</p>
</body>
</html>