CSS之文本

font-family 属性

font-family属性用于指定一个元素的字体
有两种形式的字体名称:
---font family: 一种特殊的字体(如:Times New Roman or Arial)
---generic family: 一组具有外观的字体(如:Serif of Monospace)

以下是一些不同字体样式的例子:

Generic family:

Seif
Sans-serif
Monospace

Font family:

Times New Roman
Georgia
Arial Verdana
Courier New
Lucida console

HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="serif">
        这个段落使用 serif 字体
    </p>
    <p class="sansserif">
        这个段落使用 sans-serif 字体
    </p>
    <p class="monospace">
        这个段落使用 monospace 字体
    </p>
    <p class="cursive">
        这个段落使用 cursive 字体
    </p>
    <p class="fantasy">
        这个段落使用 fantasy 字体
    </p>
</body>
</html>

CSS文件:

p.serif {
    font-family: 'Times New Roman', Times, serif;
}
p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}
p.monospace {
    font-family: 'Courier New', Courier, monospace;
}
p.cursive {
    font-family: Florence, cursive;
}
p.fantasy {
    font-family: Blippo, fantasy;
}

效果:


A.PNG

使用逗号分开每个值以显它们是可替代的.
如果字体名字不只一个,必须用双引号包含,如:"Times New Roman"

font-family 属性应持有多几个字体名以作为后备系统.在一个网页的样式中指定字体时,添加多个字体名字，以避免在异常情况下,比如终端电脑因为某些原因没有样式中指定的某一字体,浏览器将会尝试使用下一个字体.
指定一个通用的字体是一个不错的选择,如果其他字体都不可用时，让浏览器在通用字体中选择一个类似的字体.

body {
    font-family: Arial, "Helvetica Neue", Helvetica,sans-serif;
}

如果浏览器不支持Arial字体,它将尝试下一个字体(Helvetical Neue,然后Helvetica),如果浏览器不支持所有上面的字体,它将尝试使用sans-serif. 记住: 当字体名字包含多个单词时，要使用双引号包含起来.

font-size属性

font-size属性设定字体的大小,其中一种设定网页字体大小的方式是使用关键字, 如: xx-small, small, medium, large, larger 等等
HTML文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="small">
        段落文本字体大小设置成 small 小字号
    </p>
    <p class="medium">
        段落文本字体大小设置成 medium 中字号
    </p>
    <p class="large">
        段落文本字体大小设置成 large 大字号
    </p>
    <p class="xlarge">
        段落文本字体大小设置成 x-large 非常大字号
    </p>
</body>
</html>

CSS文件:

p.small {
    font-size: small;
}
p.medium {
    font-size: medium;
}
p.large {
    font-size: large;
}
p.xlarge {
    font-size: x-large;
}

效果

A.PNG

如果不希望用户自己增加字体的大小使得网页的外观变得不好时,使用关键字作为字体的大小设定是非常有用的.

font-size属性也可使用像素数值或ems来设定字体的大小.
当需要精确的像素时使用像素数值设定字体的大小是一个很好选择,同时也具备对字体大小的完全控制.
em大小单位是另外一种设定字体大小的方式(em是相对大小单位),它允许所有主流的浏览器重置文本字体的大小.如果你还没有设定网页字体的大小,这时浏览器将使用默认16px的字体大小.
em单位的计算公式: em = 像素值 / 16
例如:

h1 {
  font-size: 20px;
}
h1 {
  font-szie: 1.25em;
}

上面两个h1在浏览器中将有同样的效果,因为 20 / 16 = 1.25em

font-style属性:
font-sytle属性主要用指定斜体文本

HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="italic">
        这个段落使用斜体。
    </p>
</body>
</html>


p.italic {
    font-style: italic;
}

效果:

A.PNG

font-style属性有三个值：normal, italic, oblique.
oblique与italic非常相似，但支持的浏览器较少.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="normal">
        这个段落使用 normal
    </p>
    <p class="italic">
        这个段落使用 italic
    </p>
    <p class="oblique">
        这个段落使用 oblique
    </p>
</body>
</html>

CSS文件:


p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

效果:

A.PNG

HTML <i>标签将产生与italic font style一样的效果.

font-weight 属性
font-weight属性控件文本的粗细程度. 它的值可以设定为: normal(默认值)，bold, bolder, lighter
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="light">
        这是使用 lighter 的粗细度
    </p>
    <p class="bold">
        这是使用 bold 的粗细度
    </p>
    <p class="bolder">
        这是使用 bolder 的粗细度
    </p>
</body>
</html>

CSS文件:


p.light {
    font-weight: lighter;
}

p.bold {
   font-weight: bold;
}

p.bolder {
    font-weight: bolder;
}

效果:

A.PNG

font-weight 属性也可以使用数字100(细)到900(粗)指定文本的粗细度,400 与normal一样, 700与bold一样.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="light">
        这是使用 lighter 的粗细度
    </p>
    <p class="thick">
        这是使用 bold 的粗细度
    </p>
    <p class="thicker">
        这是使用 700 的粗细度
    </p>
</body>
</html>

CSS文件:


p.light {
    font-weight: lighter;
}

p.thick {
   font-weight: bold;
}

p.thicker {
    font-weight: 700;
}

效果:

A.PNG

HTML的<strong>标签也使用文本更粗

font-variant 属性
font-variant属性用于对字母文本进行大小写转换. 它的值可以设定为: normal, small-caps, inherit.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="normal">
        这个段落的font-variant设定为 normal
    </p>
    <p class="small">
        这个段落的font-variant设定为 small-caps
    </p>
    <p class="inherit">
        这个段落的font-variant设定为 inherit
    </p>
</body>
</html>

CSS文件:


p.normal {
    font-variant: normal;
}

p.small {
   font-variant: small-caps;
}

p.inherit {
    font-variant: inherit;
}

效果:

A.PNG

color 属性:
color 属性用于指定文本的颜色.
其中一种方式用color来指定文本颜色的方式是用颜色名称, 如: red, green, blue等等.下面是一个改变文本颜色的例子:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="example">
        这段文本是绿色的
    </p>
    这段文本是黑色的(默认)
</body>
</html>

CSS文件:

p.example {
    color: green;
}

效果:

A.PNG

另外一种设定color值的方式是使用十六进制 和RGB
十六进制使用#开头并跟着6位的十六进制数(0-F)
RGB分别代表Red，Green, Blue.
在下面的例子中,我们使用十六进制数来设定h1的颜色为blue,使用RGB来设定p的颜色为红色.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p class="example">
        这是一个段落
    </p>

</body>
</html>

CSS文件:


h1 {
    color: #0000FF;
}
p.example {
    color: rgb(255, 0, 0);
}

效果:

A.PNG

text-align 属性:
text-align 属性用于设定元素中文字的水平对齐,默认情况下,文字在网页中为左对齐,text-align属性值可设定为: left, right, center, justify
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="left">这个段落是<strong>左</strong>对齐的</p>
    <p class="right">这个段落是<strong>右</strong>对齐的</p>
    <p class="center">这个段落是<strong>中间</strong>对齐的</p>
</body>
</html>

CSS文件:


p.left {
    text-align: left;
}
p.right {
    text-align: right;
}
p.center {
    text-align: center;
}

效果:

A.PNG

vertical-align属性:
vertical-align属性用于设定元素的垂直对齐,通常使用的值有: top, middle, bottom.
下面的例子展示如何垂直对齐表格中的文本
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
        <tr>
            <td class="top">Top</td>
            <td class="middle">Middle</td>
            <td class="bottom">bottom</td>
        </tr>
    </table>
</body>
</html>

CSS文件:


td.top {
    vertical-align: top;
}
td.middle {
    vertical-align: middle;
}
td.bottom {
    vertical-align: bottom;
}

效果:

A.PNG

vertical-align也可以设定为: baseline, sub, super, %和px(或者是pt,cm)
下面的例字展示它们的不同:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p>这是一个<span class="baseline">行内文本</span>例子.</p>
    <p>这是一个<span class="sub">sub行文本</span>例子.</p>
    <p>这是一个<span class="super">super行文本</span>例子.</p>
    <p>这是一个<span class="pixel">pixel</span>例子.</p>
</body>
</html>

CSS文件:


span.baseline {
    vertical-align: baseline;
}
span.sub {
    vertical-align: sub;
}
span.super {
    vertical-align: super;
}
span.pixel {
    vertical-align: -10px;
}

效果:

A.PNG

用于取代px单位，也可以使用pt(点),cm(厘米), %(百分比)这些单位

vertical-align属性并不是对所有的HTML元素有相同的效果
例如,需要对div元素使用一些附加的样式
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div class="main">
        <div class="paragraph">
            这个文本是居中对齐的
        </div>
    </div>
</body>
</html>

CSS文件

.main {
    height: 150px; width: 400px;
    background-color: lightskyblue;
    display: inline-table;
}
.paragraph {
    display: table-cell;
    vertical-align: middle;
}

效果:

A.PNG

display: inline-table; display: table-cell; 样式使得vertical-align属性可以作用于div元素.

text-decoration属性:
text-decoration属性用于指定如何修饰文本
通常使用的值有:
none: 默认值, 定义为普通文本
inherit: 从父级元素上继承text-decoration的值
overline: 在文本的上方画一条水平线.
underline: 在文本的下方画一条水平线.
line-through: 画一条水平线穿过文本(取代HTML<s>标签)
例子展示:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="none">这是默认样式的文本(none)</p>
    <p class="inherit">这是继承父级元素样式的文本</p>
    <p class="overline">这是带上部水平线的文本</p>
    <p class="underline">这是下部水平线的文本</p>
    <p class="line-through">这是穿透水平线的文本</p>
</body>
</html>

CSS文件:

p.none {
    text-decoration: none;
}
p.inherit {
    text-decoration: inherit;
}
p.overline{
    text-decoration: overline;
}
p.underline {
    text-decoration: underline;
}
p.line-through {
    text-decoration: line-through;
}

效果:

A.PNG

可以使用空格分隔组合使用 underline, overline, line-through值以混合使用修饰线.
另外一个text-decoration属性的值是blink,它使得文本可以闪烁,但大多数浏览器都忽略这个属性值.
text-indent属性:
text-indent属性用于设定文本的缩进,一般指段落的第一行开始之前留下多少空格,它的值可以设定为length(px,pt,cm,em,等等),%,inherit
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p>这是一个文本<strong>缩进</strong>属性的例子.文本的第一行缩进60px，除了像素单位外,还可以使用其它单位,比如:pt,cm,em,等</p>
</body>
</html>

CSS文件

p {
    text-indent: 60px;
}

效果:

A.PNG

也可以使用负值,使用负值时,第一行将向左边缩进.

text-shadow属性:
text-shadow属性用于给文字添加阴影
需要设定4个值,第一个值设定阴影水平方向的距离,第二个值设定阴影垂直方向的距离, 第三个值 定义阴影的模糊度, 第四个值设定阴影的颜色.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <h1>文本阴影样例</h1>
</body>
</html>

CSS文件:

h1 {
    color: blue;
    font-size: 30pt;
    text-shadow: 5px 2px 4px grey;
}

在上面的例子中,我们使用以下参数创建了阴影:
5px --- 水平方向
2px --- 垂直方向
4px --- 模糊度
grey --- 阴影的颜色

效果:

A.PNG

可以使用逗号分隔需要添加的多个阴影.
CSS文件:

h1 {
    color: blue;
    font-size: 30pt;
    text-shadow: 5px 2px 4px grey, 10px 4px 8px red;
}

效果:

A.PNG

text-shadow 属性中使用模糊效果
在text-shadow属性中，可以使用CSS支持的任何颜色格式
对于x,y(水平,垂直)的偏移量,有各种单可以使用(如: px, cm,mm,in,pc,pt 等等)
甚至负值也是可以使用的.
下面的例子创建了一个蓝色的下拉阴影,比文本主体高2个像素,离文本的左边1个像素,0.5 em 模糊度.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <h1>使用模糊效果的文本阴影样例</h1>
</body>
</html>

CSS文件:

h1 {
    font-size: 20pt;
    text-shadow: rgba(0, 0, 255, 1) -1px -2px 0.5em;
}

效果:

A.PNG

IE9 或者更早的版本,不支持 text-shadow属性.

text-transform 属性:
text-transform属性用于设定元素字母文本的大写形式,例如,可以使文本中每个单词的首字母大写.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="capitalize">
        The value capitalize transforms the first
        character in each word to uppercase;
        all other characters remain unaffected.
    </p>
</body>
</html>

CSS文件:

p.capitalize {
    text-transform: capitalize;
}

效果:

A.PNG

text-transform 属性可以设定所有字母文本都是大写或都是小写，下面是个例子:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="uppercase">
        This value transforms all characters to uppercase.
    </p>
    <p class="lowercase">
        This value transforms all characters to lowercase.
    </p>
</body>
</html>

CSS文件:

p.uppercase {
    text-transform: uppercase;
}
p.lowercase {
    text-transform: lowercase;
}

效果:

A.PNG

如果text-transform属性值设定为 none,将不有转换效果.

letter-spacing属性
letter-spacing属性用于指定文本中字符间的空间,它的值可以设定为:
normal --- 默认值,字符间没有额外的空间
length --- 使用px,pt,cm,mm等等单位定义字符间的空间
inherit --- 继承父级元素的样式
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="normal">
        这是一段字符间没有额外空间的应用
    </p>
    <p class="positive">
        这是一段字符间具有4px额外空间的应用
    </p>
</body>
</html>

CSS文件:

p.normal {
    letter-spacing: normal;
}
p.positive {
    letter-spacing: 4px;
}

效果:

A.PNG

letter-spacing属性也可以使用负值，例如:
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="positive">
        这是一段字符间具有4px额外空间的应用
    </p>
    <p class="negative">
        这是一段字符间具有-1.5px额外空间的应用
    </p>
</body>
</html>

CSS文件:


p.positive {
    letter-spacing: 4px;
}
p.negative {
    letter-spacing: -1.5px;
}

效果:

A.PNG

word-spacing属性:
word-spacing属性用于指定单词间的空间,与letter-spacing属性相似,这的值也有以下几种: normal, length, inherit
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="normal">
        This paragraph has no additional word-spacing applied
    </p>
    <p class="px">
        This paragraph is word-spaced at 30px.
    </p>
</body>
</html>

CSS文件:


p.normal {
    word-spacing: normal;
}
p.px {
    word-spacing: 30px;
}

效果:

A.PNG

white-space 属性:
white-space 属性用指定元素内部的空格形式,它的值可以设定:normal, inherit, nowrap等
nowrap值文本连续在同一行直到遇到
标签,同时把所有的空格折叠为一个空格.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p>
        这个段落有      多个空格   和   
        换行，但这些空格将被忽略,因为使用了 nowrap值
    </p>
</body>
</html>

CSS文件:

p {
    white-space: nowrap;
}

**效果:

A.PNG

white-space的值也可以用以下值:
pre---文本将连续的空白符会被保留,在遇到换行符或
标签时才会换行

pre-line---文本将把连续的空白合并，遇到换行符或
标签，或是为了填充行类块元素时才会换行.
pre-wrap---文本将连续的空白符会被保留.遇到换行符或
标签，或是为了填充行类块元素时才会换行.
HTML文件:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <p class="pre">
        In the markup we have multiple    spaces        
        and a line break    
    </p>
    <p class="preline">
        In the markup we have multiple            spaces 
        
        
        and a line break, but in the result multiple spaces are ignored.   
    </p>
    <p class="prewrap">
        In the markup we have              multiple
        spaces and a line break.
    </p>
</body>
</html>

CSS文件:

p.pre {
    white-space: pre;
}
p.preline {
    white-space: pre-line;
}
p.prewrap {
    white-space: pre-wrap;
}

效果:

A.PNG
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,711评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,932评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,770评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,799评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,697评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,069评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,535评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,200评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,353评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,020评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,610评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2赞 341