• 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;

  • 相关阅读:
    Linux操作系统中,.zip、.tar、.tar.gz、.tar.bz2、.tar.xz、.jar、.7z等格式的压缩与解压
    R 环境内存限制的更改
    R 安装与环境配置
    开启博客园之路
    react-router @4用法整理
    react性能调谐与diff算法
    react新版本生命周期
    col-md-push-*和col-md-offset的区别
    react 基础篇 #2 create-react-app
    react-draft-wysiwyg富文本
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6618066.html
Copyright © 2020-2023  润新知