css中font系列常见内容

font

  可以一次性定义以下五种属性的值,常见的是前四种。不用所有的都写上,有什么些什么,没有的不写,各个属性值之间用空格。

  说实话,如果能够单独写就单独写,真不知道这样写有什么样的好处,还麻烦

  注意:书写的顺序

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

  另外还有一些别的属性值:主要是应用在一些特殊的应用场景的制定字体,比如下拉列表、按钮、对话框、图标标记、窗口状态栏等等

    

caption 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。

font-family

  定义字体系列,可以有多个值,每个值之间用逗号表示。如果某个值(就是某种字体系列)有多个单词,则这个值要用单引号或者双引号标记

  如:p { font-family:"Times New Roman",Georgia,Serif; };

font-style

  定义字体系列:normal   itallic  oblique

  italic 跟  oblique显示的都是斜体,但是italic是将字的各个部分都发生微妙变化实现,oblique是通过垂直倾斜实现。但是两者在浏览器中显示没有什么差别。

font-weight

  normal   bold(粗体) bolder(更粗) lighter(更细) 100~900(400等同normal,700等同bold)

  注意:bold不是font-style中的,以前老是弄混。

font-size

  字体大小,主要是px跟em单位的区分,目前em还不是分得很清,稍后更新。

font-varient

  normal   small-caps(浏览器会将单词用小型的大写字母显示)

css中font系列常见内容

时间: 2024-11-14 14:11:54

css中font系列常见内容的相关文章

CSS中超出的文本内容显示省略号

首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明: 单行内容操作: 单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 此时,即可看到单行文本超出显示省略号的效果. 多行内容操作: 多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移

CSS中font属性的注意事项

font包含font-style font-variant font-weight font-size/line-height font-family; 在书写font属性时font-style font-variant font-weight 在前,且顺序可以随意排列:font-size/line-height font-family在后,且顺序是固定的:而且font属性的声明中必须要包含font-size font-family这两个属性,否则,整个声明都是无效的. 在使用font声明时,会

css 中font属性知识点总结

一. font属性值可以继承.例如子元素可以继承父元素的行高,字体大小等等. 二.font属性可以进行连写:font: font-sytle  font-weight  font-size/line-height font-family; 三.font连写要注意两点:1.font属性联写中必须有font-size  和 font-family:2.font属性联写中,font-size  必须在font-family 前.

CSS中(font和background)的简写形式

转自:http://blog.csdn.net/shenzhennba/article/details/7356095 1.字体属性主要包括下面几个:font-family(字体族): "Arial"."Times New Roman"."宋体"."黑体"等;font-style(字体样式): normal(正常).italic(斜体)或oblique(倾斜);font-variant (字体变化): normal(正常)或s

css 重新学习系列(2)

摘自: http://www.cnblogs.com/liuzhaoyang/articles/3289456.html Position定位:relative | absolute 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(

CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CSS属性前缀法.选择器前缀法. (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码. 1 <!--[

CSS中的一些内容总结

一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所有子元素继承父元素的属性.但是对子元素的Style做修改后,就会覆盖父元素的属性. 2.派生选择器 通过元素的上下文关系去选择元素,不同级别的元素使用空格隔开即可,表示选择空格前的元素中后代元素为空格后的内容的元素.如: li strong { font-style: italic; font-we

CSS中常见的布局

一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qing-5/p/11442906.html (2)三列布局 https://www.cnblogs.com/qing-5/p/11338819.html (3)圣杯布局和双飞翼布局 相同点: a.三列布局,中间宽度自适应,两边定宽: b.中间栏要在浏览器中优先展示渲染: c.允许任意列的高度最高: d.

CSS系列:CSS中盒子模型

盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中,一个独立的盒子模型由content(内容).border(边框).padding(内边接)和margin(外边距)4个部分组成.