您现在的位置是:网站首页> 编程资料编程资料
CSS属性简写和选择器的优先级问题 CSS属性简写整理CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2023-10-23
192人已围观
简介 这篇文章主要介绍了CSS属性简写和选择器的优先级问题,是CSS入门学习中的基础知识,需要的朋友可以参考下
几个常用 CSS 属性的简短写法
精简 CSS 代码有很多种方法,但其中最常用的方法可能就是使用属性的简短形式。
具有简短写法的 CSS 属性很多,但是常用的属性无外乎字体、列表、背景、边框、透明等几种,所以在此对这几种属性的简短写法做个归纳,备忘。
font 属性
font 属性涉及到字体、字号、行高等好几个属性,使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义,但是一般来说 font-size 和 font-family 是必不可少的,以下是 font 的几个属性与其对应的默认值:
- /* font 各属性与默认值 */
- font-variant: normal;
- line-height: normal;
- font-family: varies;
- font-weight: normal;
- font-style: normal;
- font-size: medium;
以上 6 个属性可以合并成一行,根据 W3C 规范,各属性前后排列顺序依次为:
- /* 字体各属性前后顺序 */
- font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
再看以下几个示例:
- font: 14px Georgia, serif;
- font: 14px/1.4 Georgia, serif;
- font: italic lighter 14px/1.4 Georgia, serif;
- font: italic small-caps lighter 14px/1.4 Georgia, serif;
可以看到,一行代码就可以代替一段代码,而且看起来还更优雅一些,就是单独查找某个属性的时候有点不太方便,看着眼花。
list 属性
list 有三个属性,这三个属性分别定义:type、image 和 position,它们的属性名和默认值分别如下:
- list-style-type: disc;
- list-style-image: none;
- list-style-position: outside;
list 只有三个属性,并不复杂,但是我们仍然可以将这三个属性合并为在一行中,根据 W3C 规范,写法如下:
- /* list 属性简短写法 */
- list-style: [list-style-type] [list-style-position] [list-style-image];
- /* 示例 */
- list-style: none;
- list-style: disc;
- list-style: disc outside;
- list-style: disc outside url(bg.png);
一如既往的简单,基本上就是简写了 list 属性的名称,然后按顺序排列一下属性的值即可。
background 属性
很多样式表中都会多次定义 background 属性,每次都要重复其 5 个属性的话,那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值:
- /* background 的各属性及其默认值 */
- background-attachment: scroll;
- background-color: transparent;
- background-position: top left;
- background-repeat: repeat;
- background-image: none;
根据 W3C 规范,将其 5 个属性合并起来的写法如下:
- /* background 属性简短写法 */
- background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
- /* 示例 */
- background: #777;
- background: url(images/bg.png) 0 0;
- background: #777 url(images/bg.png) repeat-x 0 0;
- background: #777 url(images/bg.png) repeat-x fixed 0 0;
对于 background 简短写法而言,不同的标签的使用方法和效果都有一些细微差别,欲知详情者,请至官方文档查看。
border 属性
border 属性更为简单,它 3 个属性以及默认值如下:
- /* border 各属性及其默认值 */
- border-width
提示: 本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- 天天酷跑金枪小帅满级加成是多少? 满级多少级_手机游戏_游戏攻略_
- 天天酷跑双枪小帅最高多少级? 满级属性_手机游戏_游戏攻略_
- 天天酷跑满级猫小萌60级属性_手机游戏_游戏攻略_
- 天天酷跑梦幻神马满级90级属性是多少?_手机游戏_游戏攻略_
- 天天酷跑暗影战车满级属性?_手机游戏_游戏攻略_
- 天天酷跑新版本积分抽奖技巧_审判女王抽奖获得方法推荐_手机游戏_游戏攻略_
- 天天酷跑新版本刷分攻略_更新版火焰地图高分不作弊教程推荐_手机游戏_游戏攻略_
- 天天酷跑刷分攻略_天天酷跑wpe封包刷分刷金币教程推荐_手机游戏_游戏攻略_
- 天天酷跑刷分攻略_天天酷跑更新版积分抽奖奖励汇总_手机游戏_游戏攻略_
- 天天酷跑刷钻石神器 无异常无封号危险_手机游戏_游戏攻略_
点击排行
本栏推荐
