zoukankan      html  css  js  c++  java
  • CSS3属性

     字体属性

    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

     

     文字颜色

    color 设置文字颜色 

    常用color#两位16进制表示

     文本属性

    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 设置行间距离 不允许使用负值

    word-break 规定自动换行的处理方法

    normal        使用浏览器默认的换行规则。

    break-all    允许在单词内换行。

    keep-all    只能在半角空格或连字符处换行。

    word-wrap 允许长单词或URL地址换行到下一行

    normal        只在允许的断字点换行(浏览器保持默认处理)。

    break-word    在长单词或 URL 地址内部进行换行。

    overflow-wrap CSS3中把word-wrap 改名为 overflow-wrap

    white-space

    normal:     默认处理方式。

    pre:        用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象

    nowrap:     强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。

    pre-wrap:   用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。

    pre-line:   保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

     

    css尺寸相关属性

    height 高度

    min-height 最小高度

    max-height 最大高度

    width 宽度

    min-width 最小宽度

    max-width 最大宽度

    css内边距

    padding 内边距

    padding-left 左内边距

    padding-right 右内边距

    padding-top 上内边距

    padding-bottom 下内边距

     边框

    border border-left|border-right|border-top|border-bottom

    border: 边框宽度  边框样式  边框颜色

    border-style border-top-style | border-right-style | * border-bottom-style | border-left-style

    dotted   点线

    dashed  虚线

    solid      实线

    double 双实线

    groove 槽状线

    ridge     脊线

    inset      内嵌效果

    outset   外凸效果

    border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color

    border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width

    背景

    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 (纵向)

    或者使用百分比或者数值

    鼠标光标设置 CSS属性)

    cursort

    text  文字选择器

    crosshair   十字架

    wait  等待

    help  帮助

    pointer 小手

    CSS列表属性

    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 imagelist-style: none

    CSS列表属性

    table-layout 表格布局方式

    auto(默认)  布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢

    fixed       平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切

    border-collapse 表格的行和单元格的边是合并还是独立

    separate (默认)  独立

    collapse  合并

    border-spacing 当表格边框独立时,行和单元格的边框在横向和纵向上的间距

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

    top    

    bottom

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

    show (默认)

    hide

     盒子模型相关CSS属性

    布局属性

    display

     

    | 值           | 描述                                                 |

    | ------------ | ---------------------------------------------------- |

    | none         | 此元素不会被显示。                                   |

    | block        | 此元素将显示为块级元素,此元素前后会带有换行符。     |

    | inline       | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |

    | inline-block | 行内块元素。(CSS2.1 新增的值)                      |

    float

    | 值      | 描述                                                 |

    | ------- | ---------------------------------------------------- |

    | left    | 元素向左浮动。                                       |

    | right   | 元素向右浮动。                                       |

    | none    | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |

    | inherit | 规定应该从父元素继承 float 属性的值。                |

    clear

     

    | 值      | 描述                                  |

    | ------- | ------------------------------------- |

    | left    | 在左侧不允许浮动元素。                |

    | right   | 在右侧不允许浮动元素。                |

    | both    | 在左右两侧均不允许浮动元素。          |

    | none    | 默认值。允许浮动元素出现在两侧。      |

    | inherit | 规定应该从父元素继承 clear 属性的值。 |

    visibility

    | 值       | 描述                                                         |

    | -------- | ------------------------------------------------------------ |

    | visible  | 默认值。元素是可见的。                                       |

    | hidden   | 元素是不可见的。                                             |

    | collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |

    | inherit  | 规定应该从父元素继承 visibility 属性的值。                   |

    overflow

     

    | 值      | 描述                                                     |

    | ------- | -------------------------------------------------------- |

    | visible | 默认值。内容不会被修剪,会呈现在元素框之外。             |

    | hidden  | 内容会被修剪,并且其余内容是不可见的。                   |

    | scroll  | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |

    | auto    | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |

    | inherit | 规定应该从父元素继承 overflow 属性的值。                 |

    overflow-x

    overflow-y

    尺寸

    width / max-width / min-width

    height / max-height / min-height

    内补白

    padding / padding-left / padding-right / padding-top / padding-bottom

    外边距

    margin

    margin-left

    margin-right

    margin-top

    margin-bottom

  • 相关阅读:
    【XAF】非持久化对象分组和属于不同会话
    【原创】XAF 非持久对象界面中更新xpo的状态查询
    Java字符串操作方法集
    Java易忘知识点统计
    Android常用依赖库搜集
    Android Studio报错Unable to resolve dependency for ':app@release/compileClasspath':无法引用任何外部依赖的解决办法
    Codewars练习Python
    Python学习日记之正则表达式re模块
    Linux学习日记之crontab使用notify-send实现每小时通知提醒
    Linux学习日记之Deepin下查看crontab运行日志
  • 原文地址:https://www.cnblogs.com/wanglecn/p/9398028.html
Copyright © 2011-2022 走看看