css 基础 - 2

css 基础 - 2

一.文本样式:

   文字竖着书写:

  语法:writing-mode : lr-tb、tb-rl
  参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左

  1.text-align:(水平对齐方式)

      left(居左)  center(居中)   right(居右)

css 基础 - 2

css 基础 - 2

css 基础 - 2

  2.text-indent:(缩进)

    单位:em(字符)  px(像素)

css 基础 - 2

css 基础 - 2

css 基础 - 2

  3.line-height:(行高)

css 基础 - 2

css 基础 - 2

   4.cursor:(光标)

    pointer(手型指针)css 基础 - 2       wait(等待)css 基础 - 2

      help (帮助)css 基础 - 2            text(文本光标)css 基础 - 2

二.边框样式: border)

  1.top (上)  bottom(下) left(左) right(右)

   2.width (线宽)

3.style:solid(实线)  dashed (点滑线)   dotted(点线)

    4.color (颜色)

css 基础 - 2

css 基础 - 2

  注意:合成样式中方位属性(top,bottom等)直接跟在border后面 !

  圆角:border-radius : 10px    

三.元素与块元素

  • 块元素:

    1.独占一行

    2.设置宽高有用

css 基础 - 2

css 基础 - 2

  • 行元素:

    1.行元素是紧挨着上一个元素显示,不会独占一行

    2.设置宽高没有用

css 基础 - 2

css 基础 - 2

  • 行&块元素 可以相互转换

    display:  block  转成块元素

css 基础 - 2

    display: inline   转成行元素

css 基础 - 2

    display: inline-block   转成行块元素,变成行元素,但是具有块元素的特点(可以设置宽高)

四.精灵技术( css spirit )

  1.background-image

  2.background-color

  3.background-position(位置)

    left    center    right

    top    center    bottom

  4.background-repeat:(平铺方式)

        no-repeat(不平铺) repeat-x(水平平铺) repeat-y(竖直平铺)

  5.background-attachment:(固定)

  6.background合成样式

    background : url(“./img/1.jpg”) no-repeat center top fixed;

css 基础 - 2

css 基础 - 2css 基础 - 2

  7.把容器的宽高 设置成 目标图片 的大小(宽&高 )

  8.调节background-position坐标值

透明度:
  谷歌: opacity : 0.5;

  IE : filter: alpha (opacity: 50);

五.盒模型

  1.padding:   盒子里面的内容 距离 盒子四周的距离, 可以简单的理解为"div"

    padding:20px;                      (内容到四周边框的距离为20px)

    padding-top:10px;              (内容到上边框的距离为10px)

    padding-right:20px;           (内容到右边框的距离为20px)

    padding-bottom:30px;      (内容到下边框的距离为30px)

    padding-left:40px;              (内容到左边框的距离为40px)

    padding:10px 20px;             (内容到上、下边框的距离均为10px,到左、右边框的距离均为20px)

    padding:10px 20px 30px;  (内容到上边框的距离为10px,到左、右边框的距离均为20px,到下边框的距离为30px)

css 基础 - 2

css 基础 - 2

css 基础 - 2

css 基础 - 2

  2.margin:  盒子&盒子之间的距离

     方位属性与padding一样,不设(top等)方位属性时默认为四边

css 基础 - 2

css 基础 - 2

css 基础 - 2

css 基础 - 2

上一篇:laravel框架——Excel导入导出


下一篇:C语言 数组做函数参数退化为指针的技术推演