zoukankan      html  css  js  c++  java
  • css字体样式+文本样式

    font-family属性值:具体字体名或者字体集

    如果是中文或者有单词之间有空格,需要加双引号

    字体集:

    Serif (有装饰线)

    Sans-serif (无装饰线)

    Monospace

    Cursive

    Fantasy

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1{
                font-family: "Times New Roman";
            }
            p{
                font-family: "微软雅黑","宋体","黑体",sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>css层叠样式表</h1>
        <p>什么是css层叠样式表呢?</p>
    </body>
    </html>

    font-size 相对单位

    px (受显示器分辨率影响,在手机端一般不使用)

    em (针对父元素)

    % (针对父元素)

    字体颜色

    可查询web安全色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*rgb数字:0~255*/
            h1{
                color:rgb(0,255,0);
            }
            /*rgb百分比:0%~100%*/
            p{
                color:rgb(0%,100%,0%);
            }
            p.spe{
                color:#008800;/*#开头,六位,0~F*/
                color:#080;/*简写*/
            }
        </style>
    </head>
    <body>
        <h1>css层叠样式表</h1>
        <p>什么是css层叠样式表呢?</p>
        <p class="spe">颜色十六进制</p>
    </body>
    </html>

    font-variant:small-caps 小型大写字母

    css文本样式

    text-align 只对块级元素有效:可以在元素外嵌套块级元素,给外元素添加text-align属性

    margin:0 auto; 也可以设置元素居中显示

    line-height

    实际开发中,行高一般使用em单位,与字体大小相关

    浏览器默认行高一般是1.2em

    行高可以继承自父元素,继承的是计算后的值,而不是直接继承百分比

    首行缩进 text-indent

    vertical-align 对行内元素或者单元格元素生效

    可以用在图片上 vertical-align:middle;

    或者可以用具体的数值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .wrap{
                height:400px;
                width:500px;
                border:1px solid;
                display: table;/*转为表格元素*/
            }
            .content{
                vertical-align: middle;
                text-align:center;
                display: table-cell;/*转为单元格元素*/
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="content">
                <p>什么是<span class="sub">css</span>层叠样式表呢?</p>
                <p>什么是<span class="super">css</span>层叠样式表呢?</p>
            </div>
        </div>
        
    </body>
    </html>

     word-spacing 单词间距

     letter-spacing 字母间距

    单词的判断以空格为准

    text-transform:capitalize | uppercase | lowercase | none 设置文字大小写

    text-decoration:underline | line-through | overline | none 设置文字装饰线

    也可以设置多个样式 text-decoration:underline overline;

  • 相关阅读:
    char/byte/short类型的加法和类型转换问题
    Java四种基本数据类型
    Git知识集锦
    解决给自己的博客添加百度统计不能验证的问题
    C++静态代码分析工具推荐——PVS-Studio
    Qt在控件未显示时如何获取正确的控件尺寸
    C#程序如何捕捉未try/catch的异常——不弹“XXX已停止工作”报错框
    win10下vs2015编译的程序如何运行在win7等系统(无需安装Redistributable)
    Qt分页导航控件
    win server 2008配置ftp无法登陆问题的解决办法
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12245182.html
Copyright © 2011-2022 走看看