zoukankan      html  css  js  c++  java
  • 文本属性,边界圆角,背景属性,精灵图案例

    07.31自我总结

    一.文本属性

    • 大小:font-size.注意点最小是12ox你选择1px也是12,我们要更加小就ui自己设计字体了

    • 颜色:color

    • 字重:font-weight

      可选属性

      • lighter | normal | bold |bolder 分别为|正常||更粗
      • 100-900之间整百的数字
    • 字族:font-family

      ​ 可以选择多个用,隔开,匹配原则从左往右哪个能用就用哪个

    • 字体样式:font-style

    • 文本划线:text-decoration

      可选属性

      • underline |line-through |overline|none分别是下划线|删除线|上划线|没有划线,默认是没有划线
    • 文本水平位置:text-align

      可选属性

      • left |center |right
    • 行高:line-height

    • 首行缩进:text-indent

    • 字间距:letter-spacing

    整体设置font: bold 10px/300px '黑体', 'Arial'; 分别是字重,字体大小,行高,字族,顺序可以交换不影响

    二.边界圆角

    border-radius

    特点

    • 最多可以填写8个参数
    • 可填写的参数固定值|百分百
    • 左上为第一个角,顺时针编号
    • 不足找对角
    • 填写一个值所有边都是这个值
    • 填写八个参数的时候横纵分离,先横后纵横纵直接用/分开

    三.背景属性

    • 背景图片设置
    /*显示比屏幕大的图片:缩放尺寸*/
    background-image: url("img/kj.gif");
    /*尽量只设置宽,高等比缩放,不失真*/
    background-size: 300px 300px;
    /*平铺: repeat-x repeat-y repeat no-repeat*/
    background-repeat: no-repeat;
    /*位置*/
    /*1.只设置x轴,y轴默认center*/
    /*2.x轴:left center right 具体像素 百分百*/
    /*2.y轴:top center bottom 具体像素 百分百*/
    background-position: center center;先x轴再y轴
    

    四.精灵图案例

    原理:先设置显示区域大小,再根据背景图片的移动结合伪类进行操作来完成一些动画效果

  • 相关阅读:
    Python全栈开发之21、django
    Python全栈开发之17、tornado和web基础知识
    Python全栈开发之18、cookies、session和ajax等相关知识
    jquery之别踩白块游戏的实现
    Python全栈开发之16、jquery
    Python全栈开发之15、DOM
    Python全栈开发之13、CSS
    Python全栈开发之12、html
    Go语言学习之路-2-变量与常量
    Go语言学习之路-1-Go语言环境搭建
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11278674.html
Copyright © 2011-2022 走看看