CSS文字排版
一、font-size
我来试一试：为第一段中的“胆小如鼠”设置字号为：20px，字体颜色为：red。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字号、颜色</title>
<style type="text/css">
body{font-family:Microsoft Yahei;font-size:12px;color:#666;}
.stress{font-size:20px;color:red;}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的<span>问题</span>，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
二、font-weight:bold
我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。
三、font-style：italic
以下代码可以实现文字以斜体样式在浏览器中显示：
p a{font-style:italic;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
四、text-decoration:underline
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下划线样式</title>
<style type="text/css">
a {
text-decoration:underline;
}
span{text-decoration:underline;}
</style>
</head> <body>
<p><span>三年级</span>时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
</body>
</html>
五、text-decoration：line-through
如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：
上图中的原价上的删除线使用下面代码就可以实现：
.oldPrice{text-decoration:line-through;}
六、text-indent:2em
注意：2em的意思就是文字的2倍大小。可以实现段前缩进两字。
七、line-height:2em
理解为两倍行距。
八、letter-spacing和word-spacing
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing来实现。如下代码：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
九、text-align:center
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)
h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>
同样可以设置居左：
h1{
text-align:left;
}
<h1>了不起的盖茨比</h1>
还可以设置居右：
h1{
text-align:right;
}
<h1>了不起的盖茨比</h1>
..............
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐</title>
<style type="text/css">
div{text-align:center;};
</style>
</head>
<body>
<div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div>
</body>
</html>
CSS文字排版的更多相关文章
- CSS学习笔记04 CSS文字排版常用属性
字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...
- Web前端开发基础 第四课（CSS文字和段落排版）
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- HTML+CSS学习笔记 (10) - CSS格式化排版
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- CSS文字大小单位px、em、pt(转)
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
随机推荐
- Mecanim的Retargeting和BodyMask
Retargeting(动画重定向) 文档 http://game.ceeger.com/Manual/Retargeting.html 介绍 Mecanim 的最强大的功能之一,重定目标的仿人机器人 ...
- TP第一天路由解析
路由解析:支持四种URL模式,分别是普通模式.路径模式.重写模式.兼容模式,分别用0123表示 普通模式:http://网址/index.php?m=model&c=user&a=lo ...
- iOS中使用RSA对数据进行加密解密
RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os openssl-1.0. ...
- 04SpringMvc_映射器_BeanNameUrlHanderMapping
这篇文章我们讲的是映射器,映射器的作用是什么样的请求交给Action,如果我们没有在xml配置文件中进行配置,默认的就是BeanNameUrlHanderMapping. 我们讲一个案例增加用户的案例 ...
- 【转】【C#】【Thread】【Parallel】并行计算
并行计算 沿用微软的写法,System.Threading.Tasks.Parallel类,提供对并行循环和区域的支持. 我们会用到的方法有For,ForEach,Invoke. Program.Da ...
- 使用lftp传输文件的shell脚本
学习参考用,需要服务器上安装lftp. #!/bin/bash #date filepath=/usr/hadoop/bigdata/filterurl filtercount=$(ls $filep ...
- Go 命令之 godep
本文参考:http://www.cnblogs.com/me115/p/5528463.html#h20 http://studygolang.com/articles/4385 关于Godep 发现 ...
- 如何在Web服务器80端口上开启SSH服务
本文所讨论的网络端口复用并非指网络编程中采用SO_REUSEADDR选项的 Socket Bind 复用.它更像是一个带特定路由功能的端口转发工具,在应用层实现. 背景 笔者所处网络中防火墙只开放了一 ...
- Linux Linux程序练习九
题目:利用多线程与有名管道技术,实现两个进程之间发送即时消息,实现聊天功能 思路:关键在于建立两个有名管道,利用多线程技术,进程A中线程1向管道A写数据,进程B中线程2从管道A读数据,进程A线程2从管 ...
- jQuery 遍历 - slice() 方法
实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: $("p").slice(0, 2).wrapInner(""); 亲自试一试 定义和用法 s ...