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
网友评论