`
feiliboos
  • 浏览: 665587 次
文章分类
社区版块
存档分类
最新评论

CSS2样式表(属性·字体)

 
阅读更多
1、font

语法:
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar

取值:
font-style : CSS1 请参阅 font-style 属性
font-variant : CSS1 请参阅 font-variant 属性
font-weight : CSS1 请参阅 font-weight 属性
font-size : CSS1 请参阅 font-size 属性
line-height : CSS1 请参阅 line-height 属性
font-family : CSS1 请参阅 font-family 属性
caption : CSS2 使用有标题的系统控件的文本字体(如按钮,菜单等)
icon : CSS2 使用图标标签的字体
menu : CSS2 使用菜单的字体
message-box : CSS2 使用信息对话框的文本字体
small-caption : CSS2 使用小控件的字体
status-bar : CSS2 使用窗口状态栏的字体

说明:
设置或检索对象中的文本特性。该属性是复合属性。
默认值为: normal normal normal medium normal "Times New Roman" 。
第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
对于如何使用用户端系统可能没有的字体,可以参阅 @font-face 规则。
对应的脚本特性为 font 。

示例:

p { font: italic small-caps 600 12pts/18pts 宋体; }
p { font: italic small-caps 600 12pts/150% Courier; }
p { font: italic small-caps 600 12pts/1.5 Courier; }
p { font: italic small-caps 600 12pts/18pts Courier; }
p { font: /18pts serif; }
p { font: oblique 100 24pts; }
H1 { font: 15pt/17pt bold "Arial" normal }

2、color

语法:
color : color

取值:
color : 指定颜色。请参阅 颜色单位 和 附录:颜色表

说明:
检索或设置对象的文本颜色。无默认值。
注意,用颜色名称指定 color 不被一些浏览器接受。但使用 RGB 值指定颜色能被所有里浏览器识别并正确显示。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 color 。

示例:

div {color: #345456; }
div { color: rgb(100,14,200); }
div {color: menu; }
div {color: red; }

3、font-family

语法:
font-family : name
font-family :ncursive | fantasy | monospace | serif | sans-serif

取值:
name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列,将提供默认字体序列

说明:
设置或检索用于对象中文本的字体名称序列。默认值为 "Times New Roman" 。
序列可包含嵌入字体字体。请参阅 @font-face 规则。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontFamily 。

示例:

div.fixedwidth { font-family: Courier, "Courier New", monospace }

4、font-size

语法:
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

取值:
xx-small : 绝对字体尺寸。根据对象字体进行调整。最小
x-small : 绝对字体尺寸。根据对象字体进行调整。较小
small : 绝对字体尺寸。根据对象字体进行调整。小
medium : 默认值。绝对字体尺寸。根据对象字体进行调整。正常
large : 绝对字体尺寸。根据对象字体进行调整。大
x-large : 绝对字体尺寸。根据对象字体进行调整。较大
xx-large : 绝对字体尺寸。根据对象字体进行调整。最大
larger : 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算
smaller : 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算
length : 百分数 | 由浮点数字和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅 长度单位

说明:
设置或检索对象中的字体尺寸。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontSize 。

示例:

p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }

5、font-size-adjust

语法:
font-size-adjust : none | number

取值:
none : 默认值。允许字体序列中每一字体遵守它的自己的尺寸
number : 为字体序列中所有字体强迫指定同一尺寸

说明:
设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。
对应的脚本特性为 fontSizeAdjust 。

示例:

p { font-family: arial, courier; font-size-adjust: none; }
p { font-family: verdana, courier; font-size-adjust: .56; }

6、font-stretch

语法:
font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

取值:
normal : 默认值。不应用拉伸变形
narrower : 使用比当前设置的值导致字体宽度更小的值
wider : 使用比当前设置的值导致字体宽度更大的值

说明:
设置或检索用于对象中文本的文字是否横向的拉伸变形。
改变是相对于浏览器显示的字体的正常宽度的。
对应的脚本特性为 fontStretch 。

示例:

p { font-stretch: wider; }
p { font-stretch: ultra-expanded; }

7、font-style

语法:
font-style : normal | italic | oblique

取值:
normal : 默认值。正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用 oblique
oblique : 倾斜的字体

说明:
设置或检索对象中的字体样式。
对于此属性的默认值来说,IE提供了预定义样式。但是你可以在浏览器菜单的 Internet 选项 中更改它。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontStyle 。

示例:

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

8、font-weight

语法:
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

取值:
normal : 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
bold : 粗体。相当于 700 。也相当于 b 对象的作用
bolder : 比 normal >粗
lighter : 比 normal >细
100 : 字体至少像 200 那样细
200 : 字体至少像 100 那样粗,像 300 那样细
300 : 字体至少像 200 那样粗,像 400 那样细
400 : 相当于 normal
500 : 字体至少像 400 那样粗,像 600 那样细
600 : 字体至少像 500 那样粗,像 700 那样细
700 : 相当于 bold
800 : 字体至少像 700 那样粗,像 900 那样细
900 : 字体至少像 800 那样粗

说明:
设置或检索对象中的文本字体的粗细。
作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说,用户可能看不到不同值之间的差异。
IE4.0仅仅支持 normal 和 bold 值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontWeight 。

示例:

span { font-weight:800; }

9、text-decoration

语法:
text-decoration : none || underline || blink || overline || line-through

取值:
none : 默认值。无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线

说明:
检索或设置对象中的文本的装饰。
有 href 特性的 a ,以及 u , ins 对象默认值为 underline 。
对象 strike , s , del ,默认值是 line-through 。
假如 none 值在属性声明的最后,所有的先前的其他取值都会被清除。例如,声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
假如对象没有文本(如 img 元素)或者是空元素(如:<EM></EM>), 此属性不会发生作用。
假如你设置 body 对象的此属性值为 none , a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生,块对象容器最终会受到影响。
在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供,但它不会被作用。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textDecoration 。

示例:

div { text-decoration : underline; }
div { text-decoration : underline overline; }

10、text-underline-position

语法:
text-underline-position : below | above

取值:
below : 默认值。在文本下面
above : 在文本上面

说明:
设置或检索 text-decoration 属性定义的下划线的位置。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textUnderlinePosition 。

示例:

p { text-underline-position: above; text-decoration: underline; }

11、text-shadow

语法:
text-shadow : color || length || length || opacity

取值:
color : 指定颜色。请参阅 颜色单位 和 附录:颜色表
length : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。请参阅 长度单位
length : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。请参阅 长度单位
opacity : 由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位

说明:
设置或检索对象中文本的文字是否有阴影及模糊效果。
可以设定多组效果,方式是用逗号隔开。
可以被用于伪类 :first-letter 和 :first-line 。
对应的脚本特性为 textShadow 。

示例:

p { text-underline-position: above; text-decoration: underline; }

12、font-variant

语法:
font-variant : normal | small-caps

取值:
normal : 默认值。正常的字体
small-caps : 小型的大写字母字体

说明:
设置或检索对象中的文本是否为小型的大写字母。
IE4.0将此属性的 small-caps 处理为大写字母的较小尺寸。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 fontVariant 。

示例:

span { font-variant: small-caps; }

13、text-transform

语法:
text-transform : none | capitalize | uppercase | lowercase

取值:
none : 默认值。无转换发生
capitalize : 将每个单词的第一个字母转换成大写,其余无转换发生
uppercase : 转换成大写
lowercase : 转换成小写

说明:
检索或设置对象中的文本的大小写。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textTransform 。

示例:

div { text-transform : uppercase; }

14、line-height

语法:
line-height : normal | length

取值:
normal : 默认值。默认行高
length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅 长度单位

说明:
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。
假如一个格式化的行包括不止一个对象,则最大行高会被应用。在这种情况下,此属性不可以为负值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 lineHeight 。

示例:

div {line-height:6px; }
div {line-height:10.5; }

15、letter-spacing

语法:
letter-spacing : normal | length
取值:
normal : 默认值。默认间隔
length : 由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

说明:
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
字符间距会受对齐调整影响。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 letterSpacing 。

示例:

div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

16、word-spacing

语法:
word-spacing : normal | length

取值:
normal : 默认值。默认间隔
length : 由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

说明:
检索或设置对象中的单词之间插入的空隔。
对于IE4+而言仅在MAC平台上可用。对于其他系统平台的支持由IE6开始。
单词间距会受对齐调整影响。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordSpacing 。
示例:

div { word-spacing : 10; }
div { word-spacing : 10px; }


分享到:
评论

相关推荐

    css(样式表属性)

    布局、字体、颜色、背景和其它效果实现更加精确的控制

    css层叠样式表/属性/字体/背景/列表/文本/表格/边框

    css层叠样式表/字体/背景/列表/文本/表格/边框/各属性设置

    CSS3样式表-字体、文本、背景属性.pptx

    单元2-3 字体、文本、背景属性;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;字体属性 font font-family font-size font-style font-variant font-weight @font-face 文本属性 color direction line-height letter-spacing text-...

    CSS 层叠样式表css_handbook

    div+css 字体属性 字体族科 字体风格 字体变形 字体加粗 字体大小 字体 颜色及背景属性 颜色 背景颜色 背景图象 背景重复 背景附件 背景位置 背景 文本属性 文字间隔 字母间隔 文字修饰 纵向排列 ...

    CSS2 (Chinese).zip

    本规范定义了第2级层叠样式表(CSS2)。CSS2是一种样式表语言,作者和用户可以使用它将样式(如:字体,间距及语音提示等)附加到结构化的文档(如:HTML文档和XML应用)中。由于CSS2将文档呈现的样式和文档的内容...

    CSS常用属性一览表

    包含常用的css属性,层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还...

    CSSPeeper可视觉化网站CSS样式表

    CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件 CSSPeeper插件使用方法 1.CSS Peeper插件的安装方法非常简单,在本站或者官网都可以下载CSS Peeper插件,离线安装CSS Peeper插件的方法参照:...

    css字体样式(Font Style) 属性

    {font-family:"字体1","字体2","字体3",…} 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} 4 字体风格 {font-style:inherit|italic|...

    reset.css 重置浏览器标签的样式表

    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现...

    CSS基础入门总结(很详细的哟)

    一、CSS语法规范 二、CSS选择器 (1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 ...(2)内部样式表 (3)外部样式表 六、CSS的综合案例

    leccion-03-css:级联样式表(CSS)

    级联样式表(CSS) (级联样式表)是一种图形设计语言,用于描述以标记语言(例如HTML)编写的文档的表示形式。 它允许您指定设计方面,例如颜色,字体和大小,边距,对齐方式以及许多其他方面。 CSS允许您将演示...

    css 即Cascading Style Sheets(层叠样式表) 基础教程

    第一章 CSS简介 第二章 CSS入门例子 第三章 CSS语法 第四章 CSS颜色 第五章 CSS背景 第六章 CSS文本 第七章 CSS字体 第八章 CSS边框 第九章 CSS边外补白 第十章 CSS边内补白 第十一章 CSS属性索引

    css样式表汇总新手专用

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: ...

    div+css有实例,易学易懂

    3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么...

    CSS速查手册(简要列表描述常见的样式表)

    CSS速查手册,其中列出背景属性、边框属性、文本属性、字体属性、外边距属性、内边距属性、列表属性、内容生成、尺寸属性、定位属性、 打印属性、伪类等

    CSS.rar_css_word 样式

    介绍:一、 什么是层叠样式表二、 如何建立样式三、 将层叠样式单放在何处四、 创建并引用样式类五、 字体属性六、 字体与文本属性七、 颜色与图像属性八、 边框属性九、 滚动条属性十.方块属性,十一、 其它属性,十二...

    前端领域使用html/css实现一个跳动的爱心+祝福语

    它被用作描述网页内容的标记语言,可以嵌入图像、链接、音频、视频等其他资源,并通过样式表和脚本实现网页的布局和交互功能。...CSS样式表有三种类型:外部链接的样式表、内部样式表、内嵌样式表。

    css2中文手册 学习css的必选

    CSS Properties Reference 样式表属性 字体 Font font color font-family font-size font-size-adjust font-stretch font-style font-weight text-decoration text-underline-position text-shadow font-...

Global site tag (gtag.js) - Google Analytics