zoukankan      html  css  js  c++  java
  • 2017-3-25 CSS 样式表(二)

    一、样式属性:

    1、大小:width  宽度

                height  高度

    2、背景:background-color :  背景色 

        background-image:url(路径)   背景图片

        background-repeat :  背景图的平铺方式 /*no-repeat不平铺 ,repeat 平铺 ,repeat-x 横向平铺, repeat-y 纵向平铺*/

        background-position  背景图片位置/* center 居中,right top 右上角,left 100px top 100px  离左边100像素,离上边100像素(可以设置负值)*/

        background-attachment  设置背景图片是否滚动/* fixed 背景是固定的,不随字体滚动,scroll 背景随字体滚动。*/

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

    3、字体:font-family  字体样式

        font-size  字体大小 12px  14px

        font-style  italic倾斜

        font-weight  bold加粗

        text-decoration  underline下划线,overline上划线,line-through删除线,none没有,用来去掉超链接的下划线

        color  字体颜色

    4、对齐方式:text-align  水平对齐方式

          vertical-align  垂直对齐方式,配合display:table-cell;

          line-height  行高

          text-indent  缩进 单位像素

          display    显示   /*none 不显示,inline-block 显示为块,不自动换行,宽度可设,block 显示为块,自动换行, inline 效果同span标签,不自动换行,                                     宽高不可设*/

          visibility  可视性 /*hidden 隐藏但是占用空间,visible 显示*/

    二、边界边框:

          margin  外边距  上右下左

          padding  内边距 上右下左  

          border  如果加了内边距,该元素会相应的变大

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

    三、列表方块:

       width、height、(top、bottom、left、right)只有在绝对坐标的情况下才有用。

          list-style  none将列表前面的序号去掉,circle 序号变为圆圈

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

          list-style-position:outside  序号在内容外

          list-style-position:inside  序号跟内容在一起

    四、格式与布局:

    (1)位置:position  fixed固定  相对于浏览器边框位置固定

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

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

          top    距离上边的距离

          right   距离右边的距离

          bottom  距离下边的距离

          left    距离左边的距离   

    (2)流:float  left  向左流  

             right  向右流

         clear  both  清掉流

        z-index分层  值越大越靠上

    五、其他:

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

        visibility  显示visible和隐藏hidden,占位置

        overflow  超出范围 hidden隐藏

        透明    opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)

        圆角    border-radius:5px;

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

  • 相关阅读:
    shell脚本空行造成“: not found.sh“报错
    MySQL实现分组排序(8.0版本以下ROW_NUMBER() OVER())
    vscode远程主机
    nginx-ingress-controler改写上下文
    nginx-ingress-controller自定义参数
    kubernetes安装nginx-ingress-controller服务
    二进制kubernetes升级
    C++关键字完整版
    virtio、vhost和 vhost-user
    Tomcat端口占用报错时的排除办法
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6618066.html
Copyright © 2011-2022 走看看