1、当我们没有引入外部css样式表的时候,一般情况下我们会在html里写样式,而又两种方式使我们常见的,第一种:
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>time元素</title>
</head>
<body>
<div style="height:300pxwidth:500pxbackground:#999"></div>
</body>
2、第二种写法:
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>time元素</title>
<style>
.all{
height:300px
width:500px
background:#999}
</style>
</head>
<body>
3、建立一个css样式表文件
4、存储在css文件夹中
5、在html文件中写入链接代码,代码如下:
<link rel="stylesheet" type="text/css" href="css/index.css" />
6、之后可以看到HTML文件的源代码傍边看到我们所连接的css文件,此时就连接成功。
1.外部链接,放在<head>标签里面,<LINK rel="stylesheet" type="text/css" href="http://www.dayinmandarin.com/templets/defante/style/z.css">
2.内部嵌入,也是放在<head>标签里面
<style type="text/css" >这里写样式</style>
3.行内式,直接写在标签里面
<p style="color:redfont-size:24px">行内式</p>
HTML文档使用<link .../>元素来引入外部样式文件, <link .../>要放在head元素里
href="文件地址"
结合题目: style/css.css 就是表示在html所在目录里有个文件夹style. 该文件夹里有一个css文档, 该css文档名字叫css
type="文件类型"
常见的有text/css表示层叠样式表
text/javascript 表示 javascript脚本
rel="外部文件和HTML文档的关系"
stylesheet: 表示外部文件是该HTML的样式表
参考代码 HTML文件
<!DOCTYPE html><html>
<head>
<link href="style/css.css" type="text/css" rel="stylesheet"/>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<h3 id="title">标题</h3>
<p class="myp">风云</p>
<p class="myp">雷电</p>
</body>
</html>
参考CSS文件(注意该文件,在html所在目录的style文件夹里, 详细看前面的图)
#title{color:#f00
}
.myp{
background:#999
}
效果图