HTML样式的使用

部分摘抄自极客学院PPT

HTML样式

标签:

<style>:样式定义
<link>:资源的引用

属性

rel="stylesheet"外部样式表
type="text/css":引入文档的类型
margin-left:边距,其中left表示与左边框的边距,如果为right,就是与右边框的边距

三种样式表插入方法
ps.关于样式的操作尽量都放在头文件中,方便以后维护

外部样式表,连接独立的css文件
<link rel="stylesheet" type="text/css" href="mystyle.css" />
eg:
css代码为:
@charset "utf-8";
/* CSS Document */

 h1{
 color:#F00;
 }

 html代码为:     
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>html</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />
 </head>

 <body>
 <h1>标题h1</h1>
 </body>
 </html>

内部样式表:
<style type= "text/css" >
body {background-color:red}
p {margin-left:20px}
</style>
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html</title>
<style type="text/css">
p{
color:#C00;
}
h1{
color:#0F0;
}
</style>
</head>
```
 <body>
 <h1>标题h1</h1>
 <p> 欢迎来带极客学院 </p>
 </body>
 </html>
```
内联样式表:要注意格式,不要少写=,"等标点符号,加入网址记得加http,
<p style= "color:red>
eg:
body中加入:
<a href="http://www.jikexueyuan.com" style="color:#00F">极客学院</a>

HTML样式的使用

HTML样式

推荐阅读更多精彩内容