本次主要学习了如何通过样式属性来控制网页上文本的样式输出，可以调节字体的加粗、大小、字体类型、颜色等。另外通过行内元素与块元素之间的转换可以进行为网页的布局。
实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
div span{
font-size: 38px;
font-weight: bold;
text-align: center;
}
.demo-p{
font-size: 20px;
font-weight:bold;
font-family: 楷体;
}
.demo-h1{
height: 100px;
font-weight:bold;
background:#ccc;
text-align:center;
line-height:100px;
}
#google{
width:400px;
height:40px;
overflow:hidden;
background:#ccc;
margin-bottom:200px;
}
#google:hover{
overflow: visible;
}
</style>
</head>
<body>
<h1>这是一个h1</h1><!-- 标题自动加粗 -->
<h2>这是一个h2</h2>
<h3>这是一个h3</h3>
<h4>这是一个h4</h4>
<h5>这是一个h5</h5>
<h6>这是一个h6</h6>
<i>这是一个斜体标签</i><br><EM>斜体标记</EM>
<br><b>加粗标签</b>
<strong>同样加粗</strong>
<p>这是一个段落标记，这是一个段落标记，这是一个段落标记，这是一个段落标记，这是一个段落标记，这是一个段落标记这是一个段落标记，这是一个段落标记，这是一个段落标记，这是一个段落标记，这是一个段落标记，</p><!-- 前后自动换行 -->
<s>这是删除线标记</s><hr>
<del>定义删除标签</del><br>
<pre>预排版 格式
格式
</pre><!-- 可以显示回车和空格 -->
<span style="background: pink">300</span><del>230</del>
<span style="font-size:19px;color: green">php中文网</span>
<br>
<div align="center" >
<span style="color: #176BF1">G</span>
<span style="color: #DB4739">o</span>
<span style="color: #FEBD01">o</span>
<span style="color: #176BF1">g</span>
<span style="color: #009C53">l</span>
<span style="color: #DB4739">e</span>
</div>
<p class="demo-p">php中文网</p>
<h1 class="demo-h1">php中文网</h1>
<!-- 图文混排 -->
<p style="width:200px;height:400px;font-size:22px;font-weight:bold;display:inline-block;">
过去，人们只能通过台式电脑这一种设备来访问Google。如今，人们一天之内会通过各种不同的平台、应用程序和设备来使用Google的产品。你期待无论何时何地，只要有需求，Google都能给予帮助，无论是通过手机、电视、还是车里的仪表盘，当然少不了的还有台式机!
</p>
<img src="images/google.png" style="border:1px solid red;height:400px;">
<img src="images/google.png" style="border:1px solid red;height:200px;display: block;">
<div id="google" >
过去，人们只能通过台式电脑这一种设备来访问Google。如今，人们一天之内会通过各种不同的平台、应用程序和设备来使用Google的产品。你期待无论何时何地，只要有需求，Google都能给予帮助，无论是通过手机、电视、还是车里的仪表盘，当然少不了的还有台式机!
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
h1-h6这些段落标记会前后自动换行，同时也会加粗字体，p标记也会自动换行。
通过display这个样式属性可以实现行内与块的转换，display：block；转换成块元素，display：inline-block；转换成行内块元素，display：inline；转换成行内元素。
overflow溢出显示，有两个属性值hidden和visible，隐藏和显示，控制溢出文本的显示。
下面是简单图文混排的案例：
实例
<!DOCTYPE html>
<html>
<head>
<title>
黄晓明出借账户被卷股票操纵案 知情人：账户未冻结
</title>
<meta charset="utf-8">
<style type="text/css">
h1{
text-align:center;
}
img{
margin: 0px;
width:500px;
display: block;
}
#time{
margin: 0 auto;
margin-bottom: 10px;
font-size:18px;
width:750px;
}
div{
margin: 0 auto;
width:700px;
background: #ccc;
}
p{
font-weight:bold;
font-family: 楷体;
font-size:20px;
}
</style>
</head>
<body>
<h1>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h1>
<p id="time">2018-08-13 21:18 </p>
<img src="images/xiaoming.jpg" align="center">
<div>
<p>(来源：财新报)</p>
<p>
搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。
</p>
<p>
而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行操纵，这些账户也不会被冻结。
</p>
<p>
8月10日晚，证监会通报了5宗操纵案件，其中，高勇控制16个账户，操纵“精华制”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。
</p>
<p>
根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。
</p>
<p>
媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”
</p>
<p>
黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。
</p>
</div>
</body>
</html> 点击 "运行实例" 按钮查看在线实例
以上代码是新闻的排版，通过margin和text-align使得整体内容居中，通过使img转换成块元素来达到居中的效果。
以上是手抄的文本控制的基本标签和行内、块的转换方式。
总结：
使用相关的font属性可以控制文本的基本样式
行内元素居中无效，块元素才可以居中，文字通过text-align可以在块元素居中
display这个属性可以转换行内或块，方便网页的布局
