css 属性总结(二):text, font, margin, padding

时间:2022-11-14 23:23:05

文本

color

设置元素内文本的颜色。值可以取任意CSS支持的颜色值,包括颜色名称(如red, blue)、十六进制颜色值(如#ff0000)或者rgb颜色值(如rgb(255, 0, 0))。默认为#000000,黑色。

direction

设置元素内文本的书写方向。取值有ltr(从左至右)和rtl(从右至左)。默认为ltr。

letter-spacing

设置相较默认状态下增加或减少的字符间距。取值为正时字符间距加大,为负时字符间距减小;取值也可以是normal,相当于0。默认为normal。

line-height

设置字符串行间距。取值可以是normal,即浏览器默认合理的字符串行间距;也可以是数字,该数字会与当前的字体尺寸(font-size)相乘来设置行间距;也可以是带有尺寸单位(px, em等)的数值,行间距会被设置为该数值;还可以是百分数,效果与普通数字一样。注意,本属性不支持负值。默认为normal。

text-align

设置元素内文本的水平对齐方法。取值有left(左对齐)、center(居中)、right(右对齐)、justify(两端对齐)。若direction为ltr,则默认值为left;若direction为rtl。则默认值为right。

text-decoration

设置元素内文本的特殊装饰效果。取值有underline(下划线)、overline(上划线)、line-through(横穿文本的一条线)、blink(闪烁)、none(标准文本)。默认为none,无特殊效果。当期的Chrome不支持blink效果,但是Fire Fox支持。

text-indent

设置元素内文本的首行缩进。取值可以是带单位的数值,表示固定缩进;也可以是百分数,表示相当于元素宽度百分比的缩进。允许负值,表示向左的缩进。默认为0。

text-transform

设置元素内文本的大小写。取值有uppercase(文本全大写)、lowercase(文本全小写)、capitalize(文本单词首字母大写)、none(无改变)。默认为none,按照标准文本输出。当然,本属性只对非中文字符有效。

white-space

设置元素内空白区域的处理方式。取值有normal(忽略空白)、pre(保留空白)、nowrap(文本在同一行上继续直到遇到<br>标签后才换行)、pre-wrap(保留空白符序列,正常进行换行)、pre-line(合并空白符序列,保留换行符)。默认为normal。

word-spacing

设置元素内文本中单词的间距。取值可以是normal,表示间距为浏览器支持的标准单词间距;也可以是带单位的数值,表示固定间距。允许使用负值,表示间距更紧凑。默认为normal。注意,本属性只针对非中文字符有效。

text-shadow

设置元素内文本的阴影颜色。取值是任意CSS支持的颜色值,或者none(无阴影)。默认为none。不过,测试中Chrome、Fire Fox、IE均不支持本属性。

unicode-bidi

设置元素内文本的方向。本属性比较复杂,以目前笔者的水平情况应该还不会用得上。所以在以后具体使用到它的时候再详细描述。


字体

font

统一设置元素内字体的所有属性,包括font-style、font-variant、font-weight、font-size/line-height、font-family,可缺省,无固定顺序。

font-style

设置元素内字体的风格。取值有normal(浏览器支持的标准字体风格)、italic(斜体)、oblique(倾斜)。默认为normal。italic与oblique的区别在于:italic使用的是字体自带的斜体,如果该字体不带斜体,则按normal显示;oblique是浏览器直接使文字倾斜,与字体本身没有关系。

font-variant

设置是否使用小型大写字母样式来显示元素内的所有文字。小型大写字母样式是指比普通字符的大写形式稍小一些的大写字符,即异体字。它由浏览器计算得到。本属性的取值有normal(浏览器支持的正常样式)、small-caps(小型大写字母字体样式)。默认为normal。并只针对非中文字符有效。

font-weight

设置元素内字体的粗细程度。取值可以是数字(不带单位,取值范围在100到900,若超出范围则浏览器可能不支持。),也可以是normal(标准粗细,相当于400)、bold(粗体,相当于700)、bolder(更粗)、lighter(更细)。默认为normal。另外,在异体字(font-variant:small-caps)情况下,本属性会失效。

font-size

设置元素内字体的大小。实际设置的是字符框的高度,因而实际的字体可能会更高或更矮(通常是更矮)。取值如下表所示:

css 属性总结(二):text, font, margin, padding

font-family

设置元素内的字体类型。其值可以是多个字体名称,若浏览器不支持前一个,则会自动尝试下一个;字体名称间用英文逗号(,)隔开,带空格的名称需要添加引号。默认值取决于浏览器,且如果设置的字体名称都不支持则自动选择浏览器默认字体。

font-size-adjust

为元素内的字体设置aspect值,浏览器将根据该aspect值计算字体的尺寸。字体的x-height与font-size的比值叫做该字体的aspect值。aspect值越大,该字体在被设置成很小的尺寸就越容易阅读。关于x-height,请参见*:http://en.wikipedia.org/wiki/X-height。下图形象地表示了什么是x-height:

css 属性总结(二):text, font, margin, padding

本属性可取的值有none(不设置,默认),或者aspect值比率。设置的aspect值将按照以下公式参与计算字体的尺寸:

首选字体的字体尺寸 * (font-size-adjust 值 / 可用字体的 aspect 值)=可应用到可用字体的字体尺寸。

经测试,目前Chrome和IE均不支持此属性,但是Fire Fox支持。下面是在Fire Fox下测试得到的效果:

代码:

<html>  
<head>
<metahttp-equivmetahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
p {
font-size:36px;
}

p#first {
font-size-adjust:0.10;
}

p#second {
font-size-adjust:0.50;
}

p#third {
font-size-adjust:2.00;
}
</style>
</head>
<body>
<p id="first">lxg</p>
<pidpid="second">lxg</p>
<p id="third">lxg</p>
</body>
</html>

效果截图:

css 属性总结(二):text, font, margin, padding

font-stretch

设置对当前字体font-family的变形效果。因为当前浏览器均不支持本属性,故忽略。


外边距

margin

统一设置元素的所有外边距属性,包括margin-top、margin-right、margin-bottom、margin-left,赋值按照CSS顺序规则。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的外边距。默认为auto。允许使用负值。(CSS顺序规则请参见《CSS属性总结(一)》。)

另外,块级元素的垂直相邻外边距会合并,同在一行的元素的左右外边距不会合并,浮动元素各个方向的外边距都不会合并。

margin-top、margin-right、margin-bottom、margin-left

设置元素的上/右/下/左外边距。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的外边距。默认为auto。允许使用负值。


内边距

padding

统一设置元素的所有内边距属性,包括padding-top、padding-right、padding-bottom、padding-left,赋值按照CSS顺序规则。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的内边距。默认为auto。不允许负值。

padding-top、padding-right、padding-bottom、padding-left

设置元素的上/右/下/左内边距。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的内边距。默认为auto。允许使用负值。


外边距与内边距

下图表示了一个块级元素的内外边距:

css 属性总结(二):text, font, margin, padding

所以元素的居中效果等能简单地用内外边距来实现。


参考资料:http://www.w3school.com.cn/css/css_reference.asp

转载自: http://blog.csdn.net/sadfishsc/article/details/7042451