美文网首页
CSS文字排版

CSS文字排版

作者: 淘代码者 | 来源:发表于2018-03-20 10:03 被阅读0次

1.文字排版--字体

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

body{font-family:"宋体";}
这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:

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

body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

2.文字排版--字号、颜色

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

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

3.文字排版--粗体

使用下面代码实现设置文字以粗体样式显示出来
p span{font-weight:bold;}

4.文字排版--斜体

以下代码可以实现文字以斜体样式在浏览器中显示:

p a{font-style:italic;}

5.文字排版--下划线

有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:

p a{text-decoration:underline;}

6.文字排版--删除线

使用下面代码就可以实现:

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

7.段落排版--缩进

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

p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小。

8.段落排版--行间距(行高)

在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

9.段落排版--中文字间距、字母间距

中文字间隔、字母间隔设置:

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

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

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

单词间距设置:

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

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

10.段落排版--对齐

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

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

同样可以设置居左:

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

还可以设置居右:

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

相关文章

  • CSS格式化排版

    CSS格式化排版 (1)文字排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式...

  • CSS文字排版

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

  • HTML&CSS笔记(2)

    CSS格式化排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,如下: 不...

  • CSS格式化排版(文本、光标、背景、渐变、列表、表格、计数器)

    CSS格式化排版 文字排版 —— 字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,比如b...

  • HTML5学习笔记(三)

    1.css格式化排版 文字排版-字体:我们可以使用 css 样式为网页中的文字设置字体.字号.颜色等样式属性.例:...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • css格式化排版

    css格式化排版 一、文字排版 css可以设置网页中的字体、字号、颜色等样式属性 1、字体css样式中为网页设置字...

  • 慕课网笔记4:css 文字排版

    慕课网: HTML+CSS基础课程 文字排版 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性 ...

  • 移动排版巨好用的:better-scroll

    纵向的排版 HTML: css: JS: 横向排版 HTML CSS JS 常用方法 refresh(); =>重...

网友评论

      本文标题:CSS文字排版

      本文链接:https://www.haomeiwen.com/subject/isrzfftx.html