你一定要知道的css属性值规范

你一定要知道的css属性值规范

1、如果值是0,通常都不用带单位

例如:

.list{    border: 1px solid 0px;    margin: 0px;}

登录后复制

改成:

.list{    border: 1px solid 0;    margin: 0;}

登录后复制

但是有个特例,就是和时间有关的时间单位都要带上秒s,如下两个都是不合法的:

transition-duration: 0;transition: transform 0 linear;

登录后复制

2、色值用十六进制,少用rgb

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

如下:

color: rgb(80, 80, 80);

登录后复制

改成:

color: #505050;

登录后复制

因为使用rgb是一个函数,它还要计算一下转换。如果是带有透明度的再用rgba。

如果色值的六个数字一样,那么写3个就好:

color: #ccc;

登录后复制

3、注意border none和0的区别

如下两个意思一样:

border: 0;border-width: 0;

登录后复制

而下面这两个一样:

border: none;border-style: none;

登录后复制

所以用0和none都可以去掉边框。

虽然打包工具最后会帮我们处理,但保持一个良好的书写习惯还是很重要的。

推荐教程:css快速入门

以上就是你一定要知道的css属性值规范的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月10日 20:42:51
下一篇 2025年2月25日 06:57:40

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

相关推荐

  • 纯css实现加号“+”效果(代码示例)

    本篇文章来给大家通过代码示例介绍一下使用纯css实现加号“+”效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 实现下图的加号效果: 若想实现这个效果, 只需一个div元素即可搞定。 立即学习“前端免费学习笔记(…

    2025年3月10日 编程技术
    200
  • 为什么不建议使用@import引入css

    不建议使用@import主要有以下两点原因: 原因一、使用@import引入CSS会影响浏览器的并行下载 使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载…

    2025年3月10日
    200
  • CSS 预处理器

    CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL(Domain Specific Language),来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复…

    2025年3月10日
    200
  • 使用CSS实现皮卡丘

    前言 当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,如下图。 准备工作 在开始写皮卡丘之前,我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网…

    2025年3月10日 编程技术
    200
  • 使用 CSS 实现一个简单的骨架屏(Skeleton Screen)

    前言 在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用skeleton screen占位。相比与loading动画,skeleton screen的效果要更生动,实现起来来也很简单。利用css就可以实现…

    2025年3月10日 编程技术
    200
  • CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)

    本文目标: 1、掌握css中结构性伪类选择器—nth-of-type的用法 问题: 1、实现以下自定义导航菜单,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-of-type 附加说明: 1、导航宽800px,高90px,居中显示…

    2025年3月10日 编程技术
    200
  • css选择器有哪些?哪些属性是可以继承的?

    css选择器: id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[r…

    2025年3月10日
    200
  • 如何合理使用CSS框架?

    现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息,它们同样也可以拥有有趣的动画、多样的布局和互…

    2025年3月10日
    200
  • 如何实现css代码复用

    如何实现css代码复用? (推荐学习:css快速入门) 建议如下: 1、在做CSS项目规划时,首先写好reset类代码; 因为浏览器对于标签是有默认样式的。 立即学习“前端免费学习笔记(深入)”; 2、划分CSS原子类; 一个大型的项目,会…

    2025年3月10日
    200
  • CSS 实现拖拽改变布局大小

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 推荐视频教程:《CSS视频教程-玉女心经版》 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scroll…

    2025年3月10日 编程技术
    200

发表回复

登录后才能评论