怎样将下面这段代码中的css样式直接写在HTML中?

html-css014

怎样将下面这段代码中的css样式直接写在HTML中?,第1张

1、首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=""双引号中才可以,如:<p style="color:red">这里文字是红色。</p>。

2、如果想让HTML标签和css样式区分开来,可以采取将css样式代码写在<style type="text/css"></style>标签之间,并且这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间,效果都是一样的。

3、以上两种HTML和css的结合都是在同个页面,代码量多的情况下就不好区分了,这时可以创建一个外部css样式文件。右键点击桌面先创建一个记事本文档,然后将文档的扩展名改为“.css”。将该css样式文件与HTML放在同个磁盘中以便调用。

4、将css样式文件创建好后,使用Sublime编辑器打开css样式文件,在文件里面编写相应的css样式。

5、准备好这个css样式文件后,回到HTML文件,在<head></head>标签内使用<link>标签将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>

<style type="text/css">

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

@import "mystyle.css"

@import url("mystyle.css")

-->

</style>

</head>

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

3、使用link元素

复制代码

代码如下:

<head>

<link rel="stylesheet" href="css的url" type="text/css" >

</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元素中)具有优先级。

Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。

一、外部样式

(一) 使用外部样式的好处

1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。

2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。

3.Html页面渲染时,css文件能够被同时加载。

4.结构与表现分离,便于后期维护。

(二) 适用于多个页面需要相同样式内容的时候使用

(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中

例:

rel:规定当前文档与被连接文档之间的关系.

href:规定为连接文档的位置

type:规定被连接文档的MIME类型

二、内部样式

(一) 使用内部样式的好处

1.结构与表现分离,便于后期维护。

2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。

3.同样页面中相同的样式可以重复使用。

(二) 使用内部样式的缺点

1.只能在一个页面中使用

2.网站更换风格麻烦

3.Css在html页面中,页面显得臃肿

(三) 适用于个别页面需要特殊样式时

(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签

例:

三、行间样式

(一) 使用内部样式的好处

1. 单独修改单个标签的样式

(二) 使用内部样式的缺点

1. 结构与表现没有分类,不利于后期维护。

2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。

(三) 适用于个别标签需要特殊样式时

(四) 书写位置:在标签的开始标签内部书写style=””

例:

四. 导入式

(一) 使用导入的好处

1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。

2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。

3.结构与表现分离,便于后期维护。

(二) 使用导入的缺点

1.需要等Html页面全部加载完才能加载css文件。

(三) 适用于多个页面需要展示相同样式的时候

(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件

以上就是html导入css代码的详细介绍,更多关于html方面的知识点,可以看下这个视频教程:网页链接,希望我的回答能帮到你。