CSS的三种样式形式?

CSS的三种样式形式?

CSS的三种样式形式?

1、内联式,是把css代码直接写在现有的HTML标签中;

这里文字是红色。

登录后复制

2、嵌入式,是把css样式代码写在“style”标签之间;

span{color:red;}

登录后复制

3、外联式,是把css代码写一个单独的外部文件中,通过“link”标签引入。

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


登录后复制

CSS的特点

丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

推荐教程:《PHP》

以上就是CSS的三种样式形式?的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月10日 20:35:41
下一篇 2025年3月10日 20:35:50

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

相关推荐

  • 如何建立纯css的滑块

    可以使用 max-height 属性来建立纯 css 的滑块。 (推荐教程:css快速入门) 属性介绍: max-height 属性设置元素的最大高度。max-height属性不包括填充,边框,或页边距! 代码实现: 立即学习“前端免费学习…

    2025年3月10日
    000
  • 纯CSS如何实现3D书本效果?(代码示例)

    本篇文章给大家通过代码示例介绍css实现3d书本效果,代码简单易懂。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 话不多说,先来看一下效果图 源代码如下 nbsp;html>            Document…

    2025年3月10日
    200
  • 详解CSS中的选择器和优先级

    CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 1、内联样式表的权值最高 () 权值为1000 2、统计选择符中的ID属性个数。(#id) 权值为100 …

    2025年3月10日
    200
  • css中有哪些常见的布局方式

    常见的几种布局方式: (推荐教程:css快速入门) 固定布局 流式布局(自适应布局) 弹性布局(伸缩布局) 立即学习“前端免费学习笔记(深入)”; 定位布局 浮动布局 响应式布局(媒体查询) 固定布局的固定说的是盒子的宽高都是固定的。mar…

    2025年3月10日
    200
  • css中的display属性有哪些值?各有什么作用?

    display属性值介绍: (推荐教程:css快速入门) none    此元素不会被显示。     block    此元素将显示为块级元素,此元素前后会带有换行符。     inline    默认。此元素会被显示为内联元素,元素前后没…

    2025年3月10日
    200
  • 前端常见css的面试题目

    随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。在此,分享自己在前端领域中积累的一些经验,供自己温故知新。   对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5…

    2025年3月10日
    200
  • 谈谈CSS实现水平垂直居中布局的方法

    最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。 首先先说明一下html和一些基础css样式,下面就不再赘述!html 垂直水平居中 登录…

    2025年3月10日
    200
  • 在html元素中设置css样式的方式是什么

    如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置”id” 和 “class”选择器。 (推荐教程:CSS教程) 下面我们来分别说一下id选择器和class选择器。 id选择…

    2025年3月10日
    200
  • css如何设置透明度不会影响子元素

    通过RGBA设置透明度,只有最新的浏览器支持,支持IE9+,可通过RGBA的alpha通道的方式设定。 (推荐教程:CSS教程)  显示文字   登录后复制 前三个值是rgb的颜色值,最后一个透明度的值,取值为0~1,值越小越透明。 兼容所…

    2025年3月10日
    200
  • css怎样实现DIV高度自适应

    可以添加表格特性。 (推荐教程:CSS教程) 父级元素添加属性  display: table; 子一级元素添加属性 display: table-cell; 立即学习“前端免费学习笔记(深入)”; 代码:          .div-ro…

    2025年3月10日
    200

发表回复

登录后才能评论