css样式有哪几种类型

CSS样式有三种类型:1、行内样式(内嵌样式),使用style属性直接把CSS代码添加到HTML的标记中;2、内部样式(内联样式),把css样式写在style标签中;3、外部样式(外联样式),将css样式写在一个单独的“.css”文件内。

css样式有哪几种类型

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

CSS样式主要包含以下三种类型:

1、行内样式(内嵌样式):结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中。

例:

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

标记>

登录后复制

优点:

没有了样式表文件,在某些时候可以提升效率;

使用 style 属性的样式效果会最强,会覆盖掉其他引入方式的相同样式效果。

缺点:

多个元素难以共享样式,不利于代码复用;

HTML 和 CSS 代码混杂,不利于程序员和搜索引擎阅读。

2、内部样式(内联样式):写在HTML页面内部,存放于head标记当中,样式写在style标记内。

例:

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

选择器 {属性名:属性值;属性名:属性值;......}

登录后复制

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

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

3、外部样式(外联样式):写在css文件内。

然后在页面中通过链接标记链接到页面中,而且该链接语句必须放在页面的

标记区。

例:

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


登录后复制

优点:

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

方便复用及维护

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

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

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

缺点:

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

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

以上就是css样式有哪几种类型的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月11日 23:52:04
下一篇 2025年3月11日 23:52:18

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

相关推荐

  • css定位方式有哪几种

    css定位方式有5种:1、浮动定位(float)。2、static(静态定位);没有定位,元素出现在正常的流中。3、relative(相对定位);元素脱离正常的文档流。4、absolute(绝对定位)。5、fixed(固定定位)。 本教程操…

    2025年3月11日
    100
  • div css怎么实现显示隐藏

    css实现div显示隐藏的方法:1、使用CSS的display属性来隐藏或显示div;2、使用CSS的visibility属性来隐藏或显示div即可。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell …

    2025年3月11日
    200
  • css字体如何加粗

    css字体加粗的方法:首先创建一个HTML示例文件;然后在body中定义一些p标签,并创建一些文字内容;最后通过给字体添加“font-weight”属性来实现加粗效果即可。 本文操作环境:windows7系统、HTML5&&…

    2025年3月11日
    200
  • css怎么设置微软雅黑

    css设置微软雅黑的方法:首先创建一个HTML示例文件;然后在body添加p标签;最后给文字添加“font-family:”Microsoft YaHei”,微软雅黑;”属性即可将其设置为微软雅黑。 本文操作环境:w…

    2025年3月11日
    200
  • css li的点怎么去掉

    css去掉li的点的方法:1、通过“”方式去除;2、通过“li{list-style-type:none;}”方式去除;3、通过设置none值去除。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G…

    2025年3月11日
    200
  • css怎么隐藏li

    css隐藏li的方法:首先新建一个html文件;然后使用ul标签和li标签创建一个项目列表;接着创建一个类名为yc的样式;最后在yc样式内,将display属性设置为none即可隐藏li标签。 本文操作环境:windows7系统、HTML5…

    2025年3月11日 编程技术
    200
  • css不可能实现的功能是什么

    css不可能实现的功能是“兼容所有的浏览器”,因为不同版本的浏览器所支持的CSS版本不一样,所以CSS并不能兼容所有的浏览器。 本文操作环境:windows7系统、CSS3版、Dell G3电脑。 CSS样式表不可能实现“兼容所有的浏览器”…

    2025年3月11日
    200
  • css怎么排除第一个子元素

    css排除第一个子元素的方法:1、通过使用伪类选择器“:not”实现排除;2、通过使用“nth-of-type”或者“nth-child”实现排除;3、通过使用“+”或者“~”兄弟选择符实现获取排除第一个之外的子元素。 本文操作环境:win…

    2025年3月11日
    200
  • css如何设置黑体

    css设置黑体的方法:首先创建一个HTML示例文件;然后在body中创建文字内容;最后通过给指定文字添加“font-family:黑体;”属性即可将其设置成黑体。 本文操作环境:windows7系统、HTML5&&CSS3版…

    2025年3月11日
    200
  • css怎么设置不显示文字

    css设置不显示文字的方法:1、使用text-indent属性;2、使用line-height属性;3、通过span+display属性;4、通过display:none;5、通过overflow:hidden;6、通过positon属性。…

    2025年3月11日
    200

发表回复

登录后才能评论