html如何跟css链接

html-css014

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文件,此时就连接成功。

加载css样式有以下四种 外部样式(外联样式) 内部样式(内嵌式) 行内样式 导入样式如果css是一个外部文件,可以在你html文件的<head></head>里写上 <link href="style.css" rel="stylesheet" type="text/css" />href="style.css"这里可以写上你css文件的路径 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。 如果是内部样式,也可以在<head></head>里写上 <style type="text/css">h2 { color:#f00} </style>它是以<style>和</style>结尾,写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。 还可以在html标签上直接写css样式 <p style="font-size:18px">内部样式</p>这种在标签内以style标记的为行内样式,行内样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用。 @import url("public.css")导入样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如index.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个public.css的文件中,然后在index.css中以@import url("/public.css")的形式链接全局样式,这样就使代码达到很好的重用性。