美文网首页
1.4.3文本

1.4.3文本

作者: 每日活菌 | 来源:发表于2016-03-04 19:22 被阅读0次

    1.4.3.1字体

    font-size

    font-size:<length>|<percentage>|<absolute-size>|<relative-size>

    文字大小:font-size:12px;
        文字大小:font-size:16px;
        文字大小:font-size:2em
        文字大小:font-size:200%
    

    em与百分比是有参照物的参照的为副元素。

    font-family

    font-family:[<family-name>|<generic-family>]#
    可以指定具体的字体名称,或者通用的字体名称
    <generic-family>=serif|sans-serif

    • 字体系列:font-family:arial;
      直接指定字体,英文字体为arial,中文字体为系统默认
    • 字体系列:font-family:arial,Verdana,sans-serif;
      可以用逗号分隔写多个值,英文数字用arial,中文字体会用sans-serif,浏览器设置的sans-serif
    • 字体系列:font-family:Verdana,"microsoft yahei";
      英文为Verdana字体,中文为微软雅黑
    • 字体系列:font-famil:"宋体“,serif;
      字体中英文全部为宋体

    font-weight

    font-weight:normal|bold

    字体粗细:font-weight:normal;
    字体粗细:font-weight:bold;

    font-style

    font-style:normal|italic
    italic字体的斜体字体是有斜体的情况
    字体风格:font-style:normal; 正常
    字体风格:font-style:italic; 斜体

    line-height

    line-height:normal|<number>|<length>|<percentage>
    行高:line-height:40px;
    行高:line-height:3em;
    length的值em表示当前字体的大小30px,相当于90px行高
    行高:line-height:300%;
    行高:line-height:3;
    300%与3是有区别的,3为直接继承

    font

    font:[[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]
    注意:前面两个<font-style>与<font-weight>,<line-height>是可选的,<font-size>与<font-family>是必须写的
    缩写:font:30px/2 "Consolas",monospace;
    缩写:font:italic bold 20px/1.5 arial,serif
    缩写:font:20px arial,serif;
    其他值不写出时为默认值,必填项必须写出,少一个不起作用

    color

    color:red;
    color:#ff000; #+六位16进制
    color:rgb(255,0,0);
    color:rgba(255,0,0,1);
    a为透明度, 1表示不透明,若是0.5表示半透明,0全透明
    color:transparent 表示全透明

    1.4.3.2对齐方式

    text-align

    text-align:left|right|center|justify
    左对齐,有对齐,居中,两端对齐

    vertical-align

    vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>
    基线,下标,上标,对齐当前一行最高点,对齐文本最高点,居中,对齐当前一行最低点,对齐文本最低点,百分比参照line-height,px em参照baseline
    vertical-align:middle;
    垂直居中
    vertical-align:sub;
    下标形式

    text-indent

    text-indent:<length>|<percentage>
    text-indent:2em;
    首行缩进两个字符,em以文字大小为参照物。
    text-indent:10px;
    一般不用
    text-indent:20%;
    参照物整个容器的宽度,上例缩进了宽度的五分之一

    1.4.3.3格式处理

    white-space

    换行要不要保留,空格要不要合并,等等
    white-space:normal|nowrap|pre|per-wrap|pre-line

    xxxxxxx New Lines Spaces and Tabs Text Wrapping
    'normal' collapse collapse wrap
    'nowrap' collapse collapse no wrap
    'pre' preserve preserve no wrap
    'pre-wrap' preserve preserve wrap
    'pre-line' preserve collapse wrap

    pre-wrap,是最常用的保留空格,换行,tab,可以自动换行。

    word-wrap

    word-wrap:normal|break-word
    设置break-word可以自动换行,normal不可以自动换行

    word-break

    word-break:normal|keep-all|break-all
    normal与keep-all基本一样,break-all可以任意两个字母之间打断,换行

    1.4.3.4文本修饰

    text-shaow

    text-shadow:none|[<length>{2,3}&&<color>?]#
    默认值none,或者,两到三个length加上一个颜色,后面可以写多个
    text-shadow:1px 2px #f00;
    文字颜色黑色加上了红色阴影,1px为x轴偏移方向,2px为y轴偏移方向
    text-shadow:1px 2px 3px #f00;
    第三个值为阴影的模糊半径
    text-shadow:1px 2px 3px;
    color不写出时,阴影为文字的颜色

    text-decoration

    text-decoration:none|[underline||overline||line-through]
    不加线,下划线,上划线,文字中间化线
    可以写多个线
    text-decoration:underline;
    text-decoration:underline overline;

    1.4.3.5高级设置

    text-overflow

    text-overflow:clip|ellipsis
    文本溢出,后面的点点点
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    以上三个一起用

    cursor

    定义鼠标形状属性
    cursor:[<uri>,]*[auto|default|none|help|pointer|zoom-in|zoom-out|move]
    可以用图片,
    auto自动处理鼠标图形,default普通鼠标光标,none鼠标消失,help鼠标带问号,pointer手形,zoom-in放大镜,zoom-out缩小镜,move上下箭头,左右箭头
    cursor:pointer
    手形
    cursor:uri(xx.cur),pointer
    url可以写多个,后面跟上系统自带的图形,以防止图片访问失败

    inherit

    强制继承,给为与副元素一样的。

    相关文章

      网友评论

          本文标题:1.4.3文本

          本文链接:https://www.haomeiwen.com/subject/zguokttx.html