实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px;/*定义字体大小*/
font-family:楷体;/*定义字体*/
}
h1{ text-align:center;/*left*/
height: 100px;
background:#ccc;
line-height:100px;/*定义行高*/
}
span{font-size:40px;font-weight: bold;font-family:georgia;}
img{width: 600px;
height: 400px;}
b{display:block;
width: 300px;
height:100px;
background:pink;
overflow: hidden;/*溢出隐藏*/
}
b:hover{overflow: visible;}/*默认值,内容不会被修剪,元素会被呈现元素框外围*/
</style>
</head>
<body>
<!-- h1~h6标签 -->
<h1>php中文网</h1>
<h2>这个是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<b>这是个粗体标签</b><!-- 字体加粗标签 -->
<p style="display:inline-block;width: 300px;height: 400px;">近日，互联网金融风险专项整治工作领导小组办公室、网贷风险专项整治工作领导小组办公室联合召开网贷机构风险处置及规范发展工作座谈会，汇总分析当前网贷风险形势及前期应对工作情况，研究拟订下一步风险应对举措。</p><br>
<p>会议指出，做好网贷风险专项整治是防范化解重大风险攻坚战的重要战役，各地要提高思想认识，切实承担属地风险处置责任.</p><!-- p标签定义段落,br换行标签 -->
<strong>php中文网</strong><!-- 加重语气,强调文本 -->
<i>斜体字</i>
<em>定义一个着重字</em><!-- 和strong一样也是强调,比strong强调弱一些 -->
<del>定义删除标签</del>
<span>399</span><!-- 组合文档中的行内元素 --><del>499</del><!-- 打折 -->
<pre>预格 式
化文本</pre><!-- 输出页面的空格和换行 -->
<!-- 元素分类 -->
<!-- 1. 块级元素:div h1~h6 p 独占一行,对宽高属性值设置生效
2.行内元素:可以共存一行对宽高属性值设置不生效
3.行内块元素:结合了块级以及行内的特点 -->
<img src="images/timg.jpg" style="width:200px;height:300px;"><span>123</span><br>
<!-- 行内块级相互转换:
display:inline 将块级元素转换为行内
display:inline-balck;将块级元素转换为行内块元素
display:block将行内元素转化为块级 -->
<div style="width: 100px;height: 100px;background: pink;display: inline">1</div><!-- 宽高属性值设置不生效 -->
<div style="width: 100px;height: 100px;background: pink;display:inline-block;">2</div>
<span style="width: 100px;height: 100px;background: pink;display: block;">3</span>
<span style="width: 100px;height: 100px;background: pink;display:inline-block;">4</span>
<span style="width: 100px;height: 100px;background: pink;display:inline-block;">5</span>
<!-- 谷歌logo -->
<span style="color:#0388F1;">G</span>
<span style="color:rgb(245,28,39);">O</span>
<span style="color: #FFE80E">O</span>
<span style="color:#0388F1;">g</span>
<span style="color: #39FF1B;">l</span>
<span style="color: #FFE50E";>e</span><br>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534247083200&di=10c2bd085198997e320a7f9979c58a9b&imgtype=0&src=http%3A%2F%2Fimg.ph.126.net%2FSwAyzkbHlzZua-cAgc4oqQ%3D%3D%2F3685914820026630863.jpg" >
<b>“如果Google决定回到中国，我们非常有信心再PK一次，再赢一次。”当谷歌返华的消息还未有定论时，没有人会想到，百度CEO李彦宏会在自己的朋友圈里率先发声。 近日，人民日报在社交平台Twitter、Facebook上发布消息称，欢迎Google回归中国大陆，但前提是遵守中国政府的相关法律政策。。然而，作为当事者的谷歌，对此仅回应称“不评论有关未来计划的猜测”。。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局页面</title>
<style type="text/css">
h1{text-align:center;/*left right*/
height: 100px;
background: white;
line-height:100px;/*定义行高*/}
}
</style>
</head>
<body>
<h1>人民日报海外版：美国组建“太空军队”是要统治太空吗？</h1>
<br>
<div align="center">
<img src="https://inews.gtimg.com/newsapp_bt/0/4812175999/641">
<p>(来源:腾讯网)</p>
</div>
<br>
<div align="center">
<p style="display: inline-block;width: 400px;height: 400px;">美国《华盛顿邮报》称，日前，美国副总统彭斯在五角大楼宣布，为确保美国在太空的主导地位，美国计划到2020年组建一支独立的“太空军队”。如果这一计划成真，继陆军、海军、空军、海军陆战队、海岸警卫队之后，太空军将成为美国第六个正式军种，也是自1947年美国成立空军后设立的首个新军种。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码:
总结:
要掌握块级元素,行内元素,行内块元素的转换,使用时援助已转换
display:inline 讲块级元素->行内元素
display: inline-block 讲块级元素->行内块元素
display: block 讲行内元素->块级元素
2.块级元素:div h1~h6 p 独占一行,对宽高属性值设置生效
行内元素:strong,i,span可以共存一行对宽高属性值设置不生效
行内块元素:结合了块级以及行内的特点
3.css的为类选择器:hover 鼠标移上去 、:link 未访问、:visited 已访问、 :active 选定
