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 样式表中一个非常重要的属性,它可以确定文本的字体、大小和样式。常见的字体有: * serif:衬线字体 * sans-serif:无衬线字体 * monospace:等宽字体 设 定 字 号 字号是 CSS 样式表中一个非常重要的...
布局、字体、颜色、背景和其它效果实现更加精确的控制
CSS样式表快速查询 CSS(Cascading Style Sheets),即层叠样式表,是一种用于控制网页样式和布局的标记语言。它可以将网页的内容和样式分离,使得网页的布局和样式变得更加灵活和可维护。 文本属性 CSS中文本...
《CSS层叠样式表技术手册》是一本详细阐述CSS技术的手册,旨在帮助网页开发者理解和应用CSS进行网页设计。CSS,即层叠样式表,是一种用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的样式语言。其...
css层叠样式表/字体/背景/列表/文本/表格/边框/各属性设置
单元2-3 字体、文本、背景属性;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;字体属性 font font-family font-size font-style font-variant font-weight @font-face 文本属性 color direction line-height letter-spacing text-...
本文将深入探讨如何学习和运用CSS样式表。 首先,我们可以将CSS样式表分为四种主要的使用方式: 1. **链入外部样式表**:这是最常见的方式,通过`<link>`标签在HTML文件的`<head>`部分引用一个`.css`文件。这样做...
【CSS样式表】是网页设计中的重要组成部分,全称为Cascading Style Sheets,它用于分离网页内容(HTML或XML等)与表现样式。通过CSS,我们可以精确地控制网页元素的布局、字体、颜色、背景、边框以及定位,实现更...
**CSS样式表详解** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是增强对网页内容的控制,使得内容和表现分离,提高了网页设计的...
2. 熟练使用网页编辑工具,例如Dreamweaver或Visual Studio Code等,它们通常具有内置的CSS支持,可以方便地创建和编辑样式表。 3. 通过实践大量编写CSS和HTML,加深对CSS工作原理的理解。 CSS的设置方式有四种: ...
【CSS层叠样式表教程】 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它允许开发者通过分离内容和表现,来实现对网页元素的精细控制,提供了一...
div+css 字体属性 字体族科 字体风格 字体变形 字体加粗 字体大小 字体 颜色及背景属性 颜色 背景颜色 背景图象 背景重复 背景附件 背景位置 背景 文本属性 文字间隔 字母间隔 文字修饰 纵向排列 ...
在CSS(层叠样式表)中,样式属性用于定义网页元素的外观、布局和结构。以下是一些常用CSS样式属性的详细说明: 1. **长度单位**: CSS支持多种长度单位来设置元素的尺寸,如`font-size`、`width`、`height`等。...
本规范定义了第2级层叠样式表(CSS2)。CSS2是一种样式表语言,作者和用户可以使用它将样式(如:字体,间距及语音提示等)附加到结构化的文档(如:HTML文档和XML应用)中。由于CSS2将文档呈现的样式和文档的内容...
即颜色属性将被继承于外部样式表,而文字罗列和字体尺寸将被内部样式表中的规章取代。 五、结论 内部样式表是CSS的基本应用之一,通过了解内部样式表的使用和优先级,我们可以更好地控制网页的样式和布局。在实际...
包含常用的css属性,层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还...
CSS 样式表快速入门 CSS(Cascading Style Sheets)的简称,顾名思义,它是一种设计网页样式的工具。借助 CSS 强大的功能,网页将在您丰富的想象力下千变万化。下面我们来学习 CSS 的基础知识。 一、CSS 语句的...
【CSS样式表】是网页设计中的重要组成部分,全称为层叠样式表(Cascading Style Sheets),它的主要功能是实现内容与表现的分离。内容指的是网页的实际信息,如文本、图片等;表现则是指这些信息在用户界面上的展示...
【CSS样式表】是网页设计中的重要组成部分,它允许开发者精细控制网页的外观和布局,提升用户体验,并且有助于优化网站性能。"五天精通CSS样式表"的学习目标是通过五天的学习,掌握CSS的核心概念和实用技巧。 首先...
CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件 CSSPeeper插件使用方法 1.CSS Peeper插件的安装方法非常简单,在本站或者官网都可以下载CSS Peeper插件,离线安装CSS Peeper插件的方法参照:...