zoukankan      html  css  js  c++  java
  • 【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;

  • 相关阅读:
    STM32 IIC双机通信—— HAL库硬件IIC版
    利用 ST-LINK Utility软件下载程序
    STM32CubeMx的使用分享
    STM32 GPIO重映射(转)
    IIC 原理讲解
    STM32 软件模拟 IIC 代码,标准库、HAL库可用
    STM32 抢占优先级和响应优先级
    浅谈C中的malloc和free
    C语言-cout<<"123"<<"45"<<endl;
    VC6-Win7下VC++6.0打开多个工程的设置
  • 原文地址:https://www.cnblogs.com/hanqi0216/p/6618689.html
Copyright © 2011-2022 走看看