div+css如何添加到html中?

html-css09

div+css如何添加到html中?,第1张

有3种方式可以将css定义的样式加到HTML里。

1.外联

在HTML里加一个超连结连到外在的CSS文档,这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开,只需要在一个CSS文档内定义好网页的外观风格,所有参考连结到此 CSS 档的网页,便会依照指示,反应出定义好的风格。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

<LINK REL="stylesheet" HREF="http://www.xyz.com/xyz.css" TYPE="text/css">

</HEAD>

2. 嵌入

在 HTML的<HEAD></HEAD>标签间,加一段CSS定义

这个方法适用于指定某个网页,除了展现外在的 CSS 档定义好的网页风格外,同时还要展现本身HTML内定义的CSS样式。

如果内在定义的CSS定义与外在连结的CSS定义相冲突的话,网页的样式将以内在定义的CSS定义为主。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

<STYLE TYPE="text/css">

div{

font: 12pt

font: 16pt

font-weight: bold

color: green

}

</STYLE>

</HEAD>

<BODY>

<div>内容</div>

</BODY>

</HTML>

3.内联

在HTML的字里行间中加入CSS定义。

这个方法适用于指定网页内的某一小段的样式。

如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<P STYLE="color: red">内容 </P>

</BODY>

</HTML>

上面的3种CSS引入方式可以同时并用,也可以单一或成双地使用。如果各CSS间的定义相冲突,则嵌入定义的CSS会盖过外联连结的CSS,内联的CSS会盖过嵌入定义的CSS。

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

不是比引用文件慢些!

在HTML里面有权重的分别,在文件内部的js和css的权重会比引用文件的权重高一些。

但是将js和css直接放到html里面会拖累HTML的加载速度也就是通常说的网页打开比较慢,比较卡。

建议将一些必须先加载的js放到html中,将动态的css放到html中,其他的都放到js和css文件中,在html中引用就好!