美文网首页
文本、背景、边框、光标、列表、表格、精灵图

文本、背景、边框、光标、列表、表格、精灵图

作者: 竹忧 | 来源:发表于2018-01-23 21:45 被阅读0次

    文本属性

    • letter-spacing 字母间隔 值为长度,可以是负值
    • word-spacing 词的间距(通过空格识别)
    • text-decoration 文字修饰 underline(下划线) | overline(上划线) | line-through(删除线) |none(默认)
    • text-align 横向排列 left | right | center
    • vertical-align 垂直对其方式:
      • middle: 将支持valign特性的对象的内容与对象中部对齐
      • bottom: 将支持valign特性的对象的文本与对象底端对齐
      • baseline: 将支持valign特性的对象的内容与基线对齐
      • top: 将支持valign特性的对象的内容与对象顶端对齐
    • text-indent: 文本缩进 2em(2个字) 50px
    • line-height: 设置行间距离 不允许使用负值

    背景属性

    • background-color: 设置背景色,或设置为transparent(透明)
    • background-image: 背景图片 url 或者 none
    • background-repeat: 背景重复 repeat | repeat-x | repeat-y | no-repeat
    • background-attachment: 背景附件 scroll | fixed
    • background-position: 背景位置 left | center | right (横向) | top | center | bottom (纵向) 或者使用百分比或者数值
    • background: background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>
    background:red url('./123.png') no-repeat 100px 10px;
    

    边框属性

    • border-style: 值:dotted 点线 | dashed 虚线 | solid 实线 | double 双实线
    • border-width: 边框宽度
    • border-color: 边框颜色
    • border:边框宽度 边框样式 边框颜色

    鼠标光标属性

    • cursor:pointer(小手) | none(隐藏) | move(十字架) | wait(加载中) | help(问号) | not-allowsd(禁止)

    列表属性

    • list-style-type:disc(实心圆) | circle(圆圈) | square(方块) | demial(数字) | lower-roman(小罗马数字) | upper-roman(大罗马数字) | lower-alpha(小写字母) | upper-alpha(大写字母)
    • list-style-position: inside(标识在li里面) | outside(标识在li外面)
    • list-style-image: 引入图片作为列表项的修饰 url(./123.gif)

    表格属性

    • table-layout: 表格布局方式 auto(默认) | fixed(平均分配不受数字影响)
    • border-collapse: 表格的行和单元格的边是合并还是独立 separate(默认独立) | collapse(合并)
      *border-spacing: 当表格边框独立时,行和单元格的边框在横向和纵向上的间距
    • caption-side: caption 在table上面还是下面 top(默认上方) | bottom(下方)
    • empty-cells: 没有内容的单元格隐藏还是显示 show(默认显示) | hidden(隐藏)

    精灵图

    background:url('../../dist/images/loginlist.png') no-repeat 0px -75px;
    

    相关文章

      网友评论

          本文标题:文本、背景、边框、光标、列表、表格、精灵图

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