文字排版--字体

我们可以使用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{text-decoration:underline;}

<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

文字排版--删除线

如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:

上图中的原价上的删除线使用下面代码就可以实现:

 .oldPrice{text-decoration:line-through;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>删除样式</title>
<style type="text/css">
.oldPrice
{
text-decoration:line-through;
}
</style>
</head>
<body>
<p>原价:<span class="oldPrice"></span>元 现价: 元</p>
</body>
</html>

段落排版--缩进

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

p{text-indent:2em;}
<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>

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

 

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

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

p{line-height:1.5em;}
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

段落排版--对齐

想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。(那么什么是块状元素呢?在后面的11-1、11-2小节中会讲到。)

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

同样可以设置居左:

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

还可以设置居右:

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

Web前端开发基础 第四课(CSS文字和段落排版)的更多相关文章

  1. Web前端开发基础 第四课(CSS元素模型)

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  2. Web前端开发基础 第四课(CSS小技巧1)

    垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...

  3. Web前端开发基础 第四课(CSS小技巧)

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  4. Web前端开发基础 第四课(CSS元素分类)

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  5. Web前端开发基础 第四课(CSS一些性质)

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  6. Web前端开发基础 第四课(认识CSS样式)

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  7. Web前端开发基础 第四课(盒代码模型)

    盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和paddin ...

  8. Web前端开发基础 第四课(颜色值)

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 前面几个小节中经 ...

  9. Web前端开发基础 第三课(与浏览者交互)

    来自慕课网,整理 语法: <form method="传送方式" action="服务器文件"> 讲解: 1.<form> :<f ...

随机推荐

  1. Thrift架构~目录

    回到占占推荐博客索引 概念相关 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ru ...

  2. Using MSBuild to publish a VS 2012 SSDT .sqlproj database project

    http://blog.danskingdom.com/using-msbuild-to-publish-a-vs-2012-ssdt-sqlproj-database-project-the-sam ...

  3. nodejs初探(三)实现一个简单的socket交互

    看一下nodejs中通过socket和客户端交互的最简单例子 //  Sever --> Client 的单向通讯 var net = require('net'); var chatServe ...

  4. (转)URI与URL的区别

    这两天在写代码的时候,由于涉及到资源的位置,因此,需要在Java Bean中定义一些字段,用来表示资源的位置,比如:imgUrl,logoUri等等.但是,每次定义的时候,心里都很纠结,是该用imgU ...

  5. 给Ocelot做一个Docker 镜像

    写在前面 在微服务架构中,ApiGateway起到了承前启后,不仅可以根据客户端进行分类,也可以根据功能业务进行分类,而且对于服务调用服务也起到了很好的接口作用.目前在各个云端中,基本上都提供了Api ...

  6. python 图像处理,画一个正弦函数

    import numpy as np from PIL import Image import matplotlib.pyplot as plt import math size = 300 new_ ...

  7. appium+robotframework常见技巧总结

    1.如何输入中文 方法: 在open application参数最后,新增unicodeKeyboard=True    resetKeyboard=True:不加入这两个参数时,中文无法输入 2.如 ...

  8. UIAlertController简单使用

    UIAlertView   在iOS2 的时候开始使用,在iOS9 的时候被摒弃 NS_CLASS_DEPRECATED_IOS(2_0, 9_0, "UIAlertView is depr ...

  9. Java:Cookie实现记住用户名、密码

    package com.gamecenter.api.util; import java.io.IOException; import java.io.PrintWriter; import java ...

  10. redis cluster集群web管理工具 relumin

    redis cluster集群web管理工具 relumin 下载地址 https://github.com/be-hase/relumin 只支持redis cluster模式 java环境 tar ...