css3系列-2.css中常见的样式属性和值

font-family:微软雅黑;/*字体名称（类型）：微软雅黑，黑体，楷体，宋体*/

font-size: 20px;/*字体大小*/

font-weight: 600;/*字体加粗*/

font-style: italic;/*字体样式*/

background: #00FF00 url(bgimage.gif) no-repeat fixed top;/*这是融合在一起的写法*/


background-color: red;/*背景颜色*/

background-image:url('图片路径');/*背景图片*/

background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/

background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动*/

background-origin:content-box;/*规定背景图片的定位区域。*/

/*background-position:50% 50%;*/

/*background-position:800px 300px;*/

background-position:right center;/*规定背景图像的位置*/

background: inherit;/*规定应该从父元素继承 background 属性的设置。*/

.text{
    color:rebeccapurple;/*字体颜色*/

    direction: ltr;/*字体方向从右向左*/
    /*rtl 从左向右*/

    line-height: 5px;/*设置行高*/

    letter-spacing:2px;/*设置字符间的间距，注意是字符，或者是字母*/

    text-align:center;/*设置文本的对齐方式*/

    text-decoration:overline;/*字体的修饰，如下划线underline，上划线overline，
    删除线line-through，也可以设置为none，无修饰*/

    text-indent:2em;/*首行缩进2个字，还有其他px的单位，%也可以*/

    text-shadow: rosybrown;/*文本阴影*/

    text-transform: lowercase;/*属性控制文本的大小写 */
    /*capitalize 文本中的每个单词以大写字母开头。*/
    /*uppercase 定义仅有大写字母。*/
    /*inherit   规定应该从父元素继承 text-transform 属性的值。*/

    white-space: nowrap;/*属性设置如何处理元素内的空白 */
    /*nowrap    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
    /*pre   空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。*/
    /*pre-wrap  保留空白符序列，但是正常地进行换行。*/

    word-spacing:2px;/*属性增加或减少单词间的空白,注意这是单词*/
}

.border{
    border: 2px solid red;/*设置边框样式  宽度为2px 可见 红色 也可以分开写*/

    border-width: 2px;
    border-color: red;
    border-style: solid;/*分开写的border属性*/
    /*也可以这样设置*/
    border-style:dotted solid double dashed;
    /*上边框是点状  右边框是实线  下边框是双线  左边框是虚线*/
    /*
    none    无边框。
    hidden  与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted  点状边框。
    dashed  虚线。。
    solid   实线。
    double  双线。
    inherit 规定应该从父元素继承边框样式。
    */

    border-radius: 5px;/*设置边框弧的大小，值越大，弧度越大*/

    /*也可以对border的某一个边进行设置属性*/
    border-top: 2px solid red;

}

/*内边距*/
.padding{
    padding: 2px;/*盒子模型的外边距，上左下右 各向内缩进2px*/


    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;

    /*以上四句等于下面一句  上右下左的顺序 值是不一定相等的*/
    padding: 2px 2px 2px 2px;

}

/*外边距*/
.margin{
    margin: 2px;/*盒子模型的外边距，和padding的区别就是，margin是向外扩展的，padding是向内扩展的*/

    margin-top: 2px;
    margin-right: 3px;
    margin-bottom: 4px;
    margin-left: 6px;
    /*上面四句和下面一句也是等效的*/
    margin:2px 3px 4px 6px;
}

/*鼠标样式属性*/
.cursor{
    cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
    /*help  此光标指示可用的帮助（通常是一个问号或一个气球）
      text  此光标指示文本。
      wait  此光标指示程序正忙（通常是一只表或沙漏
      default   默认光标（通常是一个箭头）
      auto  默认。浏览器设置的光标。
    */
}

/*列表属性*/
.list{
    list-style: circle;
    list-style:square inside url('/test/1.png');
    list-style-type: disc;/*设置列表项标记的类型*/
    /*disc  默认。标记是实心圆。
    circle  标记是空心圆。
    square  标记是实心方块。
    decimal 标记是数字。*/
    list-style-image: url();/*属性使用图像来替换列表项的标记*/
    list-style-position: inside;/*属性设置在何处放置列表项标记*/
}

.position{
    position: relative;
    left: 2px;
    top: 2px;
}

.positionA{
    position: absolute;
    left: 20px;
    right: 20px;
}

/*浮动*/
.float{
    float: right;
}

/*清除浮动*/
.float{
    float: right;
    clear: both;
}

/*滚动条*/
.overflow{

    overflow:scroll;/*属性规定当内容溢出元素框时发生的事情。*/

      /*
        visible 默认值。内容不会被修剪，内容溢出容器。
        hidden  内容会被修剪，并且其余内容是不可见的,不会出现滚动条。
        scroll  内容会被修剪，但是浏览器会显示滚动条。
        auto    如果内容被修剪，则浏览器会显示滚动条。
        inherit 规定应该从父元素继承 overflow 属性的值。
      */
    overflow-y: hidden;/*设置竖直的滚动条*/
    overflow-x: scroll;/*设置横向的滚动条*/
}

.display-z{
    /*隐藏*/
    display: none;
    /*以块级元素显示，宽高不可忽略*/
    display: block;
    /*此元素会被显示为内联元素，元素前后没有换行符*/
    display: inline;

}

/*占位隐藏*/
.visibility{
    /*隐藏*/
    visibility: hidden;
    /*显示*/
    visibility: visible;
}