CSS 常用属性

1 字体属性

  • font

    font:字体风格[字体加粗]<字体大小>[/行高]<字体族科>
    
  • font-family 字体族科 宋体|微软雅黑

    font-family:"Arial","Helvetica",sans-serif;
    
  • font-size 字体大小

  • font-style 字体风格 normal | italic | oblique (斜体)

  • font-weight 字体加粗 normal | bold | lighter

  • font-variant 字体变形 normal | small-caps

2 文字颜色

  • color 设置文字颜色

3 文本属性

  • letter-spacing 字母间隔 值为长度,可以是负值

  • word-spacing 词的间距(通过空格识别)

  • text-decoration 文字修饰

    underline
    overline
    line-through
    none(默认)
    
  • text-align 横向排列 left | right | center

  • vertical-align 垂直对齐方式

    baseline: 将支持valign特性的对象的内容与基线对齐 
    sub: 垂直对齐文本的下标 
    super: 垂直对齐文本的上标 
    top: 将支持valign特性的对象的内容与对象顶端对齐 
    text-top: 将支持valign特性的对象的文本与对象顶端对齐 
    middle: 将支持valign特性的对象的内容与对象中部对齐 
    bottom: 将支持valign特性的对象的文本与对象底端对齐 
    text-bottom: 将支持valign特性的对象的文本与对象顶端对齐 
    <percentage>: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 
    <length>: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)
    
  • text-indent 文本缩进 2em(2个字) 50px

  • line-height 设置行间距离 不允许使用负值

行高和基线

行高与基线

  • 基线:红色的线。
  • 顶线:绿色的线。
  • 底线:紫红色的线。
  • 中线:蓝色的线。

4 背景属性

  • background

    background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>
    
    例:background:red url('./123.png') no-repeat 100px 10px;
    
  • background-color 设置背景色,或设置为transparent(透明)

  • background-image 背景图片 url 或者 none

  • background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat

  • background-attachment 背景附件 scroll | fixed

  • background-position 背景位置

    background-position: 水平方向 垂直方向
    background-position:left top;
    background-position:100px 100px;
    
    left | center | right (横向) 
    top | center | bottom (纵向) 
    或者使用百分比或者数值
    

5 鼠标光标

  • cursor

    text  文字选择器
    crosshair   十字架
    wait  等待
    help  帮助
    pointer 小手
    

6 列表属性

  • list-style-type

    disc         实心点
    circle       圆圈
    square       小方框
    decimal      数字
    lower-roman  小写罗马字
    upper-roman  大写罗马字
    lower-alpha  小写字母
    upper-alpha  大写字母
    
  • list-style-position 位置

    inside   标示在li里面
    outside  标示在li外面
    
  • list-style-image 使用图片 url(./123.gif)

  • list-style 复合属性

    list-style: type position image
    list-style: none
    

7 表格属性

  • table-layout 表格布局方式

    auto(默认)  布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢 
    fixed       平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
    
  • border-collapse 表格的行和单元格的边是合并还是独立

    separate (默认)  独立
    collapse  合并
    
  • border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距

  • caption-side caption 在table上面还是下面

    top    
    bottom
    
  • empty-cells 没有内容的单元格隐藏还是显示

    show (默认)
    hide
    

results matching ""

    No results matching ""