在html中css的分为几大类

青灯夜游
Freigeben: 2022-09-21 16:29:39
Original
2876 Leute haben es durchsucht

css可分为三类:1、内联(行内)样式,使用style属性在HTML标记内插入CSS代码,语法“ <标签名 style="css样式"> .. ”;2、内嵌样式表,在文档head部分的style标签对中放入CSS代码,语法“”;3、外部样式表,将CSS代码放入“.css”文件中,使用link标签或“@import”规则引入html文档中。

在html中css的分为几大类

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在html代码中要实现一些效果常常要加入css修饰,html中的css一共分为三种:内联样式、内嵌样式表、外部样式表。

1、内联(行内)样式

内联样式就是将样式信息直接定义在 HTML 标签的 style 属性中,由于内联样式定义在标签内部,所以它只对所在的标签有效。

 

Hostinger Tutorials

Something usefull here.

Nach dem Login kopieren

1.png

建议不要使用内联CSS,因为每个HTML标记都需要单独设置样式,如果您只使用内联CSS,管理网站可能会变得十分困难。但是,它在某些情况下很有用。例如,在您无法访问CSS文件或仅需要为单个元素应用样式的情况下。

缺点:

  • 定义内联样式需要在每个 HTML 标签中定义 style 属性,很不方便;

  • 在内联样式中使用双引号或单引号时要特别小心,因为 HTML 标签的属性通常都会使用双引号来包裹属性的值,例如

  • 在内联样式中定义的样式不能再其它任何地方重用;

  • 内联样式在后期维护时很不方便,因为一个网站通常有很多页面组成,当修改页面样式时需要对页面逐个修改;

  • 添加过多的内联样式会导致 HTML 文档的体积增大。

2、内嵌样式表

将样式代码写在页面标签之中

Nach dem Login kopieren

标签结构可以位于页面标签中的任何位置,也可以多次出现。通常是将整个结构写在页面的...

部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性,一个页面内部便于复用和维护,但多个页面之间的CSS代码复用仍然不够。

    
  

PHP中文网

//m.sbmmt.com/

Nach dem Login kopieren

2.png

因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部,所以会导致文档的体积变大,而且当有其它文档也需要使用内嵌样式表中同样的样式时,无法引入到其他文档,必须在其它文档中重新定义,会导致代码冗余,不利于后期维护。

3、外部样式表

在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中,之后把CSS文件引入到HTML中使用。

1)、使用link

链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件,然后在页面中通过链接标记链接到页面中,而且该链接语句必须放在页面的标记区。

语法:

Nach dem Login kopieren

对各个属性的说明:

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

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

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

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

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

提示:在 Firefox 浏览器中可以在菜单中选择“查看 --> 页面样式”选项,然后在子菜单中会显示 title 属性值,只需选择不同的 title 属性值,可以有选择地应用需要的样式表文件。IE 浏览器不支持该功能。

另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

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

2)、使用@import

导入式是通过@import

Nach dem Login kopieren

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

简单实例:

css外部样式表 style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}
Nach dem Login kopieren

HTML文档



	
		
		
		
	

	
		

link标签或@import的应用

外部定义CSS样式表以.CSS为扩展名文件,然后在页面中通过link标签或@import链接到页面中。

Nach dem Login kopieren

实现效果:

3.png

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

1、从属关系区别

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3、权重区别

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

4、兼容性区别

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

5、DOM可控性区别

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

说明:

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

(学习视频分享:web前端

Das obige ist der detaillierte Inhalt von在html中css的分为几大类. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!