HTML5第五课时，字体属性

来源：互联网发布：网络公开课编辑：程序博客网时间：2024/06/07 18:15

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <style>        p{            /*字体颜色*/            color: darkmagenta;            /*字体的修改,前面是字体族名称，最后一个是类族名称，浏览器在实现字体的时候，会依次判断            是否支持当前的字体，直到最后的字体系列。*/            font-family: 仿宋,宋体,黑体,sans-serif;            /*复合属性：font:12px/1.5,仿宋,宋体,sans-serif               也是字体的实现， 其中12px/1.5是字体所占的行高是12px*1.5即18px。*/            /*字体大小，取值：1：具体的px值。2：百分比%（默认字体大小16px）*/            font-size: 40px;            /*bold加粗，bolder深度加粗，lighter细体，100-900*/            font-weight: bolder;            /*字体显示格式，斜体和正常*/            font-style: italic;            /*字体透明度，1是默认的颜色，0是全透明。*/            opacity: 0.5;            /*行高  单行字体占用的高度，               也可以用百分比%，100%就是跟字体大小一样的高度，字紧挨着。*/            line-height: 100px;/*如果想让文本上下居中，设置行高和外部容器的高度一直就可以。*/            /*text-align是自己的位置，justify是两端对其，left或者start：左对齐（默认）                right或者end：右对齐，center居中*/            text-align: justify;            /*字符间距*/            letter-spacing: normal;            /*文本修饰 上划线（overline），下划线（underline），删除线（line-through）*/            text-decoration: none;            /*自动处理数字、英文的文本长度。                auto自动给溢出的加上滚动条，紧挨着字体的部分。拖拽只是溢出的文本移动。                hidden超出的部分自动切断，inherit和visible是自动加上滚动条，                在网页的最下方，拖拽整个网页都移动。                scroll是给所有的文本内容不管溢出不溢出都加上滚动条。                */            overflow: visible;            /*text-overflow是显示单行文本超出的时候如何显示，ellipsis是‘...’显示*/            text-overflow: ellipsis;           /*           /!*下面是三行配合写法是让溢出的地方用‘...’来显示*!/            overflow: hidden;            white-space: nowrap;/!*不换行*!/            text-overflow: ellipsis;/!*‘.....’显示*!/            */            /*文本阴影，第一个是x轴方向投影，第二个是y轴方向投影。第三个是颜色。*/            text-shadow: 1px 1px yellow;            /*文本描边，第一个是边的宽度，第二个是颜色。*/            -webkit-text-stroke: 1px red;            /*缩进两倍的字符大小，无论字体大笑怎么变化，都会缩进两个字符。*/            text-indent: 2em;

/* white-space=nowrap  不允许文字换行。 */

        }    </style>    <title>字体属性</title></head><body><p id="p1">    下载这个东西之后，就可以安装到电脑上，然后就可以尽情的玩乐啦。    下载这个东西之后，就可以安装到电脑上，然后就可以尽情的玩乐啦。    下载这个东西之后，就可以安装到电脑上，然后就可以尽情的玩乐啦。    下载这个东西之后，就可以安装到电脑上，然后就可以尽情的玩乐啦。</p><p>    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p></body></html>

0 0