CSS文字排版

简介: 一、font-size   我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red。 DOCTYPE HTML> 字号、颜色 body{font-family:Microsoft Yahei;font-size:12px;color:#666;} .stress{font-size:20px;color:red;} 勇气 三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。

一、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>
目录
相关文章
|
8月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
9月前
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
85 0
|
9月前
CSS3 transform 文字切斜展开动画
CSS3 transform 文字切斜展开动画
61 0
|
13天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
29天前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
20 0
|
1月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
1月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
15 1
|
1月前
|
弹性计算 前端开发
CSS 文字超出变为省略号
CSS 文字超出变为省略号
17 0
|
1月前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
18 3
超简单的html+css魔幻霓虹灯文字特效