百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

CSS简写指南 css简介

zhezhongyun 2024-12-19 17:50 42 浏览

高效的CSS写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。

色彩缩写

色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个:

color:#113366  

可以简写为

color:#136  

所有用到16进制色彩值的地方都可以使用简写,比如background-color、border-color、text-shadow、box-shadow等。

盒子大小

这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:

margin-top:1px;  
margin-right:1px;  
margin-botton:1px;  
margin-left:1px;  

这四个值可以缩写到一起:

margin:1px 1px 1px 1px;  


缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同,则可以省掉:

margin:1px;//四个方向的边距相同,等同于margin:1px 1px 1px 1px;  
margin:1px 2px;//上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px  
margin:1px 2px 3px;//右边距和左边距相同,等同于margin:1px 2px 3px 2px;  
margin:1px 2px 1px 3px;//注意,这里虽然上下边距都为1px,但是这里不能缩写。

边框(border)

border是个比较灵活的属性,它有border-width、border-style、border-color三个子属性。

border-width:数字+单位;

border-style:none||hidden||dashed||dotted||double||groove||inset||outset||ridge||solid;

border-color: 颜色 ;

它可以按照width、style和color的顺序简写:

border:5px solid #369;  

有的时候,border可以写的更简单些,有些值可以省掉,但是请注意哪些是必须的,你也可以测试一下:

border:groove red; //大家猜猜这个边框的宽度是多少?  
border:solid; //这会是什么样子?  
border:5px; //这样可以吗?  
border:5px red; //这样可以吗??  
border:red; //这样可以吗???  

通过上面的代码可以了解到,border默认的宽度是3px,默认的色彩是black——黑色。默认的颜色是该规则中的color属性的值,而color默认是黑色的(多谢 @birdstudio的提醒 )。border的缩写中border-style是必须的。

同时,还可以对每条边采用缩写:

border-top:4px solid #333;  
border-right:3px solid #666;  
border-bottom:3px solid #666;  
border-left:4px solid #333;  

还可以对每个属性采用缩写:

border-width:1px 2px 3px; //最多可用四个值,缩写规则类似盒子大小的缩写,下同  
border-style:solid dashed dotted groove;  
border-color:red blue white black;  

outline

outline类似border,不同的是border会影响盒模型,而outline不会。

outline-width:数字+单位;

outline-style:none||dashed||dotted||double||groove||inset||outset||ridge||solid;

outline-color: 颜色 ;

可以缩写为:

outline:1px solid red; 

同样,outline的简写中,outline-style也是必须的,另外两个值则可选,默认值和border相同。

背景(background)

background是最常用的简写之一,它包含以下属性:

background-color:color||#hex||RGB(%||0-255)||RGBa;

background-image:url();background-repeat:repeat||repeat-x||repeat-y||no-repeat;

background-position:X Y|| (top||bottom||center) (left||right||center);

background-attachment:scroll||fixed;

background的简写可以大大的提高css的效率:

background:#fff url(img.png) no-repeat 0 0;  

background的简写也有些默认值:

background:transparent none repeat scroll top left ; 

background属性的值不会继承,你可以只声明其中的一个,其它的值会被应用默认的。

font

font简写也是使用最多的一个,它也是书写高效的CSS的方法之一。

font包含以下属性:

font-style:normal||italic||oblique;

font-variant:normal||small-caps;

font-weight:normal||bold||bolder|| ||lighter|| (100-900);

font-size: (number+unit) || (xx-small-xx-large);

line-height:normal|| (number+unit);

font-family:name,"more names";

font的各个属性也都有默认值,记住这些默认值相对来说比较重要:

font-style: normal;  
font-variant:normal;  
font-weight: normal;  
font-size: inherit;  
line-height: normal;  
font-family:inherit;  

事实上,font的简写是这些简写中最需要小心的一个,稍有疏忽就会造成一些意想不到的后果,所以,很多人并不赞成使用font缩写。

不过这里正好有个小手册,相信会让你更好的理解font的简写:

列表样式

可能大家用的最多的一条关于列表的属性就是:

list-style:none  

它会清除所有默认的列表样式,比如数字或者圆点。

list-style也有三个属性:

list-style-type:none||disc||circle||square||decimal||lower-alpha||upper-alpha||lower-roman||upper-roman

list-style-position:inside||outside||inherit

list-style-image: (url) ||none||inherit

list-style的默认属性如下:

list-style:disc outside none  

需要注意的是,如果list-tyle中定义了图片,那么图片的优先级要比list-style-type高,比如:

list-style:circle inside url(../img.gif)  

这个例子中,如果img.gif存在,则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式,感兴趣的同学可以参考一下:https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)

border-radius是css3中新加入的属性,用来实现圆角边框。这个属性目前不好的一点儿是,各个浏览器对它的支持不同,IE尚不支持,Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是,如果单个角的border-radius属性的写法在这两个浏览器的差异更大,你要书写大量的私有属性:

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;  
border-top-left-radius:6px;  
border-top-right-radius:6px; 

这个例子中,如果img.gif存在,则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样式,感兴趣的同学可以参考一下:https://developer.mozilla.org/en/CSS/list-style-type

border-radius(圆角半径)

border-radius是css3中新加入的属性,用来实现圆角边框。这个属性目前不好的一点儿是,各个浏览器对它的支持不同,IE尚不支持,Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是,如果单个角的border-radius属性的写法在这两个浏览器的差异更大,你要书写大量的私有属性:

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px; 
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px; 
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;  
border-top-left-radius:6px;  
border-top-right-radius:6px;  

呃,是不是你已经看的眼花了?这只是要实现左上角不是圆角,其它三个角都是圆角的情况。所以对于border-radius,强烈建议使用缩写:

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px; 
border-radius:0 6px 6px;

这样就简单了很多。PS:不幸的是,最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)

就总结这么多,还有其它的可以缩写的属性吗?欢迎大家提出一起讨论。

参考资源

常用CSS缩写语法总结:

www.w3cn.org/article/tips/2005/103.html

CSS Shorthand Guide

Efficient CSS with shorthand properties

Mozilla Developer Center:CSS Reference

CSS Font Shorthand Property Cheat Sheet

相关推荐

一篇文章带你了解SVG 渐变知识(svg动画效果)

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型:(Linear,Radial)。一、SVG线性渐变<linearGradie...

Vue3 实战指南:15 个高效组件开发技巧解析

Vue.js作为一款流行的JavaScript框架,在前端开发领域占据着重要地位。Vue3的发布,更是带来了诸多令人兴奋的新特性和改进,让开发者能够更高效地构建应用程序。今天,我们就来深入探讨...

CSS渲染性能优化(低阻抗喷油器阻值一般为多少欧)

在当今快节奏的互联网环境中,网页加载速度直接影响用户体验和业务转化率。页面加载时间每增加100毫秒,就会导致显著的流量和收入损失。作为前端开发的重要组成部分,CSS的渲染性能优化不容忽视。为什么CSS...

前端面试题-Vue 项目中,你做过哪些性能优化?

在Vue项目中,以下是我在生产环境中实践过且用户反馈较好的性能优化方案,整理为分类要点:一、代码层面优化1.代码分割与懒加载路由懒加载:使用`()=>import()`动态导入组件,结...

如何通过JavaScript判断Web页面按钮是否置灰?

在JavaScript语言中判断Web页面按钮是否置灰(禁用状态),可以通过以下几种方式实现,其具体情形取决于按钮的禁用方式(原生disabled属性或CSS样式控制):一、检查原生dis...

「图片显示移植-1」 尝试用opengl/GLFW显示图片

GLFW【https://www.glfw.org】调用了opengl来做图形的显示。我最近需要用opengl来显示图像,不能使用opencv等库。看了一个glfw的官网,里面有github:http...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...

ae基础知识(二)(ae必学知识)

hi,大家好,我今天要给大家继续分享的还是ae的基础知识,今天主要分享的就是关于ae的路径文字制作步骤(时间关系没有截图)、动态文字的制作知识、以及ae特效的扭曲的一些基本操作。最后再次复习一下ae的...

YSLOW性能测试前端调优23大规则(二十一)---避免过滤器

AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性,主要是为了解决半透明真彩色的PNG显示问题。AlphalmageLoader的语法如下:filter:progid:DX...

Chrome浏览器的渲染流程详解(chrome预览)

我们来详细介绍一下浏览器的**渲染流程**。渲染流程是浏览器将从网络获取到的HTML、CSS和JavaScript文件,最终转化为用户屏幕上可见的、可交互的像素画面的过程。它是一个复杂但高度优...

在 WordPress 中如何设置背景色透明度?

最近开始写一些WordPress专业的知识,阅读数奇低,然后我发一些微信昵称技巧,又说我天天发这些小学生爱玩的玩意,写点文章真不容易。那我两天发点专业的东西,两天发点小学生的东西,剩下三天我看着办...

manim 数学动画之旅--图形样式(数学图形绘制)

manim绘制图形时,除了上一节提到的那些必需的参数,还有一些可选的参数,这些参数可以控制图形显示的样式。绘制各类基本图形(点,线,圆,多边形等)时,每个图形都有自己的默认的样式,比如上一节的图形,...

Web页面如此耗电!到了某种程度,会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的...

11.mxGraph的mxCell和Styles样式(graph style)

3.1.3mxCell[翻译]mxCell是顶点和边的单元对象。mxCell复制了模型中可用的许多功能。使用上的关键区别是,使用模型方法会创建适当的事件通知和撤销,而使用单元进行更改时没有更改记...

按钮重复点击:这“简单”问题,为何难住大半面试者与开发者?

在前端开发中,按钮重复点击是一个看似不起眼,实则非常普遍且容易引发线上事故的问题。想象一下:提交表单时,因为网络卡顿或手抖,重复点击导致后端创建了多条冗余数据…这些场景不仅影响用户体验,更可能造成实...