`
RonQi
  • 浏览: 92371 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS中Font语法的缩写

阅读更多

今天同事提了一个问题,说看到一段css代码,大概如下

font: 300 15px/1.65 arial,sans-serif;

 对于前面的300和15px/1.65不理解,难道是除法的意思?

 

上网搜索,在W3School 这里没有找到详细语法,后在一些问答类帖子中找到了答案SOSO问问

答案如下:

写道
字体大小和行高的缩写,分开:font-size:12px;line-height:36px;

 也就是“/”前的为字体大小,后面的为行高,例子中应该是1.65倍的意思,这是一种css的缩写语法(哎,css方面还真是白~~)

 

再后来在一本《CSS权威指南》中找到了详细的答案,摘录如下

《CSS权威指南》p127 写道
font

值:[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-var | inherit
初始值: 根据单个属性
应用于: 所有元素
继承性: 有
百分数: 对于<font-size>要相对于父元素来计算;对于<line-height>则相对于元素的<font-size>来计算
计算值: 见单个属性(font-style等)

 此外,font的前三个值允许采用任意的顺序,后两个值要严格按此顺序(font-size在前,font-family在后),而且font声明中必须有这两个值。

另外就是可以在font-size后面使用 / 增加line-height属性,这是可选的。

 

最后说一下前面的300,这个是font-weight属性,参考如下

 W3School 写道
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。

此外可以使用数字:100,200,300...900
数字含义:定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
 

 

 

 

 

分享到:
评论

相关推荐

    css通用缩写语法总结(font字体篇)

    font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下: font:font-style font-variant font-weight font-size line-height font-family

    css中文参考手册

    草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...

    CSS 3.0 中文参考手册

    CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 以前手册难点: 中文资料少,对英文翻译功底要求较高; 基础语法要求...

    CSS3.0中文参考手册

    CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 手册难点: 中文资料少,对英文翻译功底要求较高; 基础语法要求...

    CSS 3.0 中文参考手册,层叠样式表下载.rar

    草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...

    CSS网站布局实录 (第二版)PDF版

    6.5.1 font字体缩写 6.5.2 margin与padding边距缩写 6.5.3 border边框缩写 6.5.4 list列表缩写 6.5.5 background背景缩写 6.5.6 color颜色缩写 6.6 CSS代码优化 6.6.1 增加代码重用率 6.6.2 使用样式覆盖进行简化 ...

    CSS 3.0 参考手册压缩文件 放心非病毒

    CSS 3.0 参考手册:CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 手册难点: 中文资料少,对英文翻译功底要求较高; 基础...

    CSS 参考手册中文版 3.0

    CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 手册难点 中文资料少,对英文翻译功底要求较高; 基础语法要求字斟句酌,...

    常用的CSS缩写语法小结可帮助你减少CSS文件大小

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:  颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:  #000000可以缩写为#000;#336699可以缩写为#369;  盒尺寸 ...

    css入门笔记

    独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    css3中使用calc()函数计算宽高

    简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等. calc()语法 calc的语法就是简单的四则运算 ...

    CSS3 Calc实现滚动条出现页面不跳动问题

    其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    HTML开发王

    5.1.2 用于缩写的短语元素(abbr元素、acronym元素) 5.1.3 其他的短语元素(dfn、code、samp、kbd、var) 5.1.4 引用(blockquote元素、q元素) 5.1.5 下标和上标(sub元素、sup元素) 5.2 行和段落 5.2.1 段落(p元素) ...

Global site tag (gtag.js) - Google Analytics