【2017-3-25】css样式表:层叠样式表

1、分类:

内联:写在标记的属性位置,优先级最高,重用性最差
内嵌:写在页面的head中,优先级第二,重用性一般
外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好

2、选择器:
id选择器:#id,优先级最高,id不能重复,只能选中一个元素
class选择器:.class,优先级第二,class能重名,能选中一堆元素
标签选择器:标签名 div span ,优先级最低,能选中一堆元素,不建议使用

3、特殊选择器:
并列:逗号隔开
后代:空格隔开

--------------------------------------------------------------

4、样式表属性:

--大小

    width宽度

    height高度

--背景

    background-color背景色

    background-image背景图片

    background-repeat背景图的平铺方式

    background-position背景图片位置

    background-attachment设置背景图片是否滚动

    background-size背景图片大小200px 200px

--字体

    font-family字体样式

    font-size字体大小12px

    font-style  italic倾斜

    font-weight  bold加粗

    text-decoration  underline下划线

                                overline上划线

                                line-through删除线

                                none没有,用来去掉超链接的下划线

color字体颜色

--对齐方式

    text-align水平对齐方式

    vertical-align垂直对齐方式,配合下面代码一起使用

    display:table-cell

    line-height行高

    text-indent缩进,单位像素

--边界边框

    margin外边距,单位像素,上右下左

    padding内边距,单位像素,上右下左,如果加了内边距该元素会相应变大

    border            1px solid #60F    简写方式,第一个边框粗细,第二个边框样式,第三个边框颜色

--列表方块(配合有序、无序使用)

    list-style  none将列表前面的序号去表

    list-style-image可以将前面的序号变为图片

--格式布局

  位置

    position fixed  固定,相对于浏览器边框位置固定

                   absolute绝对位置,相对于父级元素(浏览器,绝对定位的上级)

                   relative相对位置,相对于自身应该出现的位置

 

    top距离上边的距离

    right距离右边的距离

    bottom距离下边的位置

    left距离左边的位置

  流

    float left向左流

    float right向右流

    clear both清流

 

  z-index分层,值越大越靠上

  其他

    display显示block隐藏none,不占位置

    visibility显示visible隐藏hidden,占位置

    overflow超出范围hidden隐藏

    透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)    一般三个都写,第一个针对谷歌,第二个针对火狐,第三个针对IE

    圆角border-radius:5px;

    阴影box-shadow:0 0 5px white;

原文地址:https://www.cnblogs.com/hanqi0216/p/6618689.html