0
点赞
收藏
分享

微信扫一扫

文本属性,边界圆角,背景属性,精灵图案例

一.文本属性

  • 大小: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轴
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

四.精灵图案例

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

举报

相关推荐

文本属性。

css:文本属性

CSS文本属性

css文本属性

006CSS文本属性

CSS基础篇---文本属性(5)

0 条评论