从零开始学习html（十）CSS格式化排版——下
2018-06-24 01:19:32来源：未知 阅读 ()
六、文字排版--删除线
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>删除样式</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> 12 </body> 13 </html>
如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：
上图中的原价上的删除线使用下面代码就可以实现：
.oldPrice{text-decoration:line-through;}
来试试，为原价设置删除线
在编辑器的第7行，输入下面代码：
.oldPrice{text-decoration:line-through;}
文本修饰
h1{text-decoration:overline}
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
直接写<del>300</del> 和
<s>123456ddsjvnv</s>也可以弄删除线
注意类名称的大小写
一个小技巧：规定好class的名称后，在以后写这个样式的时候，建议直接复制名称来写，又省事又能够减少错误。
代码写的时候一定要注意 对类选择器进行样式设置名称一定要一致 其中一个字母大小写没有区分都是不能实现的
七、段落排版--缩进
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>缩进样式</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <h1>了不起的盖茨比</h1> 12 <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> 13 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> 14 </body> 15 </html>
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
注意：2em的意思就是文字的2倍大小。
来试试，为文本段设置2个空格缩进
在编辑器的第7行，输入下面代码：
p{text-indent:2em;}
第一、em与px之间怎么换算？
*任意浏览器的默认字体高度16px（16像素）。
*所有未经调整的浏览器都符合:1em=16px。
*那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
注：建议不要使用em作为中文站点的文字单位，会导致文字变形十分严重的。
em和px换算？
从中文输入的角度理解 em ，就简单多了！
在中文里，文字输入分为全角和半角，
(中文输入法里，按shift+空格 切换全角半角状态）
全角，段落中所有字符（包括文字和其它符号：逗号、顿号、句号等），
都是占用一个字的位置，这样排版的时候，上下文字能对齐；
半角，段落中所有除文字外的符号，只占用半个字的位置；
打字时，默认是半角，按空格最明显，只有前一个字的一半宽度；
切换全角后，空格刚好是一个字宽度（段落中最明显，上下对齐）
em 就是一个全角占位符；
2em 就是2个全角位置；
body{font-size:62.5%;}
p{text-indent:40px;}
indent 动词 缩进，订货
八、段落排版--行间距（行高）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>行间距</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> 12 </body> 13 </html>
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
来试试，为右侧段落设置行间距（行高）为2em，使用文本显示更加美观
1.在编辑器的第7行，输入下面代码：
p{line-height:2em;}
九、段落排版--中文字间距、字母间距
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>字间距</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <h1>hello world!你好！</h1> 12 </body> 13 </html>
中文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing来实现。如下代码：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
任务
我也来试试，为标题设置字母间距为20像素
1.在右边编辑器的第7行，输入：
h1{letter-spacing:20px;}
十、段落排版--对齐
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>对齐</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 12 </body> 13 </html>
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)
h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>
同样可以设置居左：
h1{
text-align:left;
}
<h1>了不起的盖茨比</h1>
还可以设置居右：
h1{
text-align:right;
}
<h1>了不起的盖茨比</h1>
任务
我也来试试，为图片设置水平居中显示
在编辑器的第7行，输入下面代码：
div{text-align:center;}
图片居中，不能直接对img标签使用text-align:center;而是对该img标签所在的div或者其他块级元素使用才会达到这种效果。
复习一下：
1.字体：
family：对应字体。
2.颜色字号：
font-size:20px;color;red;
size:字体大小
color：字体颜色
3.粗体：
font-weight:bold
weigth:文字排版
bold:加粗
4.斜体：
font-style:italic
italic：斜体
5.下划线：
text-decoration:underline;
加下划线
6.删除线：
.oldPrice{text-decoration:line-through;}
line-through：文字中横线
7.缩进：
p{text-indent:2em;}
首行缩进2字符。
8.行间距：
p{line-height:2em;}
行间距2字符（1.5倍）
9.字母间距，单词间距：
letter-spacing:50px
设置字母与字母之间的间距
word-spacing:50px
单词间距设置
10.对齐：
text-align:left;
居左
text-align:center;
居中
text-align:right;
居右
letter-spacing:20px;设置中文字大小
word-spacing:20px;设置字母大小
text-input:2em;段落的前两个空格
text-align:left(左)center（居中）right(右);文本对齐
text-decoration:值underline(下划线)none（去掉下划线） line-through(删除线)
font-family:微软雅黑;多个字体用逗号隔开
font-style:normal(标准) italic(斜体)oblique;
background:url(图片地址);
text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：单词间距；
letter-spacing:20px:字母间距；
text-align:center：水平居中对齐；
text-align:center 段落排版对齐方式left，right
display：将元素变为块级元素，如2个span会换行
p{text-indent: 2em}--留俩个空格
p{line-height: 2em}--行高
.olgPrice{text-decoration: line-through;}--删除线
p{letter-spacing:50px;}--字母间隔或文字
p{word-spacing:50px;}--单词间隔
p{text-align: center(居中)/left(居左)/right(居右)；}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
