css怎么写到html的简单介绍

CSS如何嵌入到HTML中

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

1.外联

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

它的写法是： <HTML>

<HEAD>

</HEAD>

2. 嵌入

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

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

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

它的写法是： <HTML>

<HEAD>

div{

font: 12pt

font: 16pt

font-weight: bold;

color: green

}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

3.内联

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

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

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

它的写法是： <HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

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

CSS如何嵌入到HTML中？

CSS通过内联、外联等样式嵌入到HTML中。

1、使用样式表的处理指令语句

在HTML文档的开头部分写一个关于样式表的指令处理语句

复制代码

代码如下:

<?xml-stylesheet type=”text/css” href=”mystyle.css” ?>

<html>

指令语句

</html>

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令

在style元素之间使用@import命令导入外部的css文件

复制代码

代码如下:

<head>

<!–下面两行代码效果一样

@import “mystyle.css”;

@import url(“mystyle.css”);

–>

</style>

</head>

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

复制代码

代码如下:

<head>

</head>

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表

可以使用HTTP消息报头的link字段链接一个外部样式表。

复制代码

代码如下:

link:<mystyle.css>;rel=stylesheet;

//等同于<link rel=”stylesheet” href=”css的url” type=”text/css” >

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

如何将CSS文件引用到html网页里方法

在head中间加入代码<link href=”css/main.css” rel=”stylesheet” type=”text/css” />

在html中,引入css的方法主要有行内式、内嵌式、导入式和链接式4种。

1.行内式:即在标记的style属性中设定css样式，这种方式本质上没体现出css的优势，因此不推荐使用。

2.嵌入式:在对页面中各种元素的设置集中写在<head>和</head>之间的，对于单个页面来说，这种方式很方便。

3.导入式:导入式格式如下：

@import “mystyle.css”;

</style>

4.连接式:格式如下：

采用后两种方式后的显示效果略有区别，区别如下：

连接式：会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的;

导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。

对于一些比较大的网站，为了便于维护，可能会希望把所有的css样式分类别放到几个CSS文件中，这样如果使用连接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。

因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式；如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。

如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现

如何把css导入html

1、html引入css文件之直接在div中使用css样式制作div+css网页

<div style=”border:1px red solid;”>html引入css文件</div>

说明：html引入css文件的这种方法不建议使用，因为会让页面的标签很多，看起来很累赘，体现不了css的优势，当然如果你非常想用这种方法，在不经常更改的地方可以用一用，但是还是不推荐。

2、html引入css文件之html中使用style自带式

直接在header 里面写css

div{margin: 0;padding: 0;border:1px red solid;}

</style>

说明：html引入css文件的这种方法适合在页面较少的情况下使用。优点：速度快，所有的css控制都是针对本页面标签的，没有多余的css命令；再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较多改版会很麻烦，单个页面显得臃肿，css不能被其他html引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

3、html引入css文件之使用@import引用外部CSS文件

将一个独立的.css文件引入HTML文件中，导入式使用css规则引入外部css文件，<style>标记也是写在<head>标记中，使用的语法如下：

@import”mystyle.css”; 此处要注意.css文件的路径

</style>

4、html引入css文件之使用link引用外部CSS文件

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css。

说明：html引入css文件的这种方法就不需要style标签，而是直接通过link一个样式来引用外部样式，推荐使用link来引用外部的css样式方法。

HTML网页怎么使用CSS样式？

在制作一个网页的时候，Css样式的添加一共有四种方式，一起来看看这四种方式：

一、使用STYLE属性：将STYLE属性直接加在个别的元件标签里。

<元件(标签) STYLE=”性质(属性)1: 设定值1; 性质(属性)2: 设定值2; …}

例如：

这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签：将样式规则写在<STYLE>…</STYLE>标签之中。

通常是将整个的 <STYLE>…</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签：将样式规则写在.css的样式档案中，再以<LINK>标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入

即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入：跟LINK用法很像，但必放在<STYLE>…</STYLE> 中。

要注意的是，行末的分号是绝对不可少的！这种方式也可以把

如何把css加到html中

使用<link/>标签来应用你的CSS，具体用法如下