• CSS属性使用之字体属性和文本属性使用规范标准有那些?


    CSS字体属性

    字体

    1. p {
    2. font-family: "微软雅黑";
    3. }
    4. h2 {
    5. font-family: "Microsoft YaHei",Arial;
    6. }
    • 可以选择多个字体,多个字体用逗号分割
    • 一个字体有多个单词时尽量用引号
    • 多个字体的目的,优先使用第一个字体,如果用户电脑上没有这个字体将使用下一个字体
    • 如果这些字体都没有,使用浏览器自带字体
    • chrome默认字体,微软雅黑

    字体大小

    1. p {
    2. font-size: 20px;
    3. }
    • 后面别忘了加px(像素)
    • chrome浏览器文字默认大小16px
    • 如果给body指明了文字大小,整个页面的文字的默认大小就改变了(标题大小不会改变,想要改变的话需要单独指明)

    字体粗细

    1. p {
    2. font-weight: normal | bold | bolder | lighter | number
    3. }
    • normal:正常字体,默认值

    • blod:粗体

    • bolder:特粗体

    • lighter:细体

    • number:数字 (后面不要加单位) 开发时常用

      • 700加粗(bold),400变细(nomal)
    • 示例,标题在使用的时候经常去掉加粗

    1. h2 {
    2. font-weight: 400;
    3. }

    文字样式

    • 主要是斜体
    1. p {
    2. font-style: normal | italic;
    3. }
    • normal:普通样式,italic:斜体样式

    字体复合属性

    • 示例:文字变倾斜,加粗,字号16,字体微软雅黑
    1. div {
    2. font: italic(font-style) 700(font-weight) 16px(font-size/line-hight) 'Microsoft yahei'(fonnt-family);
    3. }
    • 注意!顺序不能更换,里面各属性空格隔开
    • 括号内是这个填写的属性
    • 不需要的属性可以省略,但必须保留font-sizefont-family属性,否则 font(整个css属性) 都不起作用

    CSS文本属性

    • 文本外观,颜色,对齐,缩进,行间距

    文本颜色

    1. div {
    2. color: red;
    3. }
    • 预定义的值:各种英文单词
    • 十六进制的值:#ff0000(red) 开发最常用
    • RGB写法:rgb(200,0,0)

    对齐文本

    • 注:只能设置水平对齐格式
    1. div {
    2. text-align: center | left | right;
    3. }
    • left:左对齐 (默认值)
    • right:右对齐
    • center:居中对齐

    装饰文本

    1. p {
    2. text-decoration: none | underline | overline | line-through;
    3. }
    • none:默认值,没有装饰
    • underline:下划线
    • overline:上划线
    • line-through:删除线

    实例:去除链接的下划线

    1. a {
    2. text-decoration: none;
    3. }

    文本缩进

    • 文本首行缩进
    • 可以取负值
    1. p {
    2. text-indent: 20px | 2em;
    3. /* 首行缩进20px */
    4. /* 2em是当前2个文字大小 */
    5. }
    • 单位em,em是一个相对单位,相当于当前一个元素的大小 开发常用

    行间距

    • 控制行与行之间的距离
    1. p {
    2. line-height: 26px;
    3. }

  • 相关阅读:
    NLP-新词挖掘
    在Mission Planner上校准外置GPS罗盘
    系统架构师备考倒计时24天(每日知识点)
    springboot的缓存和redis缓存,入门级别教程
    [操作系统]1.概述
    Java中Thread类的基本用法
    Linux之Shell编程快速上手
    SAP 电商云 Spartacus UI 和 Accelerator UI 里的 ASM 模块
    分享15个国家的独特国际商业习俗
    【AUTOSAR-PduR】-2.1-参数PduRTransmissionConfirmation的说明
  • 原文地址:https://blog.csdn.net/LQZ8888/article/details/107898694