CSS4 文字与字体

文字效果

文字颜色，color属性

1.可以用三种方式表示文字的颜色：字符串，rgb，十六进制表示

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

2.实例

    <style>
        h1{color: red}
        h2{color: rgb(0,0,255)}
        h3{color: #00FF00}
    </style>

文字对齐方式，text-align属性

1.可选参数

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

文本修饰，text-decoration 属性

1.可选参数

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

2.实例

    <style>
        h1{text-align: left}
        h2{text-align: right}
        h3{text-align: center}
        h4{text-align: justify}
    </style>

文字转换，text-transform 属性

1.可选参数

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	定应该从父元素继承 text-transform 属性的值。

2.实例

    <style>
        h1{text-transform: none}
        h2{text-transform:capitalize}
        h3{text-transform:uppercase}
        h4{text-transform:lowercase}
    </style>

文字缩进，text-indent属性

1.可选参数

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

2.实例

    <style>
        h1{text-indent: 20px}
        h2{text-indent: 20%}
    </style>

文字效果,text-decoration属性

1.可选参数

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

2.实例

    <style>
        h1{text-decoration: underline}
        h2{text-decoration: overline}
        h3{text-decoration: line-through}
        h4{text-decoration: blink}
    </style>

其他

的文字见菜鸟教程参考
http://www.runoob.com/css/css-text.html

字体效果

字体家族，font-family属性

默认继承父元素,如果父元素没有的话，取决于浏览器。
规定了一系列的字体，如果第一个浏览器用不了了，就往后找第二个字体，一次类推。因此后面的字体都是备用的。
1.可用参数

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。
inherit	规定应该从父元素继承字体系列。

字体可以根据generic-family来分为某个系列的字体（family name），一个系列有多种字体（family name）。一系列的字体具有相同的特征
例如有衬托线（serif）和无衬托线（sans serif）的字体系列。是两个字体系列（generi family）.
常见的字体系列：
. serif(衬线)
. sans-serif(无衬线)
. monospace(等宽)
. fantasy(梦幻)
. cuisive(草体)
注意很多字体都是英文字体，对中文的显示效果都一样，所以当我们想要不一样的显示效果的时候，最好使用中文字体

2.实例
规定了多个字体，从前往后看哪个能用就用哪个。
如果设置字体家族，使用浏览器默认指定字体家族中一个字体。如果设置特定的字体就是用这个字体

字体大小，font-size属性

默认继承父元素,如果父元素没有的话，默认值：medium。
1.可用参数

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

2.实例

    <style>
        #t1{font-size:xx-large}
        #t2{font-size:larger}
        #t3{font-size:50px}
        #t{font-size:400%}
    </style>

字体特点，font-style属性

默认继承父元素,如果父元素没有的话，normal
1.可用参数

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

2.实例

    <style>
        #t1{font-style: italic}
        #t2{font-style: oblique}
    </style>

字体粗细，font-weight属性

默认继承父元素,如果父元素没有的话，normal
1.可用参数

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold
inherit	规定应该从父元素继承字体的粗细。

2.实例

    <style>
        #t1{font-weight: bold}
        #t2{font-weight: bolder}
        #t3{font-weight: lighter}
        #t4{font-weight: 400}
    </style>

特殊的显示小写字体，font-variant属性

默认继承父元素,如果父元素没有的话，normal
1.可用属性

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

2.实例

    <style>
        #t1{font-variant: small-caps}
        #t2{font-variant: all-small-caps}
    </style>

连续设置font的方法

可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话

斜体，加粗，字体大小/行高 字体家族
 <style>
        h1{font:italic bold 12px/30px Georgia,serif;}
    </style>