HTML的文本样式（二）
文本样式
1 首行缩进 text-indent：内容到边框的距离 第一行
2 文本线 text-decoration
3 换行方式 white-space
4 溢出显示方式 text-overflow
5 垂直对齐 vertical-align
基本上不用的
6 样式继承
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 文档标题-->
<title>Title</title>
<!-- 内部样式-->
<style>
#x1
{
/*宽度*/
width: 193px;
/*高度*/
height: 278px;
/*背景颜色 */
background-color: #bbb1b1;
/*字体颜色*/
color: black;
/*内边框*/
margin: 0px;
/*外边框*/
padding: 0px;
}
bodu
{
/*背景颜色 */
background-color: #eeeeee;
}
#x66
{
padding: 5px;
width: 100%;
box-sizing: border-box;
}
#x3
{
/*字体大小*/
font-size: 14px;
/*字体颜色 */
color: lawngreen;
/*字体粗细*/
font-weight: 300;
}
#x4
{
margin-top: 15px;
}
#x5
{
/*字体颜色 */
color:pink;
/*字体大小*/
font-size: 10px;
/*左浮动*/
float: left;
}
#x6
{
/*右浮动*/
float: right;
/*字体颜色 */
color: darkblue;
/*字体大小*/
font-size: 10px;
/*背景颜色 */
background-color: red;
/*圆角边框*/
border-radius: 10%;
}
</style>
</head>
<!--在浏览器显示 -->
<body>
<div id="x1">
<!-- 图片显示 -->
<img src="./英雄联盟.jpg" alt="图片未加载" title="英雄联盟" id="x2">
<div id="x66">
<p id="x3">巅峰礼赠</p>
<p id="x4">
<span id="x5">38天后结束</span>
<span id="x6">NEW</span>
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 文档标题-->
<title>Title</title>
<!-- 内部样式-->
<style>
#div01
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*边框*/
border: 1px solid;
/*首行缩进*/
text-indent:20px;
font-size: 0;
}
#div02
{
/*宽度*/
width: 40px;
/*高度*/
height: 40px;
/*行内块元素*/
display: inline-block;
/*背景颜色*/
background-color: red;
}
#p01
{
/*字体颜色*/
color: darkblue;
/*背景颜色 */
background-color: red;
/*高度*/
height: 20px;
/*宽度*/
width: 100px;
/*文本线*/
/*一般用于清除工作*/
text-decoration: underline;
}
</style>
</head>
<!--在浏览器显示 -->
<body>
<p id="p01">我喜欢HTML</p>
<div id="div01">
<div id="div02"></div>
<div id="div02"></div>
<!-- 如果你换行就行产生空格，行内块元素就会的距离-->
<div id="div02"></div>
<div id="div02"></div>
<!-- 设置父元素 font-size:0:-->
<div id="div02"></div>
<div id="div02"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p
{
/*字体颜色 */
color: red;
/*背景颜色*/
background-color: black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
</style>
</head>
<body>
<div>
<p>我是立刻搭街坊立刻洒家撒赖打开就枯叶蝇卢卡斯晨晒成 无力吐槽莫加进法计算的覅 枯搭街坊立刻洒家撒赖打开就枯叶蝇卢卡斯晨晒成</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
display: inline-block;
width: 200px;
height: 200px;
}
#div02
{
background-color: red;
}
#div03
{
background-color: black;
}
#div04
{
background-color: pink;
}
</style>
</head>
<body>
<div id="div01">
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
</div>
</body>
</html>
