• CSS中的字体样式和文本样式


    CSS中的字体样式:

    在手机端设置大小的时候,一般不使用px

    CSS字体颜色三种表达方式:

    1.具体颜色名称         例:color:red;

    2.数字 0~255,百分比:0%~100%        例:color:rgb(0%,100%,0%)

    3.十六进制:#开头,六位,0~F         例:color:#00880a

    font-weight文字粗细:

    font-weight:normal |bold | bolder |lighter | 100~900

    400相当于normal,700相当于bold,一般用的就是normal和bold,默认也是normal

    font-style文字样式:

    font-style:normal |italic |oblique

    italic斜体,oblique倾斜

    font属性(简写)

    font: font-style font-variant font-weight font-size/line-height font-family

    说明:值之间空格隔开,注意书写顺序,font-size和line-height同时存在要用/隔开

    CSS中的文本样式:

    text-align,设置元素内文本的水平对齐方式

    text-align:left |right |center |justify     justify为两端对齐

    注:该属性对块级元素设置有效,像span这种的无效

    line-height,行高

    vertical-align,设置元素内容的垂直方式,用于行内元素和表格中,不能用于块级元素中

    vertical-align:baseline |sub |super |top |text-top |middle |bottom |text-bottom |长度 |百分比

    垂直居中应用

    1.单行文字垂直居中

    代码如下:

    html

        <div class="wrap">
            <p>welcome</p>
        </div>

    css

            * {
                margin: 0;
            }
            .wrap {
                border: 1px solid greenyellow;
                height: 100px;
                 100px;
                line-height: 100px;
                text-align: center;
            }        

    效果如下:

     

    2.多行文字垂直居中(因为vertical-align不能用于块级元素,所以改成表格布局,父元素也要设置成表格布局)

    html

        <div class="wrap">
            <div class="content">
                <p>welcome</p>
                <p>css</p>
            </div>
        </div>

    css

            * {
                margin: 0;
            }
            .wrap {
                border: 1px solid paleturquoise;
                height: 100px;
                 100px;
                display: table;
            }
            .content {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }

    效果如下:

    文本样式的其他属性

     

  • 相关阅读:
    oracle-报错 RMAN-03002,RMAN-06172
    oracle--报错 ORA-01003,ORA-09817,ORA-01075
    oracle--报错 ORA-00257
    Linux-iostat命令
    oracle--查询速度慢
    linux-根目录添加内存
    mysq-5.7忘记密码修改
    zsh: command not found cnpm,gulp等命令在zsh终端上报错的问题
    vue中的js引入图片,必须require进来
    如何启动一个Vue3.x项目
  • 原文地址:https://www.cnblogs.com/helloCindy/p/11577833.html
Copyright © 2020-2023  润新知