• CSS文本


    1、css文本早期就有一些应用 先来看看文本功能的字体类型
    font-family 定义字体的类型 一般应用字体是微软雅黑和宋体
    font-style 定义字体样式 normal(默认值) italic(斜体) oblique(倾斜)
    font-weight 定义字体粗细 normal(默认值) bold(粗体) bolder(特粗体) lighter(细体)
    除了设置关键字以外,还可以设置数字,数字越大表示越粗(常用的是100-900)
    font-size-adjust 定义是否强制对文本使用同一尺寸 none(不设置大小) number(设定字体尺寸)
    font-stretch 定义是否横向拉伸变形字体 normal : 不应用拉伸变形(一般使用)

    narrower : 使用比当前设置的值导致字体宽度更小的值

    wider : 使用比当前设置的值导致字体宽度更大的值
    font-variant 定义字体大小写 normal(默认值) small-caps(小型的大写字母字体)


    2、接下来一起看看文本类型

    word-spacing 定义词与词之间的距离 normal(默认值) length(设置词与词之间的距离,可以是负数)
    letter-spacing 定义字符与字符之间的距离 normal(默认值) length(设置字符之间的距离,可以是负数)
    vertical-align 定义文本的垂直对齐方式 baseline(默认值) sub(上标对齐) super(下标对齐) bottom(行框低端对齐)
    text-bottom(行内文本低端对齐) top(顶端对齐) middle(居中对齐)
    百分数字、长度
    text-decoration 定义文本的修饰线 none(默认值) underline(下划线) overline(上划线)
    line-through(删除线) blink(闪烁线)
    text-indent 定义文本首行缩进 length(长度单位)和百分比
    text-align 定义文本水平对齐方式 left(左对齐) center(居中对齐) right(右对齐) justify(两端对齐)
    line-height 定义文本行高 normal(默认值) 长度值 百分比值 数字
    text-transform 定义文本大小写 none(默认值) uppercase(大写) lowercase(小写) capitalize(首字母大写)
    text-shadow 定义文本阴影效果
    white-space 定义文字之间和文本之间的空白符间距 normal(默认值) nowrap(空白符合并,换行符忽略)
    pre(空白符、换行符保留) pre-wrap(空白符、换行符保留) pre-line(空白符合并,换行符保留)
    direction 控制文本流入的方向 ltr(默认值) rtl(文本从右到左流入) inherit(文本流入方向由继承获得)

    3、CSS3文本阴影属性
    text-shadow:x(X轴偏移量,不可以省略,允许负值) y(Y轴偏移量,不可以省略允许负值) blur(模糊度,可以省略) color(颜色,可以省略)
    4、CSS3文本溢出属性
    text-overflow :clip(不显示省略标记,只是简单地裁切) ellipsis(文本溢出时候显示省略标记)
    text-overflow 只是简单地决定文本是否显示省略标记
    要实现自动换行和省略的效果需要配合其他两个属性使用
    overflow:hidden;(溢出内容隐藏)
    white-space:nowrap;(强制文本在一行显示)
    text-overflow:ellipsis;(省略标记)三者一起使用
    并且在使用的时候必须定义好width属性
    5、CSS3文本换行
    word-wrap:normal/break-word
    word-wrap实现长单词和url地址自动换行

  • 相关阅读:
    【题解】SCOI2007组队
    【题解】Atcoder AGC#16 E-Poor Turkeys
    整数拆分 [dp+多项式插值]
    王子 [费用流]
    [ARC083F] Collecting Balls [建二分图+环套树定向+建拓扑图+树的拓扑序计数]
    [BZOJ3196] 二逼平衡树 [权值线段树套位置平衡树]
    [TJOI2017][bzoj4889] 不勤劳的图书管理员 [线段树套线段树]
    [HNOI2015][bzoj4009] 接水果 [整体二分+扫描线]
    [bzoj3065] 带插入区间第k小值 [重量平衡树套线段树]
    [luogu3676] 小清新数据结构题 [树链剖分+线段树]
  • 原文地址:https://www.cnblogs.com/heily/p/7788740.html
Copyright © 2020-2023  润新知