浅谈CSS的格式化排版

蔚落 2022-06-12 00:26 117阅读 0赞

## 文字排版 ##

### 字体 ###

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

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

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

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

或

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

注意：第一种方法比第二种方法兼容性更好一些。

### 字号、颜色 ###

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

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

### 粗体          ###

p span{font-weight:bold;}

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

### 斜体 ###

p a{font-style:italic;}

### 下划线 ###

p a{text-decoration:underline;}

### 删除线 ###

.oldPrice{text-decoration:line-through;}

## 段落排版 ##

### 缩进 ###

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

p{text-indent:2em;}

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

### 行间距（行高） ###

p{line-height:1.5em;}

设置段落行间距为1.5倍。

### 中文字间距、字母间距 ###

中文字间距、字母间距中文字间隔、字母间隔设置：

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

h1{
        letter-spacing:50px;
    }
    ...
    <h1>了不起的盖茨比</h1>

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

单词间距设置：

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

h1{
        word-spacing:50px;
    }
    ...
    <h1>hello world</h1>

### 对齐 ###

想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。

h1{
        text-align:center;
    }
    <h1>了不起的盖茨比</h1>

同样可以设置居左：

h1{
        text-align:left;
    }
    <h1>了不起的盖茨比</h1>

还可以设置居右：

h1{
        text-align:right;
    }
    <h1>了不起的盖茨比</h1>

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈CSS hack

CSS hack是对付IE的利器。不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，可能会导致生成的页面效果不一致。有了CSS hack，就可以针对不同的

女爷i/ 2022年06月18日 12:56/ 0 赞/ 85 阅读

相关 CSS格式化排版

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

喜欢ヅ旅行/ 2022年06月14日 01:47/ 0 赞/ 208 阅读

相关浅谈CSS布局

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float)

r囧r小猫/ 2022年06月12日 01:18/ 0 赞/ 184 阅读

相关浅谈CSS的格式化排版

文字排版字体 body{font-family:"宋体";} 这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览

蔚落/ 2022年06月12日 00:26/ 0 赞/ 118 阅读

相关浅谈CSS样式

CSS全称为“层叠样式表 (CascadingStyle Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：

向右看齐/ 2022年06月11日 22:55/ 0 赞/ 130 阅读

相关【CSS】浅谈css中格式化上下文BFC、IFC（二）

Inline Formatting Context Inline Formatting Context的缩写就是IFC。中文名叫，行内格式化上下文。行内框参与IFC。

怼烎@/ 2022年06月05日 10:59/ 0 赞/ 185 阅读

相关【CSS】浅谈css中格式化上下文BFC、IFC（一）

格式化上下文格式化上下文指的是元素所处的环境以及初始化。这里的初始化就是所谓的格式化（如手机的重置，恢复出厂设置），环境也称为上下文（不同的环境会有不同的结果）。

桃扇骨/ 2022年06月05日 10:56/ 0 赞/ 396 阅读

相关 html+css浅谈

自从来到兄弟连还没上过战地日记呢，心里有点不甘，就把自己昨天写的日记拿来和大家分享一下，是关于html和css的方面的，写的不好，大家不好口水。这 2天完成了2个网站的首

灰太狼/ 2022年05月15日 09:17/ 0 赞/ 137 阅读

相关浅谈Normalize.css

综述 Normalize.css vs Reset.css 安装、下载综述 Normalize.css是一种CSS r

小鱼儿/ 2022年03月18日 10:40/ 0 赞/ 222 阅读

相关浅谈Normalize.css

转载自简书：https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提

Dear 丶/ 2021年09月29日 13:38/ 0 赞/ 342 阅读