CSS文字排版
2016-06-06 16:58
531 查看
一、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>
相关文章推荐
- SnackBar 笔记(二)样式美化
- 改变CSS世界纵横规则的writing-mode属性
- 搜索一个class或者方法或者id写在哪个JS或CSS里面
- CSS3翻页按钮
- css模型
- css中的display
- 精通CSS+DIV网页样式布局(一)
- html编码规范+css编码规范
- css 相对和绝对位置
- style标签下的CSS代码的显示与实时编辑
- vscode 配置 markdown(.md) 预览
- CSS成长之路----知识点篇
- margin负边距布局
- Flex发家
- CSS 之 嵌套 margin-top 处理
- 如何编写可维护的CSS【转载】
- js获取元素的外链样式的简单实现方法
- reset.css
- 点击同一图片,控制音乐开始、暂停
- CSS绘图:星星