CSS 文本装饰样式

最新推荐文章于 2024-07-24 11:13:53 发布

卋舉

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量93

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120659633

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

边框 border:1px solid gray;
内边距 padding:5px;
转换大小写 text-transform:uppercase;(小写 lowercase)
字间距 letter-spacing:5px;
行高 line-height:25px;
首行缩进 text-indent:50px;
斜体 font-style:italic;
下划线 text-decoration:underline dashed green;(虚线 dashed; 实线:solid)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>font 字体设置</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 取消标签加粗效果 font-weight:normal;
        居中 text-align : center;
        实现加粗效果 font-weight: bold;
        按照盒子模型,居中 text-align: center;
                       display: block;
        取消斜体 font-style:normal;
        控制文字首行缩进 text-indent:50px;
        斜体 italic,加粗 bold 字号,行高*/
        font: italic bold 25px/30px 'chaoshu';
     -->
    <style>
        h2 {
            /*取消标签加粗效果*/
            font-weight: normal;
            font-family: '微软雅黑';
            color: aqua;
        }

        h2, h3 {
            font-size: 50px;
            text-align: center;
        }

        i {
            /*实现加粗效果*/
            font-weight: bold;
            font-size: 50px;
            text-align: center;
            /*按照盒子模型*/
            display: block;
            /*取消斜体*/
            font-style: normal;
        }

        h3 {
            font-family: 'chaoshu';
        }

        @font-face {
            font-family: "chaoshu";
            src: url("fonts/caoshu.TTF");
        }

        i {
            font-family: "b";
        }

        @font-face {
            font-family: "b";
            src: url("fonts/b.ttf");
        }

        p {
            text-align: left;
            /*控制文字首行的缩进*/
            text-indent: 50px;
            /*斜体 italic,加粗 bold 字号,行高*/
            font: italic bold 25px/30px 'chaoshu';
        }
    </style>
</head>
<body>
<!-- i em 斜体标签 -->
<i>Lorem ipsum dolor.</i>
<h2>Lorem ipsum dolor.</h2>
<h3>雪中悍刀行</h3>
<p>Lorem ipsum dolor.Lorem ipsum dolor.Lorem ipsum dolor.Lorem ipsum dolor.Lorem ipsum dolor.Lorem ipsum dolor.Lorem
    ipsum dolor.</p>
</body>
</html>

卋舉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 文本装饰样式

边框 border:1px solid gray;内边距 padding:5px;转换大小写 text-transform:uppercase;(小写 lowercase)字间距 letter-spacing:5px;行高 line-height:25px;首行缩进 text-indent:50px;斜体 font-style:italic;下划线 text-decoration:underline dashed green;(虚线 dashed; 实线:solid)<!DOCTYPE
复制链接

扫一扫

专栏目录