• css之常用属性


    背景属性:

    background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
    值:
    scroll 	默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed 	当页面的其余部分滚动时,背景图像不会移动。
    
    background-color 设置背景色
    值:
    color_name 	规定颜色值为颜色名称的背景颜色(比如 red)。
    hex_number 	规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
    rgb_number 	规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
    transparent 	默认。背景颜色为透明。
    
    background-image 设置背景图片
    值:
    url('URL') 	指向图像的路径。
    none 	默认值。不显示背景图像。
    
    background-position 属性设置背景图像的起始位置。
    值:
    x% y%
    
    background-repeat 属性设置是否及如何重复背景图像。
    值:
    repeat 	默认。背景图像将在垂直方向和水平方向重复。
    repeat-x 	背景图像将在水平方向重复。
    repeat-y 	背景图像将在垂直方向重复。
    no-repeat 	背景图像将仅显示一次。
    
    background-origin 属性规定 background-position 属性相对于什么位置来定位。
    值:
    padding-box 	背景图像相对于内边距框来定位。 	
    border-box 	背景图像相对于边框盒来定位。 	
    content-box 	背景图像相对于内容框来定位。
    
    background-size 属性规定背景图像的尺寸。
    语法:
    background-size: length|percentage|cover|contain;
    

     过渡属性:

    transition: 样式名 过渡时间;
    值:
    transition-property 	规定设置过渡效果的 CSS 属性的名称。
    transition-duration 	规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 	规定速度效果的速度曲线。
    transition-delay 	定义过渡效果何时开始。
    
    animation
     实例
    #div1{
        60px;
        height: 60px;
        -webkit-animation: first 5s;
        background-color: black;
    }
    @-webkit-keyframes first{
        from {background-color: red;}
        to {background-color: blue;}
    }
    

     文本属性:

    color 属性规定文本的颜色。
    
    direction 属性规定文本的方向 / 书写方向。
    值:
    ltr 	默认。文本方向从左到右。
    rtl 	文本方向从右到左。
    
    letter-spacing 属性增加或减少字符间的空白(字符间距)。
    值:
    px
    
    line-height 属性设置行间的距离(行高)。
    值:
    %|px
    
    text-align 属性规定元素中的文本的水平对齐方式。
    值:
    left 	把文本排列到左边。默认值:由浏览器决定。
    right 	把文本排列到右边。
    center 	把文本排列到中间。
    justify 	实现两端对齐文本效果。
    
    text-decoration 属性规定添加到文本的修饰。
    值:
    none 	默认。定义标准的文本。
    underline 	定义文本下的一条线。
    overline 	定义文本上的一条线。
    line-through 	定义穿过文本下的一条线。
    blink 	定义闪烁的文本。
    
    text-indent 属性规定文本块中首行文本的缩进。
    值:
    length 	定义固定的缩进。默认值:0。
    % 	定义基于父元素宽度的百分比的缩进。
    px
    
    text-transform 属性控制文本的大小写。
    值:
    none 	默认。定义带有小写字母和大写字母的标准的文本。
    capitalize 	文本中的每个单词以大写字母开头。
    uppercase 	定义仅有大写字母。
    lowercase 	定义无大写字母,仅有小写字母。
    
    white-space 属性设置如何处理元素内的空白。
    值:
    normal 	默认。空白会被浏览器忽略。
    pre 	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 	文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 	保留空白符序列,但是正常地进行换行。
    pre-line 	合并空白符序列,但是保留换行符。
    
    word-spacing 属性增加或减少单词间的空白(即字间隔)。
    值:
    px
    
    ext-overflow 属性规定当文本溢出包含元素时发生的事情。
    值:
    clip 	修剪文本。 	
    ellipsis 	显示省略符号来代表被修剪的文本。 	
    string 	使用给定的字符串来代表被修剪的文本。
    
    text-shadow 属性向文本设置阴影。
    值:
    h-shadow 	必需。水平阴影的位置。允许负值。 	
    v-shadow 	必需。垂直阴影的位置。允许负值。 	
    blur 	可选。模糊的距离。 	
    color 	可选。阴影的颜色。参阅 CSS 颜色值。
    

     表格属性:

    border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
    值:
    separate 	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 	如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    
    border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。
    值:
    ength length 	
    
    规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
    
    如果定义一个 length 参数,那么定义的是水平和垂直间距。
    
    如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。
    
    empty-cells 属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。
    值:
    hide 	不在空单元格周围绘制边框。
    show 	在空单元格周围绘制边框。默认。
    

     定位属性:

    bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
    注释:如果 "position" 属性的值为 "static",那么设置 "bottom" 属性不会产生任何效果。
    值:
    auto 	默认值。通过浏览器计算底部的位置。
    % 	设置以包含元素的百分比计的底边位置。可使用负值。
    length 	使用 px、cm 等单位设置元素的底边位置。可使用负值。
    
    clear 属性规定元素的哪一侧不允许其他浮动元素。
    值:
    left 	在左侧不允许浮动元素。
    right 	在右侧不允许浮动元素。
    both 	在左右两侧均不允许浮动元素。
    none 	默认值。允许浮动元素出现在两侧。
    
    clip 属性剪裁绝对定位元素。
    值:
    shape 	设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left)
    auto 	默认值。不应用任何剪裁。
    实例:
    clip:rect(0px,60px,200px,0px);
    
    cursor 属性规定要显示的光标的类型(形状)。
    值:
    url 	
    
    需使用的自定义光标的 URL。
    
    注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
    default 	默认光标(通常是一个箭头)
    auto 	默认。浏览器设置的光标。
    crosshair 	光标呈现为十字线。
    pointer 	光标呈现为指示链接的指针(一只手)
    move 	此光标指示某对象可被移动。
    e-resize 	此光标指示矩形框的边缘可被向右(东)移动。
    ne-resize 	此光标指示矩形框的边缘可被向上及向右移动(北/东)。
    nw-resize 	此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize 	此光标指示矩形框的边缘可被向上(北)移动。
    se-resize 	此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize 	此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize 	此光标指示矩形框的边缘可被向下移动(南)。
    w-resize 	此光标指示矩形框的边缘可被向左移动(西)。
    text 	此光标指示文本。
    wait 	此光标指示程序正忙(通常是一只表或沙漏)。
    help 	此光标指示可用的帮助(通常是一个问号或一个气球)。
    
    display 属性规定元素应该生成的框的类型。
    值:
    none 	此元素不会被显示。
    block 	此元素将显示为块级元素,此元素前后会带有换行符。
    inline 	默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 	行内块元素。(CSS2.1 新增的值)
    list-item 	此元素会作为列表显示。
    
    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
    
    如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
    
    注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
    值:
    left 	元素向左浮动。
    right 	元素向右浮动。
    none 	默认值。元素不浮动,并会显示在其在文本中出现的位置。
    
    left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    注释:如果 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。
    值:
    auto 	默认值。通过浏览器计算左边缘的位置。
    % 	设置以包含元素的百分比计的左边位置。可使用负值。
    length 	使用 px、cm 等单位设置元素的左边位置。可使用负值。
    说明:类似的还有right、top、bottom。
    
    overflow 属性规定当内容溢出元素框时发生的事情。
    值:
    visible 	默认值。内容不会被修剪,会呈现在元素框之外。
    hidden 	内容会被修剪,并且其余内容是不可见的。
    scroll 	内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    
    position 属性规定元素的定位类型。
    值:
    absolute 	
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    
    fixed 	
    生成绝对定位的元素,相对于浏览器窗口进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    
    relative 	
    生成相对定位的元素,相对于其正常位置进行定位。
    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
    
    static 	默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    
    vertical-align 属性设置元素的垂直对齐方式。
    值:
    baseline 	默认。元素放置在父元素的基线上。
    sub 	垂直对齐文本的下标。
    super 	垂直对齐文本的上标
    top 	把元素的顶端与行中最高元素的顶端对齐
    text-top 	把元素的顶端与父元素字体的顶端对齐
    middle 	把此元素放置在父元素的中部。
    bottom 	把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom 	把元素的底端与父元素字体的底端对齐。
    length 	 
    % 	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    
    visibility 属性规定元素是否可见。
    值:
    visible 	默认值。元素是可见的。
    hidden 	元素是不可见的。
    collapse 	当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
    
    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    注释:元素可拥有负的 z-index 属性值。
    
    注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
    说明
    
    该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
    值:
    auto 	默认。堆叠顺序与父元素相等。
    number 	设置元素的堆叠顺序。
    

     内边距属性(Padding):

    padding 简写属性在一个声明中设置所有内边距属性。
    值:
    auto 	浏览器计算内边距。
    length 	规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。
    % 	规定基于父元素的宽度的百分比的内边距。
    

     注意:按照顺时针排序。

    外边距属性(Margin):

    margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
    值:
    auto 	浏览器计算外边距。
    length 	规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
    % 	规定基于父元素的宽度的百分比的外边距。
    注意:也是顺时针你排序。
    

     列表属性(List):

    list-style-type
    位于第一个位置,常见的值有:
    none 	无标记。
    disc 	默认。标记是实心圆。
    circle 	标记是空心圆。
    square 	标记是实心方块。
    decimal 	标记是数字。
    decimal-leading-zero 	0开头的数字标记。(01, 02, 03, 等。)
    lower-latin 	小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin 	大写拉丁字母(A, B, C, D, E, 等。)
    
    list-style-position
    值:
    inside 标记放在文本内
    outside 标记放在文本外
    
    简写:
    list-style:type position url()
    

     字体属性(Font):

    font-family 规定元素的字体系列。
    
    font-size 属性可设置字体的尺寸。
    值:
        xx-small
        x-small
        small
        medium
        large
        x-large
        xx-large
    把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。
    默认值:medium。
    smaller 	把 font-size 设置为比父元素更小的尺寸。
    larger 	把 font-size 设置为比父元素更大的尺寸。
    length 	把 font-size 设置为一个固定的值。
    % 	把 font-size 设置为基于父元素的一个百分比值。
    
    font-style 属性定义字体的风格。
    值:
    normal 	默认值。浏览器显示一个标准的字体样式。
    italic 	浏览器会显示一个斜体的字体样式。
    oblique 	浏览器会显示一个倾斜的字体样式。
    
    font-weight 属性设置文本的粗细。
    值:
    normal 	默认值。定义标准的字符。
    bold 	定义粗体字符。
    bolder 	定义更粗的字符。
    lighter 	定义更细的字符。
        100
        200
        300
        400
        500
        600
        700
        800
        900
    定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
    

     尺寸属性(Dimension):

    height 属性设置元素的高度。
    值:
    auto 	默认。浏览器会计算出实际的高度。
    length 	使用 px、cm 等单位定义高度。
    % 	基于包含它的块级对象的百分比高度。
    
    类似的还有width、minheight、maxwidth。
    

     边框属性(Border 和 Outline):

    border 简写属性在一个声明设置所有的边框属性。
    可以按顺序设置如下属性:
    
        border-width
        border-style
        border-color
    
    outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
    
    注释:轮廓线不会占据空间,也不一定是矩形。
    
    outline 简写属性在一个声明中设置所有的轮廓属性。
    可以按顺序设置如下属性:
    
        outline-color
        outline-style
        outline-width
    
    border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
    值:
    px
    
    box-shadow 属性向框添加一个或多个阴影。
    值:
    h-shadow 	必需。水平阴影的位置。允许负值。 	
    v-shadow 	必需。垂直阴影的位置。允许负值。 	
    blur 	可选。模糊距离。 	
    spread 	可选。阴影的尺寸。 	
    color 	可选。阴影的颜色。请参阅 CSS 颜色值。 	
    inset 	可选。将外部阴影 (outset) 改为内部阴影。 	
    
    outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
    注释:轮廓线不会占据空间,也不一定是矩形。
    outline 简写属性在一个声明中设置所有的轮廓属性。
    可以按顺序设置如下属性:
        outline-color
        outline-style
        outline-width
    
  • 相关阅读:
    1029: [JSOI2007]建筑抢修
    1028: [JSOI2007]麻将
    1050 棋盘染色 2
    1026: [SCOI2009]windy数
    1074: [SCOI2007]折纸origami
    839. Optimal Marks
    1024: [SCOI2009]生日快乐
    1025: [SCOI2009]游戏
    1023: [SHOI2008]cactus仙人掌图
    对前面的总结
  • 原文地址:https://www.cnblogs.com/leomei91/p/7172077.html
Copyright © 2020-2023  润新知