实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p{ font-weight: bold; /*定义粗体*/
font-size: 20px; /*定义字体大小*/
font-family: 楷体;
text-align: center;
}
h1{ text-align: center;
background:#CCC;
line-height: 100px;
}
span{font-size: "微软雅黑";
font-weight: bold;
font-size: 120px;
font-family:georgia;
}
img{width: 200px;}
b{display: block;width: 300px;height: 40px;background: pink;overflow:hidden;margin-bottom:100px;}
b:hover{overflow: visible;}
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<br>
<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:rgb(245,28,39);">e</span>
<br>
<!--图文混排 -->
<p style="display:inline-block;width: 300px;height:400px" >据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间，而目前Chromebook存储空间都不是很大。
</p>
<img src="1.png" alt="">
<b>虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验，但Chromebook的销量显然不及其他几款Windows系统的主流笔记本，因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是手抄照片:
上述代码总结和注释:
h1~h6 标题标签 独占一行
p 段落标签 独占一行
b 粗体标签
br 换行标签
strong 加重语气,也是粗体
i 斜体字
em 定义着重字
del 定义删除字标签
pre 预格式标签
span 文本标签
块级元素:div h1~h6 p 独占一行 对宽高属性值生效
行内: p span 可以共存于一行 对宽高属性值不生效 自带换行符
行内块元素: img 结合了块级以及行内的特点
行内块级相互转换:
display:inline 将块级元素转换成行内元素
display:inline-block 将块级元素转换成行内块元素
display:block 将行内元素转换为块级
font-weight: bold; 定义粗体
font-size: 30px; 定义字体大小
font-family: 楷体; 定义字体
overflow:hidden 溢出隐藏
hover{overflow:visible} 伪选择器 默认值,内容不会被修建,元素会被呈现在元素框之外
下面是作业代码截图以及预览图:
