html字体相关属性，文本相关属性，背景相关属性，边框相关属性
程序员文章站
2022-05-08 16:17:47
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体相关属性，文本相关属性，背景相关属性,边框相关属性</title>
<style type="text/css">
div{
border:1px solid #f00;/*为div元素增加边框并设置边框颜色为红色*/
height:50px;/*为div指定长度和宽度*/
width: 100px;
}
</style>
</head>
<body background="背景.jpg">
<!-- border-style border-width分别用于设定组件的边框线型和边框线宽：可接受一个（指定上右下左）两个（指定上下，左右）三个（指定上，左右，下）四个（指定上右下左）参数 -->
缩进20pt，字体颜色红色，并加粗及阴影效果，添加背景图片
<div style="text-indent:20pt;color:red;font-weight: lighter;text-shadow: 20px,30px,50px,20;background-image: url(dancibenicon.bmp);background-attachment: scroll;background-repeat: repeat;">测试文字</div>
缩进40pt，字体加粗，颜色蓝色，边框为虚线型,边框宽度为5px
<div style="text-indent:40pt;color: rgb(0,0,255);font-weight: bold;border-style: dashed;border-width: 5px">测试</div>
居中对齐，字体最粗，颜色绿色,指定下边框为点线边框，宽度为10px
<div style="text-align:center;color:#00ff00;font-weight: bolder;border-bottom-style: dotted;border-bottom-width: 10px">测试文字</div>
居右对齐,指定左右边框为3d凹槽，宽度5px
<div style="text-align:right;border-left-style: groove;border-right-style: groove;border-left-width: 5px;border-right-width: 5px;">测试文字</div>
文本从右边流入，设置字符间距,设置整个边框为3d凸槽边框，边框宽度10px
<div style="direction:rtl;letter-spacing: 4px;border-style: ridge;border-width: 10px">测试文字</div>
文本从左部流入,设置为圆角边框,分别设置边框上右下左的类型以及宽度
<div style="direction:ltr;border-radius: 20px;">测试文字</div>
强制文本不换行，添加背景颜色,只设置上边的角为圆角
<div style="white-space:nowrap;background-color: #aaddff;border-top-left-radius: 20px;border-top-right-radius: 20px">测试文字测试文字测试文思</div>
文字溢出时只是简单地剪裁
<div style="overflow:hidden;white-space:nowrap;text-overflow: clip;">测试文字测试文字测试文思
</div>
文字溢出时用省略号表示,只设置下边角为圆角
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px">测试文字测试文思</div>
<!-- 如果将word-break属性设置为break-all，则可以在单词中换行，若设置为keep-all则不能允许在单词内换行，这也是浏览器默认的行为-->
不允许在单词内换行,字体大小超大,带中间划线
<div style="word-break: keep-all;font-size: large;text-decoration:line-through;border-style: outset;
border-width:20px;">we have a good day
</div>
允许在单词内换行，带上划线，并设置单词间距，
<div style="word-break: break-all;text-decoration:overline;word-spacing: 5px">we have a good day
</div>
<!-- 如果把word—wrap属性设置为break-word，即可以让浏览器在长单词和url地址中间换行 word-wrap属性会尽量让长单词还有url地址不要换行，即使将其设置为breake-word，只有当一行文本都不足以显示这个长单词时，浏览器才会允许在长单词和URL地址中间换行-->
利用word-wrap属性设置，允许在长单词和url中间换行，带下划线
<div style="word-wrap: break-word;text-decoration:underline;">
wehaveagoodday
</div>
利用word-wrap属性设置，不允许在长单词和url中间换行，带闪烁，字母转换为而大写
<div style="word-wrap:normal;text-decoration: blink;text-transform: uppercase;">wehaveagoodday
</div>
</body>
</html>上一篇： 计算属性