html如何转换css.html

html-css08

html如何转换css.html,第1张

1.

使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1性质(属性)2: 设定值2...} 例如: <TD STYLE="COLOR:BLUEfont-size:9ptfont-family:"标楷体"line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

2.

使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。 通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD></HEAD>部

很简单,只要把html中各个标签的样式都提取出来,放到css中,在给各个元素引用就可以了。

1、在html中找到<head></head>标签,在其中增加<style type="text/css"></style>标记

2、找到html中的一个元素比如

<div style="background:greenalign:centerwidth:20%font-size:14px">xxx</div>这种,将其中的style=""双引号之间的内容复制,粘贴到1中创建的标记内。在用一个选择器包裹住,最后在元素上指定class="选择器"就可以了

3、例子 如下两个div,第一个在style中设置样式,第二个通过css引用样式,最终效果过一样

<html>

    <head>

        <style type="text/css">

            .divcss{

                background:green

                align:center

                width:20%

            }

        </style>

    </head>

    <body>

        <div style="background:greenalign:centerwidth:20%">xxx</div>

        <div class="divcss">xxx</div>

    </body>

</html>

1、使用 <link>标签导入

使用 <link>标签导入外部样式表文件:

<link href="001.css" rel="stylesheet" type="text/css" />

对各个属性的说明:

href 属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

rel 属性定义关联的文档,这里表示关联的是样式表。

type 属性定义导入文件的类型,同 style 元素一样,text/css表明为 CSS 文本文件。

一般在定义 <link>标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

2、使用 @import 关键字导入

在 <style>标签内使用@import关键字导入外部样式表文件:

<style type="text/css">

@import url("001.css")

</style>

在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址。

对比

两种导入样式表的方法比较:

link 属于 HTML 标签,而 @import 是 CSS 提供的。

页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。

@import 只在 IE 5 以上才能识别,而 link 是 HTML 标签,无兼容问题。

link 方式的样式的权重高于 @import 权重。

一般推荐使用 link 导入样式表的方法,@import 可以作为补充方法使用。