css鼠标放上去把箭头变成手一样的样式怎么写_百度知道
css鼠标放上去把箭头变成手一样的样式怎么写
我有更好的答案
任意标签中插入 style=&cursor:hand& 多种形状可供选择hand是手型 pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。 crosshair是十字型 text是移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 n-resize是向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize是左下的箭头 s-resize是向下的箭头 se-resize是向右下的箭头 auto是由系统自动给出效果
采纳率：42%
本回答被提问者采纳
添加css属性cursor:pointer
&&a&href=&#&&style=&cursor:pointer&&CSS鼠标手型效果&/a&
CSS cursor 属性一些不同的光标：span.crosshair {cursor:}span.help {cursor:}span.wait {cursor:}default
默认光标（通常是一个箭头）
默认。浏览器设置的光标。
光标呈现为十字线。
光标呈现为指示链接的指针（一只手）
此光标指示某对象可被移动。
此光标指示矩形框的边缘可被向右（东）移动。
此光标指示矩形框的边缘可被向上及向右移动（北/东）。
此光标指示矩形框的边缘可被向上及向左移动（北/西）。
此光标指示矩形框的边缘可被向上（北）移动。
此光标指示矩形框的边缘可被向下及向右移动（南/东）。
此光标指示矩形框的边缘可被向下及向左移动（南/西）。
此光标指示矩形框的边缘可被向下移动（南）。
此光标指示矩形框的边缘可被向左移动（西）。
此光标指示文本。
此光标指示程序正忙（通常是一只表或沙漏）。
此光标指示可用的帮助（通常是一个问号或一个气球）。
其他3条回答
为您推荐：
其他类似问题
鼠标的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。XHTML MP与WCSS
(XHTML MP课程) - HTML/CSS当前位置:& &&&XHTML MP与WCSS
(XHTML MP课程)XHTML MP与WCSS
(XHTML MP课程)www.MyException.Cn&&网友分享于：&&浏览：9次XHTML MP与WCSS
(XHTML MP教程)
XHTML MP（XHTML Mobile Profile），它是定义在WAP 2.0上面的标记语言（markup language）。XHTML MP是XHTML的子集，在XHTML MP出现之前，WAP网站的开发者们只能用WML和WML script来创建WAP的网站。而与此同时，web的开发者们却在用强大的多的HTML、CSS、XHTML等来进行传统网站的开发。所以XHTML MP的目标就是浏览者在WAP和web上获得尽可能相似的浏览体验。 一、XHTML MP 不支持WML特性&&&&& 1.XHTML MP 不支持&deck&和&card&标签。&&&&& 在XML中，一个文件可以包含一个或更多的card，所有的card组合成一个deck，并在无线设备中一同被下载。WAP浏览器每次只显示一个card，可以通过锚链接访问其他的card。通过这些，减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性，可以使用multipart messages（多个文档放到一个请求）另外一个方式是使用目标锚（一个页面的不同位置）。&&&&& 2.XHTML MP 不支持&timer&标签&&&&& &head&&&&&& &meta http-equiv="refresh" content="10;URL=http://www.planabc.net/" /&&&&&& &/head&&&&&& &meta&元素10秒后告诉WAP浏览器URL。&&&&& 注意点：WML timer 仅当进入card，而HTML refresh timer当进入XHTML MP页面。XHTML MP 不支持事件。&&&&& 3.WML支持四个事件（ontimer,onenterbackward,onenterforward,onpick），除ontimer其他事件无法模拟。如要使用，需使用WML1.X。&&&&& 4.XHTML MP 不支持变量。在XML，可以声明变量，并赋值，拥有全局作用域。可以在任何的deck和card中使用。XHML MP放在服务器端处理（必须发送并保存）。&&&&& 5.XHTML MP 不支持客户端脚本。在XML，你可以使用客户端脚本（WMLScript）。JavaScript的简化版，常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本（ECMAScript MP）,支持所有的WMLScript功能。&&&&& 6.XHTML MP 不支持可编程序软键（Programmable SoftKeys）。WML的一个最大特征。通过&do&标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性：&&&&& &a accesskey="1" href="part1.xhtml"&XHTML MP Tutorial Part 1&/a&&&&&& WCSS中的-wap-accesskey属性也可以用来定义：a.wcss_class_1 {-wap-accesskey: 1}&&&&& 7.XHTML MP 不支持&u&标签。&&&&& 在XML，&u&用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。&&&&& 8.XHTML MP 不支持Input框的format属性。&&&&& 在XML，可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性，语法一致。比如限制5个数字字符：input {-wap-input-format:”5N”}&&&&& 9.XHTML MP 不支持锚链接传输数据。二、XHMTL MP语法规则&&&&& 1. 标签必须完全闭合。&&&&& 2. 标签和属性必须小写。&&&&& 3. 属性值必须包含在引号标记内。&&&&& 4. 不允许无属性值存在。&&&&& 5. 标签必须完全嵌套。三、文档结构和类型&&&&& 1.必须包含&html&, &head&, &title&和&body& 元素。&&&&& 2. XML声明和字符编码：&?xml version="1.0" encoding="UTF-8"?&,UTF-8/16编码可省略。XML声明也不是必须的，但如果忽略在许多WAP浏览器中出错。&&&&& 3. 必须有DOCTYPE声明。在XML声明和&html&元素之间。&&&&& &!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&&&&&& 4. &html&、&head&、&link&、&title&、&body&&&&&& 5. &p&元素，align属性已经去除，可以通过WAP CSS的text-align属性来设置。四、通用的元数据&&&&& 1. 使用&meta/&标签，包含在&head&内&&&&& 2. WAP浏览器如果不理解则忽略。&&&&& 3. 比如添加作者：&meta name="author" content=“yuanxin"/&&&&&& 4. Cache Control：&meta/&标签的一个应用是控制XHTML MP文件在Cache中的存在周期：&&&&& &meta http-equiv="Cache-Control" content="no-cache"/&&&&&& &meta http-equiv="Cache-Control" content="max-age=0"/&&&&&& 注意点：与设备相关。一些使用不相的方法，一些没有Cache机制。还有一些不支持&meta/&但识别Cache-Control:no-cache的HTTP头。也可应用于图片的缓存。&&&&& 5. 周期性刷新。必须配合使用。不是所有浏览器都支持。&&&&& &meta http-equiv="Cache-Control" content="no-cache"/&&&&&& &meta http-equiv="refresh" content="15;URL=yuanxin.xhtml"/&五、XHTML MP常用标签介绍&&&&& 1. 注释：&!– — &，和HTML和WML1.X相同。&&&&& 2. 换行：&br/& ，和HTML和WML1.X相同。&&&&& 3. 水平线：&hr/&。不能包含在&p&&/p&标签之内。&&&&& 4. 标题：&h1&-&h6&（不同的大小和样式），有些设备看起来一样的。&&&&& 5. 字体样式：XML可以使用标签来改变字体样式（ &b&、&i&、&small&、&big&等）。但一些浏览器只支持其中的部分，不支持的忽略，不会出错。 WCSS 控制字体格式。&&&&& 6. 与格式化文本：在XHTML MP中，标签间空白不显示，此外，段落中2个或更多的空白只显示一个，如果想保持文字的格式，可使用&pre&。&&&&& 7. 列表：&ul&、&ol&、&li&。对于&ol&元素，可以用属性 start 指定数字开始的序列。还可以用WCSS来做更精确的控制。&&&&& 8. 显示图片：&img&标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持，显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度除了老的WBMP图片格式，WAP2.0还支持WEB上的图片格式（gif, jpg和PNG），但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过accept HTTP header判断设置。 关于大图片的发布：很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏，很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。优化图片：1、用制图软件按比例缩小图片；2、如果是gif图片，减少颜色，但降低了图片质量，权衡。3、如果是jpg图片，保存一定的压缩比例，依然是权衡。使用multipart messages，先下载的XHTML MP文档，后请求图片，产生多个请求。该方式可以使文档和图片在一个请求，意味着一个页面只有一个请求。减少服务器的压力。&&&&& 9. 表格：创建表格，需要使用&table&、&tr&、&td&标签，默认表格没有边线。属性有rowspan和colspan。&&&&& 10. 锚链接：一般用在导航。标签为&a&&/a&。属性href定义指定的URL。当前页面位置的跳转：先设置目标链接，通过id属性设置；再设置锚链接的URL为#id名称。对锚链接设置快捷键：&a&标签的accesskey属性，有效的值为：*，#，0-9。还可以用-wap-accesskey设置。&&&&& 11. 选择列表：选择列表使用&select&标签，包含一个或更多的&option&标签。&select&标签的name属性定义选择列表的名字。name用来取得被选择的item的值（option的value属性定义）。多重选择列表：Option的selected属性用来设置默认的option。如果想设置多重选择列表，可使用&select&标签的multiple属性，只有一个唯一值‘multiple’;Option分组：使用&optgroup&标签，label属性定义option组的名称。&&&&& 12. 输入元素：Text field、Password fireld、Checkbox、Radio button、Hidden field。通过&input&元素创建。传输数据到服务器，&input&元素必须和&form&一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称，方便取得用户数据。&&&&& 14. 提交按钮：所有的表单都必须包含一个提交按钮。&input&元素用来创建一个提交按钮。而type属性被定义为’submit’。&&&&& 15. 重置按钮：并不是必须的。&input&元素用来创建一个重置按钮。而type属性被定义为’reset’。&&&&& 16. Div和Span。六、WCSS介绍&&&&& WCSS也叫 WAP CSS/Wireless CSS/Wireless Profile CSS（WAP Cascading Style Sheet ），是CSS2的子集+一些WAP特有的扩展，目的：定义文档的风格和布局，从文档内容中分离。重要性：不同的手机设备有多样的特征，比如屏幕大小。 WML不支持WCSS；W3C CSS Mobile Profile和WAP CSS 不同；主要：学习成本降低，可用相同的开发工具，可用WEB浏览器浏览；表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分；比WML更好的控制表现：可以定义元素的color，font，background，border，margin，padding等属性；移动设备第一次访问站点下载样式（Cache）； 使用外部WCSS，XHTML MP的文档大小变小，提高下载时间；不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持；外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档；MIME类型： text/css；文件扩展名：.css七、WCSS语法规则&&&
1. WCSS声明：selector {property: property_value}&&&& 2. 多个属性允许的，用’;’分隔。&&&& 3. 多个选择器也是允许的，用‘，’分隔。&&&& 4. 注释：/*orz*/，WAP浏览器将忽略这些内容。&&&& 5. 链接外部WCSS（推荐），放置在文档的head部分，用style属性定义WCSS样式&&&& 6. &link href=“url” rel=“stylesheet” type=“text/css”/&，可以多个，无需修改rel和type属性。&&&& 7. 类型选择器：h1 { font-style: italic} 元素名称必须小写。 &&&& 8. Class选择器： .class { color:blue} 对应标签的class属性，还可以联合元素名称使用 h1.class {color:blue}。&&&& 9. ID选择器：#id {color:red} 对应标签的id属性也可联合元素名称。&&&& 10. 通用选择器：* { color:blue} ，所有的标签。注意：在某些WAP浏览器上会使样式渲染变慢。（建议不要用）八、WCSS常用属性&&&& 1. 长度：%，px，em，ex，cm，mm，in，pt，pc（值和单位之间不允许有空格：margin-top:1px而不是margrin-top:1 px）。 2. 颜色：rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。&&&& 3. URL：ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。&&&& 4. 字体名称：p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。&&&& 5. 字体大小：p {font-size:12px}，也可以用xx-small，x-samll，small，medium，large，x-large，xx-large&&&& 6. 字体样式：斜体、粗体和下划线（font-style,font-weight和text-decoration）。&&&& 7. 设置文本对齐：text-align和float。WAP中float（left,right,none）常用在img和table标签&&&& 8. 改变无序列表的图标（list-style-type ）：默认disc，其他值：circle，square，none。可以应用在ul和li元素上。&&&& 9. 改变有序列表的次序：默认decimal，其他值：upper-alpha（A），lower-alpha（a），upper-raman（I），lower-raman（i），none使用图片文件作为小图标：list-style-image: url(bullet.gif) 。注：Openware WAP浏览器本地保存了一些icon，可以使用这些作为小图标，例如：ul {list-style-image: localsrc("rightarrow1")}&&&& 10. 设置前景和背景颜色：color、background-color属性。&&&& 11. 设置border样式：border-style（border-top-style等）属性，值有很多，但只有none和solid被WAP浏览器广泛支持。table {border-style: solid}&&&& 12. 设置border宽度：border-width（同上）属性，值为数值，还接受thin、medium和thick。注：值设置border-width，border并不可见，必须设置border-style非none值。&&&& 13. 设置border颜色：border-color（同上）属性。注意点同上。&&&& 14. 设置border属性的快捷方式：table {border: 2px solid black} 顺序自由。 九、WAP/WCSS扩展&&&& 1. 快捷键：-wap-accesskey ，用来指定XHTML MP元素的快捷键。&&&& 2. Input：定义文本框是否可以留空，什么类型，可以输入多少字符&&&& 3. Marquee：在屏幕上滚动一些内容。&&&& 1. 给元素定义快捷键：-wap-accesskey属性&&&& 2. 可用的属性值*，#，0，1，2，3，4，5，6，7，8，9&&&& input.wcss_class {-wap-accesskey: 4}&&&& 3. 直接定义*和#违反CSS2语法。需要使用Unicode转义字符\2a和\23。但是有些WAP浏览器（Sony Ericsson WAP 浏览器 ）要求使用\2a 和 \23,一些（Openwave 手机浏览器） 要求使用* 和#。&&&& 4. 与元素的accesskey属性同效，如同时定义，显示该属性值。&&&& 5. 只用于四个元素a， input，label，textarea，其他定义也无效。&&&& 6. 由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中&input&元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。&&&& 7. 早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。&&&& 8. &input type="text" format="N" style='-wap-input-format: "N"'/&&&&& 9. 控制文本框的类型和字符数量：-wap-input-format。需应用在&input type=“text”&, &input type=“password”&和&textarea& 标签上，如应用在其他标签无效。格式字符（大小写敏感）：a（小写字母或符号），A（大写字母或符号），n（数字或符号） N（数字），x（小写字母或数字或符号），X（大写字母或数字或符号），m（任何字符，默认小写字母输入模式，可换大写模式），M（任何字符，默认大写字母输入模式，可换小写模式）。属性值必须包含在引号内，由于部分Openwave 手机浏览器不支持单引号，建议使用双引号（&input type=“text” style=‘-wap-input-format: “N”’/& ）&&&& 10. WCSS输入扩展：由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中&input&元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。&&&& 11. WCSS Marquee扩展：可以在屏幕上滚动一些内容（一行文字，一个图片，一个链接等），但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有CSS Inline Layout Module Level 3
The CSS formatting model provides for a flow of elements and text inside of a container to be wrapped into lines.
The formatting of elements and text within a line, its positioning in the inline progression direction, and the breaking of lines are described in .
This module describes the positioning in the block progression direction both of elements and text within lines and of the lines themselves.
This positioning is often relative to a baseline.
It also describes special features for formatting of first lines and drop caps.
It extends on the model in .
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.
This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the
Publication as a Working Draft does not imply endorsement by the W3C
Membership. This is a draft document and may be updated, replaced or
obsoleted by other documents at any time. It is inappropriate to cite this
document as other than work in progress.
The () public
mailing list
(see ) is preferred
for discussion of this specification. When sending e-mail, please put the
text “css-inline” in the subject, preferably like this:
“[css-inline] …summary of comment…”
This document was produced by the
This document was produced by a group operating under the . W3C maintains a
connection with the deliv that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains
must disclose the information in accordance with .
This document is governed by the .
The following features are at-risk, and may be dropped during the CR period:
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.
Table of Contents
This module defines the CSS Inline Layout model,
replacing and extending the model as defined in CSS2.1.
It is very much a work-in-progress, and implementers should reference CSS2.1 for now.
The root inline box is an anonymous inline box
which is automatically generated to hold
all of the
contents of a
(if it has any).
It inherits from its parent ,
but is otherwise unstyleable.
This section is being rewritten. Refer to
for the normative CSS definition or the
if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.) The CSS2 specification should be used as the guideline for implementation.
The CSSWG would like to know which baseline values are necessary: if any can be dropped, or any need to be added.
dominant-baseline
text-bottom
alphabetic
ideographic
mathematical
Applies to:
block containers and inline boxes
Inherited:
Percentages:
Computed value:
as specified
Animation type:
This property specifies the dominant baseline,
which is the baseline used to align the box’s text and inline-level contents.
Values have the following meanings:
Equivalent to
in horizontal writing modes and in vertical writing modes when
is , , or sideways-left.
equivalent to
in vertical writing modes when
In SVG text, the origin point of glyphs is always handled as for
text-bottom
Use the bottom of the em box as the baseline.
alphabetic
Use the alphabetic baseline.
ideographic
Match the box’s ideographic character face under-side baseline to that of its parent.
Use the “middle” baseline: halfway between the alphabetic baseline and the ex-height.
Use the central baseline
(halfway between the ascent and descent).
mathematical
Use the mathematical baseline.
Use the hanging baseline.
Use the top of the em box as the baseline.
for an introduction to dominant baselines.
Should be text-over and text-under instead of text-top and text-bottom,
but maybe it’s better not to use those terms for consistency with legacy .
vertical-align
Applies to:
inline-level boxes
Inherited:
Percentages:
Computed value:
as specified
Animation type:
This shorthand property specifies how an inline-level box is aligned within the line.
Values are the same as for its longhand properties, see below.
Authors should use this property () instead of its longhands.
alignment-baseline
text-bottom
alphabetic
ideographic
mathematical
Applies to:
inline-level boxes
Inherited:
Percentages:
Computed value:
as specified
Animation type:
Specifies what point of an inline-level box is aligned to what point in the parent.
Values are defined below:
For the following definitions, the margin box is used for atomic inlines,
and the leading box for non-replaced inlines:
Use the dominant baseline choice of the parent.
Match the box’s corresponding baseline to that of its parent.
text-bottom
Match the bottom of the box to the bottom of the parent’s content area.
alphabetic
Match the box’s alphabetic baseline to that of its parent.
ideographic
Match the box’s ideographic character face under-side baseline to that of its parent.
Align the vertical midpoint of the box with
the baseline of the parent box plus half the x-height of the parent.
Match the box’s central baseline to the central baseline of its parent.
mathematical
Match the box’s mathematical baseline to that of its parent.
Match the top of the box to the top of the parent’s content area.
For the following definitions, the alignment subtree is as defined in .
Align the top of the aligned subtree with the top of the line box.
Align the center of the aligned subtree with the center of the line box.
Align the bottom of the aligned subtree with the bottom of the line box.
SVG implementations may support the following aliases
in order to support legacy content:
text-before-edge =
text-after-edge =
These values are not allowed in the
shorthand.
baseline-shift
Applies to:
inline-level boxes
Inherited:
Percentages:
refer to the used value of
Computed value:
absolute length, percentage, or keyword specified
Animation type:
This property specifies by how much the box is shifted up
from its alignment point.
It does not apply when
Authors should use the
shorthand instead of this property.
Values have the following meanings:
Raise (positive value) or lower (negative value) by the specified length.
Raise (positive value) or lower (negative value) by the specified percentage of the .
Lower by the offset appropriate for subscripts of the parent’s box.
(The UA should use the parent’s font data to find this offset whenever possible.)
Raise by the offset appropriate for superscripts of the parent’s box.
(The UA should use the parent’s font data to find this offset whenever possible.)
User agents may additionally support the keyword baseline as computing to 0 if is necessary for them to support legacy SVG content.
Issue: We would prefer to remove this, and are looking for feedback from SVG user agents as to whether it’s necessary.
The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.
Large, decorative letters have been used to start new sections of text since before the invention of printing.
In fact, their use predates lowercase letters entirely.
A dropped initial (or “drop cap”)
is a larger-than-usual letter at the start of a paragraph,
with a baseline at least one line lower than the first baseline of the paragraph.
The size of the drop initial is usually indicated by how many lines it occupies.
Two- and three-line drop initials are very common.
Three-line drop initial with E acute.
Since the cap-height of the drop initial aligns with the cap-height of the main text,
the accent extends above the paragraph.
The exact size and position of a
depends on the alignment of its glyph.
Reference points on the drop cap must align precisely
with reference points in the text.
In Western scripts, the top reference points are
the cap height of the initial letter and of the first line of text.
The bottom reference points are
the alphabetic baseline of the initial letter
and the baseline of the Nth line of text.
shows a simple two-line drop cap, with the relevant reference lines marked.
Two-line drop cap showing baselines (green lines), cap-height (red line), and ascender (cyan line).
The alignment constraints for drop initials depend on the writing system.
In ideographic scripts, the initial letter extends
edge of the first line
edge of the Nth line.
Two-line drop initial in vertical writing mode
In some Indic scripts, the top alignment point
is the hanging baseline,
and the bottom alignment point is the text-after-edge.
aligned with hanging baseline. Alignment points shown in red.
Some styles of drop initials do not align with the first line of text.
A sunken initial (or “sunken cap”)
both sinks below the first baseline,
and extends above the first line of text.
Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.
A raised initial (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline.
Note: A proper raised initial has several advantages over
simply increasing the font size of a first letter.
The line spacing in the rest of the paragraph will not be altered,
but text will still be excluded around large descenders.
And if the size of raised initial is defined to be an integral number of lines,
implicit baseline grids can be maintained.
Raised cap. The initial letter is the size of a 3-line initial, but does not drop.
Initial letters are typically a single letter, although
they may include punctuation or a sequence of characters which
are perceived by the user to be a single typographic unit.
The ::first-letter pseudo-element, as defined in ,
can be used to select an .
Authors who need more control over which characters are included in an initial letter,
or who want to apply initial-letter formatting to replaced elements or multiple words
an also apply the
property to the first inline-level child of a block container.
&p>This paragraph has a dropped “T”.
&p>&img alt="H" src="illuminated-h.svg">ere we have an illuminated “H”.
&p>&span>Words may also&/span> be given initial letter styling at the beginning of a paragraph.
::first-letter, /* style first paragraph’s T */
img, /* style illuminated H */
span /* style phrase inside span */
{ initial-letter: 2; }
<table class="def propdef" data-link-for-hint="initial-letter">
initial-letter
Applies to:
::first-letter pseudo-elements and inline-level first child of a block container
Inherited:
Percentages:
Computed value:
as specified
Animation type:
This property specifies styling for dropped, raised, and sunken initial letters.
It takes the following values:
No special initial-letter effect. Text behaves as normal.
This first argument defines the size of the initial letter
in terms of how many lines it occupies.
Negative values are not allowed.
This optional second argument argument
defines the number of lines the initial letter should sink.
Values must be greater than zero.
If omitted, it duplicates the first argument,
floored to the nearest positive whole number.
Should this be initial-letters (plural) as originally discussed?
Since it can apply to multiple letters.
An initial letter is
a box to which
applies and is not :
this triggers the special layout considerations described below.
Here are some examples of
Represents a
3 lines high, 3 lines deep.
Represents a
3 lines high, 2 lines deep.
Represents a
3 lines high, 1 line deep.
The size of the initial letter does not have to be an integral number of lines.
In this case only the bottom aligns.
The following code will create a 2-line dropped initial letter at the beginning of each paragraph:
p::first-letter { initial-letter: 2; }
Define interaction with . Easiest is to make it not apply to/within .
property does not apply to boxes
that are not positioned at the start of the line due to bidi reordering.
The following properties apply to an :
all font properties (see )
properties (see )
all background properties (see )
any typesetting properties that apply to inline elements (see )
all text decoration properties (see )
all margin, border and padding properties
Note: Which properties apply to
depend on whether it is an inline box or an
is a display type.
Add / as requested by Tantek... need to integrate with model.
is laid out following the steps outlined below:
Find the used font size based on its
alignment points,
and font metrics.
Note that no layout is required in this step.
The font size used for sizing the
contents does not affect its computed
(and therefore has no effect on the computation of
length values, etc.).
Size the ’s content box.
The content box of a non-atomic inline initial letter
is the smallest rectangle required to include the entirety of its glyphs
as well as the margin boxes of any atomic inlines it contains.
The initial letter’s margin box is placed at the edge of the line.
If it has no padding or borders, it is negatively offset
by the distance from the start edge of its content box
to the point in the content that would have been placed
at the start edge of the containing block
if it had .
Exclude content within the inline letter’s margin box
according to .
Initial letters can be styled with margins, padding, and borders
just like any other box.
its vertical alignment and siz
however the effective exclusion area is
(and corresponds to the margin area).
When padding and borders are zero,
the initial
see below.
As mentioned earlier, the alignment of initial letters
depends on the script used.
property can be used to specify the proper alignment.
<table class="def propdef" data-link-for-hint="initial-letter-align">
initial-letter-align
border-box [ alphabetic
ideographic
border-box
alphabetic
Applies to:
::first-letter pseudo elements and inline level first child of a block container
Inherited:
Percentages:
Computed value:
specified value
Animation type:
This property specifies the alignment points
used to size and position an .
Two sets of alignment points are necessary:
alignment points of the
are matched to corresponding
points of the surrounding text.
Values have the following meanings:
alphabetic
Use the alphabetic and cap-height baselines of the surrounding text
to align the .
ideographic
Use the ideographic character face bottom and top edge baselines of the surrounding text
to align the .
Use the alphabetic and (as yet theoretical) hebrew hanging baseline of the surrounding text
to align the .
Use the alphabetic and hanging baselines of the surrounding text
to align the .
border-box
Use the ’s
border edges
alignment points, respectively.
Is there proper a typographic term for the hebrew “hanging” baseline?
The vertical writing mode example from
could be coded as:
span.initial {
initial-letter: 2;
initial-letter-align:
Initial letter in Hebrew
span.initial {
initial-letter: 2;
initial-letter-align:
Except when
is specified,
the alignment points of the
are automatically determined from its contents:
is an atomic inline,
content-box edges.
Else if the
contains any character from the Han, Hangul, Kana, or Yi ,
use the ideographic character face bottom and top edge baselines.
Else if the
contains any character from the Devanagari, Bengali, and Gurmukhi ,
use the hanging and alphabetic baselines.
Else if the
contains any character from the Hebrew ,
use the ideographic character face bottom and top edge baselines.
Else use the alphabetic and cap-height baselines.
What is the proper alignment for South Asian scripts
that do not have the explicit hanging baseline, such as Tamil or Telugu?
Note: The ordering of keywords in this property is fixed in case
is expanded to [ border-box | alphabetic | ideographic | hebrew | hanging ] to allow explicitly specifying the ’s alignment points.
In order to provide the better behavior by default,
UAs must include in their default UA style sheet the following rules:
[lang=zh], [lang=ja], [lang=ko], [lang=ii] {
initial-letter-align:
[lang|=iw], [lang|=yi], [lang|=lad], [lang|=jrb] {
initial-letter-align:
[lang|=hi], [lang|=mr], [lang|=ne], , [lang|=pi], [lang|=kok], [lang|=brx], [lang|=mai], [lang|=sd], [lang|=sa] {
initial-letter-align:
We don’t have a way to do subtag selection with attr selectors.
(It’s a feature of
in Selectors 4,
but we don’t want to use that because we want to hit the language root,
not all of the descendant elements.)
These selectors should also include the relevant script subtags.
The size of a drop initial is determined
by the need to satisfy the required alignment.
For an N-line drop initial in a Western script,
the cap-height of the letter needs to be (N – 1) times the line-height,
plus the cap-height of the surrounding text.
Note this height is not the font size of the drop initial.
Actually calculating this font size is tricky.
For an N-line drop initial,
we find the drop initial font size to be:
A three-line drop initial in Adobe Minion Pro
would have a font size of 61.2pt given
12pt text, 16pt line-height, and a cap-height of 651/1000 (from the font’s OS/2 table).
The line height used in this calculation
of the containing block
(or, in the case where a baseline grid is in use,
the baseline-to-baseline spacing required by the baseline grid ).
The contents of the lines spanned,
and therefore any variation in their heights and positions,
is not accounted for.
shaping does not occur across the box’s boundaries,
as if the zero-width non-joiner (U+200C) were inserted
before/after the .
For example, if the first letter of the Farsi word “??”
were styled with ,
both letters would be styled in their isolated forms,
with “?” as the initial letter, followed by the normally-styled “?”.
Are there other things we need to consider here?
The glyph(s) of an initial letter do not always fit within the specified sink.
For example, if an initial letter has a descender,
it could crash into the (n+1)th line of text.
This is not desirable.
Incorrect: three-line initial letter with descender
Text is therefore excluded around the glyph bounding boxes of the initial letters.
Specifically, for non-atomic initial letters,
the content box of the element is sized to fit:
The specified amount of sink
(i.e the distance from the top alignment point to the bottom alignment point).
The actual ascent and descent and side bearings of all the glyphs it contains
that are part of its inline formatting context,
even if they leak outside their em boxes.
The margin boxes of all the atomic inlines it contains
that are part of its inline formatting context,
even if they leak outside its own line-height.
The margin box of the initial letter is then made an exclusion area for subsequent text.
Correct: text excluded around glyph bounding box
In the , the
is positioned
to satisfy its alignment requirements. (See .)
In the , the position of the inline letter
is given by aligning its start margin edge to the start edge of the containing block.
However, if the
is a non-atomic inline with zero padding and borders,
the UA must apply an additional negative offset on the start side,
of the amount necessary to optically align the first glyph
to the containing block edge as it would be in normal text.
is at risk.
<table class="def propdef" data-link-for-hint="initial-letter-wrap">
initial-letter-wrap
Applies to:
::first-letter pseudo-elements and inline-level first child of a block container
Inherited:
Percentages:
relative to
of (last fragment of) initial letter
Computed value:
as specified
Animation type:
This property specifies whether lines impacted by an
are shortened to fit the rectangular shape of the
or follow the contour of its end-edge glyph outline.
No contour-fitting is performed:
each impacted line is aligned flush to the end margin edge of the .
Behaves as
if the first
belongs to Unicode General Category Zs.
Otherwise behaves as for
on the first line of the block containing the initial letter
on the rest.
This example shows why contour-fitting the first line is necessary,
and why it is dropped when the
is followed by a space:
In the top paragraph, the initial letter "A" has a word space after it:
the gap between the top of the "A" and the next letter
provides the necessary word separation.
In the next paragraph, the initial letter "A"
is part of the first word,
and leaving a gap between the top of the "A" and the next letter
would create a jarring visual break within the word.
In this case, the first line of text
should be kerned into the initial letter’s area,
as shown in the bottom paragraph.
Do we need an unconditional ?
(I.e. Should we rename this value to
value that does not check for spaces?)
For each line of text impacted by the initial letter,
the line box adjacent to the intial letter starts
at the start-most point that touches the ink of the initial letter,
plus the amount of the ’s end-side border+padding+margin.
Note: This value is at-risk.
This value is the same as ,
except that the exclusion area of the impacted lines
is increased as necessary for its end-edge to land on the character grid.
property can then be used to align
the initial letter box within the exclusion area.
The heuristic for matching the character grid is
1em × n +
× (n - 1),
where n is the size of the initial letter
as specified by the
and 1em represents the typical character advance width for ideographic characters
(and may be replaced by a more accurate value if known).
Diagram of Japanese initial letter in vertical writing mode
Note: In this example, the exclusion area for the drop initial
is larger than its glyph in order to preserve inline-axis alignment.
Note: This value is also at-risk.
This value behaves the same as
except that the adjustment to the first line is given explicitly
instead of being inferred from the glyph shape.
This really needs font-relative lengths to be relative to the used size.
Note: This value exists because it is easier to implement.
Authors are encouraged to use the
and to set margins to control spacing,
and to use this as a fallback for glyph detection if necessary.
In the following example, UAs that support
will use the glyph outline
plus the specified margin in order to place the first line,
whereas UAs that only support
will pull in the first line by 40% of the initial letter’s width
(and then add the margin to that point).
h1 + p:first-letter {
initial-letter: 3; /* 3-line drop-cap */
initial-letter-wrap:
margin-right: 0.1
@supports (not (initial-letter-wrap: first)) {
/* Classes auto-generated on paragraphs to match first letter. */
p.A:first-letter {
initial-letter-wrap: -40%; /* Start of glyph outline, assuming correct font. */
These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support .
Edit figure to show how auto behaves in varying contexts
p::first-letter {
initial-letter: 3;
initial-letter-wrap:
Ordinary initial letter with no wrapping.
p::first-letter {
initial-letter: 3;
initial-letter-wrap:
Text follows shape of initial letter.
Each line box should just touch the ink of the letter,
with some offset (represented by the shaded box).
p::first-letter {
initial-letter: 3;
initial-letter-wrap:
Only the first line is moved up against the ink of the initial letter.
apply to the first line of text as normal in the presence of initial letters.
Lines affected by the exclusion are shortened, as in the presence of floats,
and are affected the same way.
If an initial letter is too long to fit on one line,
it wraps (according to the usual text-wrapping rules),
each line filled and formatted exactly as if it were the first line
and the initial letter too long to fit any subsequent normal text.
Any normal text after the initial letter starts on its last line,
affected exactly as if that line were the first line.
Drop cap extends to two lines.
An initial letter does not affect the position of its containing element.
For “raised caps” or “sunken caps,”
the effect is created as if the text around the initial letter was pushed down,
rather than the letter extending up into previous elements.
Raised cap (initial-letter: 3 1)
note that the position of the “C” is the same in both cases,
but on the right all text is moved down relative to the initial letter.
Handle glyph ink above cap height of font.
A paragraph with an initial letter can have fewer lines of text
than the initial letter occupies.
In this case, the initial letter’s top alignment is still honored,
and its exclusion area continues into any subsequent blocks.
This forces the subsequent inline-level content to wrap around the initial letter—exactly as if that block’s text were part of its own containing block.
(This is similar to how floats exclude content in subsequent block boxes.)
The red text is a short paragraph with an initial letter.
Note the subsequent paragraph wraps around the initial letter
just as text in the paragraph with the initial letter does.
If the subsequent block starts with an initial letter,
establishes a new formatting context,
or specifies
in the initial letter’s containing block’s start direction,
then it must clear the previous block’s initial letter.
The red text is a short paragraph with an initial letter.
The subsequent paragraph clears because it also has an initial letter.
Floats always clear an initial letter when floated to the same side.
When floated to the opposite side,
they are pushed down to clear the initial letter
only if they have specified
to this side
or they do not fit without overlapping the initial letter.
Is this the behavior we want? What if the float is on the same line as the initial letter?
Some fonts may not contain the baseline information necessary to align properly as described above.
User agents may follow these steps in the absence of a required metric:
Measure the font.
Describe in more detail.
Should we document which characters in which scripts are useful,
such as lowercase "o" to ?
Use a heuristic for the script.
Use fallback values:
x-height: .5
cap-height: .66
hanging baseline: .6
Copy over text from
and expand for additional baseline values.
Note: Authors can use margins (positive or negative)
to adjust the alignment of replaced content within a line.
In this example, the author is using a set of images
to display characters that don’t exist.
img[src^="/text/"] {
height: 1 /* Size to match adjacent text */
margin-bottom: -0.2 /* Baseline at 20% above bottom */
&p>This is some text with words written in an unencoded script:
&img src="/text/ch3439.png" alt="...">
&img src="/text/ch3440.png" alt="...">
&img src="/text/ch3442.png" alt="...">
Note: A future level of CSS may include a way of specifying a full baseline table for replaced elements.
(This will probably look like a baseline-table property
that accepts ''[&baseline-keyword> ]+''.)
Changes since the
Adding values for the ideographic and middle baselines.
Clarifying interaction of the
value with SVG glyph positioning.
A few other minor editorial improvements.
Special thanks goes to the initial authors,
Eric A. Meyer and Michel Suignard.
In additions to the authors, this specification would not have been possible without the help from:
David Baron,
David M Brown,
John Daggett,
Stephen Deach,
Sylvain Galineau,
David Hyatt,
Shinyu Murakami,
Ted O’Connor,
Sujal Parikh,
Florian Rivoal,
Alan Stearns,
Bobby Tung,
Chris Wilson,
Grzegorz Zygmunt.
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with class="example",
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with class="note", like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with &strong class="advisement">, like
UAs MUST provide an accessible alternative.
Conformance to this specification
is defined for three conformance classes:
style sheet
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
The following sections define several conformance requirements
for implementing CSS responsibly,
in a way that promotes interoperability in the present and future.
So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid
any at-rules, properties, property values, keywords, and other syntactic constructs
for which they have no usable level of support.
In particular, user agents must not selectively ignore
unsupported property values and honor supported values in a single multi-value property declaration:
if any value is considered invalid (as unsupported values must be),
CSS requires that the entire declaration be ignored.
To avoid clashes with future stable CSS features,
the CSSWG recommends
for the implementation of
features and
Once a specification reaches the Candidate Recommendation stage,
implementers should release an
implementation
of any CR-level feature they can demonstrate
to be correctly implemented according to spec,
and should avoid exposing a prefixed variant of that feature.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at .
Questions should be directed to the
mailing list.
, in §2.2.1
, in §3.8
alphabetic
, in §2.1
, in §2.2.1
, in §3.4
, in §2.1
, in §2.2.1
, in §2.2.2
, in §2.2.2
, in §3.4
, in §2.2.1
, in §2.2.1
, in §2.1
, in §2.2.1
, in §2.1
, in §2.1
, in §3.1.1
, in §3.8
, in §3.8
, in §2.1
, in §3.4
, in §3.4
ideographic
, in §2.1
, in §2.2.1
, in §3.4
, in §3.3
, in §3.3
, in §3.4
, in §3.3
, in §3.8
, in §3.3
, in §2.2.2
, in §3.8
mathematical
, in §2.1
, in §2.2.1
, in §2.1
, in §2.2.1
, in §3.8
, in §3.3
, in §3.3
&percentage>
, in §2.2.2
, in §3.8
, in §3.1.3
, in §2.2.2
, in §3.1.2
, in §2.2.2
, in §2.2.1
, in §2.2.1
text-bottom
, in §2.1
, in §2.2.1
, in §2.1
, in §2.2.1
, in §2.2.1
, in §2.2
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
defines the following terms:
[CSS-ALIGN-3]
Elika E Tab Atkins Jr.. . 19 May 2016. WD. URL:
[CSS-COLOR-3]
CSS Color Module Level 3 URL:
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. . 15 October 2015. WD. URL:
[CSS-RUBY-1]
Elika E Koji Ishii. . 5 August 2014. WD. URL:
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. . 11 June 2015. CR. URL:
Bert B et al. . 7 June 2011. REC. URL:
[CSS3-FONTS]
John Daggett. . 3 October 2013. CR. URL:
[CSS3-WRITING-MODES]
Elika E Koji Ishii. . 15 December 2015. CR. URL:
[CSS3TEXT]
Elika E Koji Ishii. . 10 October 2013. LCWD. URL:
S. Bradner. . March 1997. Best Current Practice. URL:
[SELECTORS-4]
Selectors Level 4 URL:
[CSS3-LINE-GRID]
Elika E Koji I Alan Stearns. . 16 September 2014. WD. URL:
[CSS3-TEXT-DECOR]
Elika E Koji Ishii. . 1 August 2013. CR. URL:
Bert B Elika E Brad Kemper. . 9 September 2014. CR. URL:
[CSS3COLOR]
Tantek ? Chris L David Baron. . 7 June 2011. REC. URL:
Tantek ? et al. . 29 September 2011. REC. URL:
Applies to
Anim-ation type
Com-puted value
auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top
block containers and inline boxes
as specified
&‘baseline-shift’> || &‘alignment-baseline’>
inline-level boxes
as specified
baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top | bottom | center | top
inline-level boxes
as specified
&length> | &percentage> | sub | super
inline-level boxes
refer to the used value of line-height
absolute length, percentage, or keyword specified
normal | [&number> &integer>?]
::first-letter pseudo-elements and inline-level first child of a block container
as specified
border-box? [ alphabetic | ideographic | hebrew | hanging ] | border-box
alphabetic
::first-letter pseudo elements and inline level first child of a block container
specified value
none | first | all | grid | &length> | &percentage>
::first-letter pseudo-elements and inline-level first child of a block container
relative to logical width of (last fragment of) initial letter
as specified
This section is being rewritten. Refer to
for the normative CSS definition or the
if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.) The CSS2 specification should be used as the guideline for implementation.
The CSSWG would like to know which baseline values are necessary: if any can be dropped, or any need to be added.
Should be text-over and text-under instead of text-top and text-bottom,
but maybe it’s better not to use those terms for consistency with legacy .
The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.
Should this be initial-letters (plural) as originally discussed?
Since it can apply to multiple letters.
Define interaction with . Easiest is to make it not apply to/within .
Add / as requested by Tantek... need to integrate with model.
Is there proper a typographic term for the hebrew “hanging” baseline?
What is the proper alignment for South Asian scripts
that do not have the explicit hanging baseline, such as Tamil or Telugu?
We don’t have a way to do subtag selection with attr selectors.
(It’s a feature of
in Selectors 4,
but we don’t want to use that because we want to hit the language root,
not all of the descendant elements.)
These selectors should also include the relevant script subtags.
Are there other things we need to consider here?
Do we need an unconditional ?
(I.e. Should we rename this value to
value that does not check for spaces?)
This really needs font-relative lengths to be relative to the used size.
These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support .
Edit figure to show how auto behaves in varying contexts
Handle glyph ink above cap height of font.
Is this the behavior we want? What if the float is on the same line as the initial letter?
Describe in more detail.
Should we document which characters in which scripts are useful,
such as lowercase "o" to ?
Copy over text from
and expand for additional baseline values.
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:}