一. 文字
1. 字体设置
在 HTML 语言中,文字的字体是通过 <font face= " 字体名称 ">来设置,而在 CSS 中字体总通过 font-family 属性进行控制。代码如下:
<style>
p{
font-family: SimSun, Microsoft YaHei;
}
</style>
【注】不要输入中文(全角)的双引号,而要使用英文(半角)的双引号。
2. 设置文字大小
在网页中通过文字的大小来突出主题是很常用的方法,CSS 是通过 font-size 属性来控制文字大小的。该属性的值可以使用很多种长度单位。
(1) 长度单位 px
px 是一个长度单位,表示在浏览器上 1 个像素的大小。因为不同的显示器的分辨率不同,而且每个像象的实际大小也不同,所以 px 被称为相对单位,也就是相对于 1 个像素的比例。
在 css 中。还可以使用绝对长度单位,它们不会随显示器的变化而变化。各个单位的含义下表所示:
长度单位 | 说明 |
in | inch,英寸 |
cm | centimeter,厘米 |
mm | millimeter,毫米 |
pt | point,印刷的点数,1pt = 1/72 inch |
pc | pica,1pc = 12 pt |
(2) 长度单位em和ex
1 em 表示的长度是其父元素中字母 m 的标准宽度。1 ex 则表字母 x 的标准高度。当父元素的文字大小变化时,使用这两个单位的子无素的大小会同比例变化。
例如,对<p>标签设置 firstLetter 样式,然后编与CSS样式代码,代码如下:
.firstLetter{
font-size: 3em;
float:left;
}
2. 设置文字颜色
在 HTML项面中,颜色统一采用 RGB 格式,每种颜色都由“红绿蓝”三种颜色的不同比重组成,分为0到255档。当红绿蓝3个分最都设置为255时就是白色,例如,rgb(100%,100%,100%)和#FFFFFF 都指白色,其中“#FFFFFF”为十六进制的表示方法,前两位为红色分量,中间两位是绿色分量,最后两位是蓝色分量。"FF”即为16 进制中的 255。
CSS 中文字颜色是通过 color 属性设置的。代码如下:
h3{color : blue; }
h3{color : #0000ff; }
h3{color : #00f; }
h3{color : rgb(0,0,255); }
h3{color : rgb(0%,0%,100%); }
第 1 种方式使用颜色的英文名称作为属性值。
第 2 种方式是最常用的十六进数值表示。
第 3 种方式是第 2 种方式的简写方式,形如 #aabbcc 的颜色值,就可以简写为 #abc。
第 4 种方式是分别给出红绿蓝 3 个颜色分量的十进制数值。
第 5 种方式是分别给出红绿蓝 3 个颜色分量的百分比。
4. 设置文字的水平对齐方式
在CSS中,文字的水平对齐通过属性 text-align 来控制,它的值可以设置为左、右和两端对齐 ( jusify) 等。
h1{ text-align: center | left | right | jusify }
5. 段首缩进设置
在 CSS 中,段首缩进是通过 text-indent 属性设置的,直接将缩进距离作为数值即可。
p{ text-indent: 2em}
二. 文本
1. 文本自动换行
当 HTML 元素不足以显示它里面的所有文本时,浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则对于西方文字来说,浏览器只会在半角空格、连字符的地方进行换行,不会在单词中间换行;对于中文来说,浏览器可以在任何一个中文字符后换行。
有些时候,希望让浏览器可以在西方文字的单词中间换行,此时可借助于 word-break 属性。如果把 word-break 属性设为break-all,即可让浏览器在单词中间换行。
强制不换行:
p { white-space:nowrap; }自动换行:
p { word-wrap:break-word; }
值 | 描述 |
---|---|
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
2. 设置超链接样式
能够设置超链接样式的 CSS 属件有很多种 (如 color、font-family、background 等)。超链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
超链接有以下 4 种状态:
- a:link: 普通的、未被访问的链接。
- a:visited: 用户已访问的链接。
- a:hover: 鼠标指针位于链接的上方。
- a:active: 链接被单击的时刻。