dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 683|回复: 0

[Html/Css] 11种常用css样式之开篇文本字体学习

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3995

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3995

    发表于 2020-3-22 16:00:02 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏
    文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
    字体:1.font-family/*字体类型*/2.font-size/*字体大小*/3.font-style/*字体样式*/4.font-weight/*字体粗细*/
    *注意:font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/ 其次word-break: break-all;/*文本折行 自动换行,中文的会自动换行,单词ok,字母的不会,默认文本添加overflow: auto;word-break: break-all;*/

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>11种常用css样式之文本字体学习</title>
        <style type="text/css">
            div.box1{
            /*字体*/
            font-family:"Microsoft Yahei";/*字体类型 添加引号有无均正常展示,建议添加*/
            font-size:24px;/*字体大小*/
            font-style:italic;/*字体外观,斜体等同em*/
            font-weight:900;/*字体粗细 默认100-900,常用bold粗体等同值900 normal正常 lighter细体*/
            font:30px/1em "黑体";
            }
            /*font字体的简写:font:style weight size/line-heigt font-family*/ /*要求必须出现的2个是 size font-family*/
            font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            /*文本*/
            div.box2{
            letter-spacing:1px;/*字间距*/
            word-spacing: -5px;/*词/字符间距*/
            text-decoration: line-through;
            /*下划线 underline overline line-through*/
            text-align:justify;/*对齐 left right center justify*/
            text-indent: 100px;/*缩进*/
            /* height: 40px;
            background-color: #ccc; */
            /*块级元素高度与行高一致,文本垂直居中展示*/
            line-height: 40px;
            color: rebeccapurple;/*颜色 16进制 rgb 单词*/
            /*恶意输入字母,系统不换行,出现滚动条, word-break: break-all*/
            overflow: auto;
            word-break: break-all;/*文本折行*/
            }
        </style>
    </head>
    <body>
        <div class="box1">
            愿星空不问赶路人,时光不负有心人“你的压力来源于:无法自律,只是假装很努力;现状跟不上内心的欲望;所以你焦虑又恐慌”
        </div>
        <div class="box">
    文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/
        </div>
        <div class="box2">
            [url]https://www.cnblogs.com/dhnblog/May[/url] the starry sky not ask passers-by, time is worthy of the people who care about you "Your pressure comes from: you ca n’t discipline yourself, just pretend to work hard; the status quo can't keep up with your inner desires; so you are anxious and panic"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </div>
    </body>
    </html>






    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2025-2-2 04:42 , Processed in 0.078290 second(s), 33 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表