文字控制属性

文字控制属性

文章源自十年又十年-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