当前位置:首页 > 新闻资讯 > 网站建设

厦门网站建设:CSS文档规范

日期:2016-08-04 00:36 编辑:leo 来源:互联网 标签:厦门网站建设 浏览:2016次

一、布局属性

width

描述:设置宽度

语法:width:value

height

描述:设置高度

语法:height:value

margin-top

描述:设置顶部的外边距

语法:margin-top:value;

margin-right

描述:设置右侧的外边距

语法:margin-right:value;

margin-bottom

描述:设置底部的外边距

语法:margin-bottom:value;

margin-left

描述:设置左侧的外边距

语法:margin-left:value;

margin

描述:设置外边距

语法:margin:value(四个方向相同);

margin

描述:设置外边距

语法:margin:value(上下) value(左右);

margin

描述:设置外边距

语法:margin:value(上) value(左右) value(下);

margin

描述:设置外边距

语法:margin:value(上) value(右) value(下) value(左);


标准文档流(正常文档流),HTML元素的显示顺序由HTML代码的顺序决定。

如果为块级对象由自上向下显示;如果为内联对象则自左而右显示。

float

描述:设置对象浮动

语法:float:left|right;

说明:

A.对象设置浮动属性后,脱离标准文档流。

B.对象设置浮动属性后,尽量向左(float:left)/向右(float:right)移动,

    直到遇到父对象的边界或者上一个浮动对象的边界为止。
    
clear

描述:清除浮动

语法:clear:left|right|both;

content

描述:设置对象的内容

语法:content:value;

说明:通过该after伪类选择器设置的对象为内联对象,

        一般情况下需要与display属性组合使用。
        
display

描述:设置对象的显示方式

语法:display:none|block(块级对象)|inline(内联对象);

标准的清理浮动的方式

.clear:after{
   display:block;     /*显示为块级对象*/
   content:".";       /*控制内容*/
   height:0;          /*控制高度*/
   visibility:hidden; /*控制可见性*/
   clear:both;        /*清除浮动*/
}
.clear{
    zoom:1;
}

将clear类应用给清理浮动的父对象。

二、边框属性

border-top-width

描述:设置上边框的宽度

语法:border-top-width:value

border-top-style

描述:设置上边框的线型

语法:border-top-style:none|solid(实线)|dotted(点划线)|dashed(虚线);

border-top-color

描述:设置上边框的颜色

语法:border-top-color:value

border-top

描述:设置上边框的属性

语法:border-top:width style color;

border

描述:设置边框的属性

语法:border:width style color;

三、背景属性

background-color

描述:设置背景颜色

语法:background-color:value;

background-image

描述:设置背景图像

语法:background-image:url(图像URL);

background-repeat

描述:设置背景图像的平铺方式

语法:background-repeat:repeat|no-repeat|repeat-x|repeat-y;

background-attachment

描述:设置背景图像的依附方式

语法:background-attachment:scroll(滚动)|fixed(固定);

background-position

描述:设置背景图像的位置

语法:background-position:horizontal vertical;

水平:left|center|right|value
垂直:top|center|bottom|value

background

描述:设置背景属性

语法:background:color url(图像URL) repeat attachment horizontal vertical;

延伸阅读:

本站文章,部分来源互联网,部分为原创,如有侵权请联系我们,如您转载请注明来自:https://www.e1000u.net/news/79.html