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 ...
随机推荐
- Android系列之Fragment（四）----ListFragment的使用
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- 项目管理工具Redmine各功能测试
Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.它用日历和甘特图辅助项目及进度可视化显示.同时它又支持多项目管理.Redmine是一个自由开放 源码软件解决方案,它提供集成的项目 ...
- Java Executor并发框架（三）ThreadPoolExecutor 队列缓存策略
前面两篇讲解了线程池中线程创建后的运行情况,其中有一系列的策略来保证线程正常运行.但是我们知道线程池是可以设置容量的,而且这容量的设置也是至关重要的,如果容量设置的太小,那么将会影响系统的运行效率,如 ...
- 转：Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html
- Volley（三）—— ImageRequest & Request简介
Volley(三)—— ImageRequest & Request简介 上 篇文章我们讲 到了如何用volley进行简单的网络请求,我们可以很容易的接受到string.JsonObjec类型 ...
- 视频会议的3G智能手机移植技术
现今的视频会议系统已经兼容3G手机等移动终端设备,而3G智能手机使用的操作系统一般与PC的操作系统不一样,其开发环境一般都在PC上进行,通过模拟器在PC上进行手机系统的应用程序开发,而在这些操作系统上 ...
- VMWare安装苹果操作系统OS X
项目要求做一些简单的苹果开发尝试,由于苹果的各种开发要求在Macintosh机上进行,可是项目不值得为一次简单的尝试付出过多的购机费,所以只能另辟蹊径,跟别人学学怎么在虚拟机里面搞: http://j ...
- int 与Integer的用法与区别
1.int是基本类型,直接存取数值,Integer是对象,用一个引用指向这个对象. 2.java中的数据类型分为基本数据类型和复杂数据类型,int是前者,Integer是后者(也就是一个类). 3.初 ...
- [CareerCup] 8.3 Musical Jukebox 点唱机
8.3 Design a musical jukebox using object-oriented principles. CareerCup这书实在是太不负责任了,就写了个半调子的程序,说是完整版 ...
- GDB代码调试与使用
GDB代码调试与使用 Linux下GDB调试代码 源代码 编译生成执行文件 gcc -g test.c -o test 使用GDB调试 启动GDB:gdb test 从第一行列出源代码:list 直接 ...