css样式表的三种方式是什么

三种方式为:1、行内样式表,使用style属性直接把CSS代码添加到HTML的标记中。2、内部样式表,把css样式写在“”标签中,并用“”标签去声明。3、外部样式表,将css样式写在一个单独的“.css”文件中。

本文操作环境:宏基s40-51、hbuilderx.3.0.5&&css3版、windows10家庭中文版

(学习视频分享:css视频教程)

css样式表有三种方式:

行内样式表

内部样式表

立即学习“前端免费学习笔记(深入)”;

外部样式表

行内样式表

行内样式就是使用style属性直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。

例:

style属性的应用

登录后复制

通过这种方法,可以很简单地对某个元素单独定义样式。

实例:

css样式表的三种方式是什么

内部样式表的优缺点

优点:跟行间样式表相同不会产生额外的请求,且它初步实现了结构与样式的分离,比较适合单页面网站应用。

缺点:由于内部样式表是写在 HTML 文件中的,导致页面不纯净、文件体积大、不利于网络爬虫获取信息、不利于维护、页面之间无法共享样式

外部样式表

如果 CSS 样式被放置在网页文档外部的文件中,则称为外部样式表,一个 CSS 样式表文档就表示一个外部样式表。

实际上,外部样式表也就是一个文本文件,扩展名为.css。当把CSS样式代码复制到一个文本文件中后,另存为.css文件,则它就是一个外部样式表。

如下图所示就是一个外部样式表:

css样式表的三种方式是什么

引入外部样式表的方式:

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

1、CSS链接样式

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

语法:

2、CSS导入式

导入式是通过@import在标签中进行声明的

语法:

  @import url("css文件路径");

简单实例:

5.png

4.png

外部样式表的优缺点

优点:

实现了结构与表现的代码完全分离

方便复用及维护

因为分离到各自独立的文件中,让 HTML 文件大小大幅减少了,从而让页面结构更容易被程序员和网络爬虫读懂

对搜索引擎友好,让搜索引擎给页面评分更高,有利于页面搜索引擎排名

外部样式表在用户首次访问后就被缓存到用户电脑上,下次访问无需加载

缺点:

如果样式很多,CSS 文件会变的很大查找起来不方便。此外,多一个 CSS 文件就多一次 HTTP 请求,在访问量大的网站中会加重服务器压力

更多编程相关知识,请访问:编程入门!!

以上就是css样式表的三种方式是什么的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2881181.html

(0)
上一篇 2025年3月10日 20:00:50
下一篇 2025年3月10日 20:01:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css样式表怎么添加注释

    在css样式表中,可以使用“/* */”符号来添加注释,只需要使用“/*”和“*/”将需要注释的内容包裹即可,语法“/* 注释内容 */”;style标签中css代码,在某些旧版浏览器中还可以使用“”来添加注释。 本教程操作环境:windo…

    2025年3月10日
    200
  • PHP倾斜某字体

    php小编草莓为大家带来了一篇关于如何在网页中使用css倾斜字体的教程。通过简单的css代码,我们可以轻松实现文字的倾斜效果,让页面更加生动有趣。本教程将详细介绍css中的倾斜属性,以及如何在php中应用这些技巧,帮助您打造出独具风格的网页…

    编程技术 2025年2月20日
    200

发表回复

登录后才能评论