`

CSS的字体与文本属性详解

    博客分类:
  • CSS
阅读更多

CSS的字体与文本属性详解

font-family

功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。浏览器由前向后选用字体。
  语法:{font-family:字体1,字体2, ... ,字体n}

font-style

功能:使文本显示为扁斜体或斜体等表示强调 。
  数值:
  normal - 正常
  italic - 斜体
  oblique - 偏斜体

font-variant

功能:用于在正常与小型大写字母字体间切换。
  数值:normal - 如果该标志继承父元素的 small-caps 设置,则关键字 normal 将 font-variant 设置为正常字体。
  small-caps - 把小写字母显示为字体较小的大写字母。

font-weight

功能:用于设置字体灰度,生成字体的深,浅版本。
  数值:
  正常灰度 - normal
  相对灰度 - bold, bolder, light, lighter
  梯度灰度 - 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。

font-size

功能:用各种度量单位控制文本字体大小。
  数值:有四种数值方式
  绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large, xx-large。不同字体有不同的数值。
  相对尺寸 - larger, smaller,产生的尺寸是相对于父容器字号而言的。
  长度 - 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。
  百分比 - 相对于其父元素字体大小的百分比。

font

功能:简写属性,提供了对字体所有属性进行设置的快捷方法。
  语法:{font:字体属性1 字体属性2 ... 字体属性n}
  数值:字体属性值为前面已列出的值,此外还可以设置行间距属性 line-height(见文本属性),内容的顺序为:font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性,属性值间用空格分开。

letter-spacing

功能:控制文本元素字母间的间距,所设置的距离适用于整个元素。
  数值:
  normal - 正常间距,将字符间的间距复位为所有字体和字号的正常? 。
  长度 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则?去正常长度。在数字后指定度量单位如下:mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。

line-height

功能:设置元素中文本的行间距。
  数值:
  normal - 正常高度,通常为字体尺寸的 1-1.2倍,这是缺省设置。
  数字 - 设置元素中?行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点,设置line-height为2,则间距20点。
  长度 - 用标准度量单位设置间距,有些是绝对的,有些是相对的,详见letter-spacing中的?明。
  百分比 - 也字体尺寸的百分比设置间距。

text-align

功能:在元素框中水平对齐文本。
  数值:
  left - 左对齐
  right - 右对齐
  center - 居中
  justify - 均匀分布, 生成等长的行

text-decoration

  功能:文本修饰,用于控制文本元素所用的效果,特别适用于引人注意的说明,警告等文本效果。
  数值:
  none - 无文本修饰,缺省设置。
  underline - 下划线。
  overline - 上划线。
  line-through - 删除线。
  blink - 闪烁。
  同一语句中可以组合多个关键字。

text-indent

功能:文本缩排,用于段落的第一行缩排上。
  数值:
  长度 - 设置首行缩排的尺寸为指定度量单位,有些单位是相对的,有些则是绝对的,祥见 letter-spacing 属性的说明部分。
  百分比 - 以行长的百分比设置首行缩排量。

text-transform

功能:设置一个或几个元素的大写标准。
  数值:
  none - 不改变文本的大写小写。
  capitalize - 元素中?个单词的第一个字母用大写。
  uppercase - 将所有文本设置为大写。
  lowercase - 将所有文本设置为小写。

vertical-align

功能:垂直对齐。
  数值:
  baseline - 对准两个元素的小写字母基准线。
  sub - 下标。
  super - 上标。
  top - 顶部对齐。
  text-top - 文本顶对齐。
  middle - 中线对齐。
  bottom - 底线对齐。
  text-bottom - 字母底线对齐。
  百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比,和元素的 line-height 属性组合使用。

word-spacing

功能:控制文本中元素单词间的间距。设置的间距适用于整个元素,不能在某个单词间插入更大或更小的间距。
  数值:
  normal - 正常间距。
  长度 - 如果长度为正,则加进从父元素继承的正常长度,如果是负值,则减去。

分享到:
评论

相关推荐

    CSS之Position详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,以及...

    div+css有实例,易学易懂

    第6 章 CSS 定义文本属性 第123 页 6.1 文本的缩进和对齐 6.1.1 段首缩进 6.1.2 段首字符下沉与大写 6.1.3 文本的对齐 6.1.4 图文混排 6.2 行高与间隔 6.2.1 行高属性详解 6.2.2 利用行高属性使文本垂直居中 6.2.3 ...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、轮廓相关属性 第10章 盒模型与布局相关属性 第11章 表格、列表相关属性及media query 第12章 变形与动画相关属性 第三部分 第...

    CSS3 box-shadow属性实例详解

    CSS3 – 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用: ...

    HTML-CSS-详解资源

    超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息...

    CSS Web安全字体组合详解

    font-family属性是多种字体的名称,作为一个应变制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。 你想要的字体类型如果浏览器找不到,它会从通用的字体类型中...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的...

    详解css3中 text-fill-color属性

    由于text-fill-color是css3的新属性,一说到css3新属性,大家肯定就会问兼容效果如何呢??嘿嘿,只能毫不留情的说,兼容性很差呀,,只适用于webkit内核的浏览器有效果。。很可惜啊!!不过它虽然兼容性差,但是却...

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

    2.6.1 CSS属性与选择符 2.6.2 类型选择符 2.6.3 群组选择符 2.6.4 包含选择符 2.6.5 id及class选择符 2.6.6 标签指定式选择符 2.6.7 组合选择符 2.6.8 伪类及伪对象 2.6.9 通配选择符 2.7 CSS数据单位 2.8 应用CSS到...

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    详解CSS3中常用的样式【基本文本和字体样式】

    摘要:为了使你的网页看上去更美观,在这里你将会看到一些CSS3中常用到的样式。非常适合初学者!大鹏一日同风起,扶摇直上九万里!一起学习,一起进步! 1、字体大小的单位 px (像素):这是一个绝对单位; em :1...

    css常用样式font设置字体的多种变换(实例详解)

    CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体、宋体与微软雅黑这三款字体,通常这样写font-...

    详解使用 CSS 的 font-size-adjust 属性改善网页排版

    CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size ,这可以有效地提高网页文字的可读性。 在这篇文章中,你不仅能了解到font-size-adjust 属性的重要性,并且还能学会如何在你的项目中...

    css中一些常用的font-size字体单位和line-height详解

    px(pixel)像素 相信大家对像素这个名词并不陌生,接下来来介绍下这个单位的...相对于当前对象内文本的字体尺寸.也可以理解为是一个百分比单位, 1em=100%.那么来介绍下在css样式中em呈现的是什么样的效果吧: 如果当前子

    举例详解CSS中的text-shadow文字阴影效果使用

    基础的文本阴影效果: CSS Code复制内容到剪贴板 { text-shadow: 5px 5px 5px #FF0000; }  Eg: CSS Code复制内容到剪贴板 {text-shadow: h-shadow v-shadow blur color;}  附:E即Element,元素的...

    超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程

    48前端开发基础视频-CSS语法及简单CSS属性.avi 49前端开发基础视频-CSS语法案例.avi 50前端开发基础视频-CSS注释.avi 51前端开发基础视频-标签选择器和通配符选择器.avi 52前端开发基础视频-ID选择器.avi 53...

Global site tag (gtag.js) - Google Analytics