文字控制属性

BBigSun 评论39阅读模式

文字控制属性

文字控制属性文章源自十年又十年-https://www.bbigsun.com/884.html

字体大小

  • 属性名: font-size
  • 属性值: 文字尺寸,PC端网页最常用单位 px
<style>
    /* 表单控件样式 */
    p {
        font-size: 30px;
    }
</style>

<p>设置字体大小为30px</p>

谷歌浏览器打开,F12进入调试模式,点击小箭头,悬停在文字上面可以看到标签的信息文章源自十年又十年-https://www.bbigsun.com/884.html

文字控制属性文章源自十年又十年-https://www.bbigsun.com/884.html

字体粗细

属性名: font-weight
属性值:文章源自十年又十年-https://www.bbigsun.com/884.html

  • 数字
    • 正常 400
    • 加粗 700
  • 关键字
    • 正常 normal
    • 加粗 bold

文字控制属性文章源自十年又十年-https://www.bbigsun.com/884.html

字体样式

清除文字默认的倾斜效果文章源自十年又十年-https://www.bbigsun.com/884.html

属性名: font-style
属性值:文章源自十年又十年-https://www.bbigsun.com/884.html

  • 正常: normal
  • 倾斜: italic

行高

设置多行文本的间距文章源自十年又十年-https://www.bbigsun.com/884.html

属性名: line-heigt文章源自十年又十年-https://www.bbigsun.com/884.html

属性值:文章源自十年又十年-https://www.bbigsun.com/884.html

  • 数字 + px
  • 数字 (当前标签 font-size 属性值的倍数)

文字控制属性

字体族

属性名: font-family

属性值: 字体名

font-family: 楷体, sans-serif;

扩展: font-family 属性值可以书写多个字体名,每个字体名用逗号隔开,执行顺序从左到右依次查找

  • font-family 属性最后设置一个一个字体族名,网页开发建议使用 无衬线字体

文字控制属性

font 复合属性

使用场景:设置网页文字公共样式

将需要设置的属性,写在一行

font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写);

实际工作中,公共样式从 淘宝、京东 copy

html, body {
    height: auto;
    width: 100%;
    min-width: 1200px;
    background-color: #f5f7fa;
    font: 14px / 1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
    color: #1c1f21;
    height: 100%;
}

文本缩进

属性名: text-indent

属性值:

  • 数字 + px
  • 数字 + em(1 em 等于当前标签字号大小)
p {
    font-indent: 2em;
}

文本对齐方式

控制内容水平对齐方向

属性名: text-align
属性值:

  • left: 左对齐,默认
  • center: 居中对齐,常用
  • right: 右对齐

文本修饰线

属性名: text-decoration

属性值:

  • none: 无
  • underline: 下划线
  • line-through: 删除线
  • overline: 上划线

color 文字颜色

属性名: color

属性值:

  • 颜色关键字: 颜色英文单词, red、green、blue
  • rgb 表示法:rgb(r,g,b),r、g、b表示红绿蓝三原色,取值 0-255
  • rgba表示法:rgba(r,g,b,a),a 表示透明度,取值 0-1
  • 十六进制表示法:#RRGGBB, #000000, #ffffff,简写 #000, #fff

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 18:46:19
  • 转载请务必保留本文链接:https://www.bbigsun.com/884.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定