html如何跟css链接

html-css016

html如何跟css链接,第1张

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

 

}

效果图