CSS 格式化排版

时间:2022-02-17 20:24:00

1. 字体排版

字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)

现在一般网页喜欢设置“微软雅黑”,如下代码:

body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}

注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

字号和颜色

可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

body{font-size:12px;color:#666}

粗体 斜体 下划线 删除线

我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线。
粗体:

p span{font-weight:bold;}

在这里大家可以看到,如果想为文字设置粗体是有单独的 css 样式来实现的,再不用为了实现粗体样式而使用 h1-h6 或 strong 标签了。

斜体:

p a{font-style:italic;}

下划线:

p a{text-decoration:underline;}

删除线:

p span{text-decoration:line-through;}

2. 段落排版

缩进

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}

注意:2em的意思就是文字的2倍大小

行间距(行高)

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

中文字间距、字母间距

中文字间隔、字母间隔设置:
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现,如下面代码:

h1{ letter-spacing:50px; }

注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置:

如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:

h1{ word-spacing:50px; }

块状元素对齐

想为块状元素中的文本、图片设置居中样式吗?可以使用 text-align 样式代码,例如:

h1{ text-align:center;}    /*居中对齐*/
/*left:左对齐 right:右对齐*/

元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素

常用的块状元素有:

<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form>

常用的内联元素有:

<a><span><br><i><em><strong><label><q><var><cite><code>

常用的内联块状元素有:

<img><input>

块状元素

什么是块级元素?在 html 中 <div><p><h1><form><ul><li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素 a 转换为块状元素,从而使 a 元素具有块状元素特点。

a{display:block;}

块级元素特点:
1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

内联元素

在 html 中,<span><a><label><strong> 和c<em>c就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码 display:inline 将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

 div{ display:inline; }

内联元素特点:
1. 和其他元素都在一行上;
2. 元素的高度、宽度及顶部和底部边距不可设置;
3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block 就是将元素设置为内联块状元素。(css2.1新增),<img><input>标签就是这种内联块状标签。

inline-block 元素特点:
1. 和其他元素都在一行上;
2. 元素的高度、宽度、行高以及顶和底边距都可设置。