文字美化学习总结
总结
一、 美化文本
- 1. 字体大小【font-size】:
a) 含义:字符框的高度
b) 可继承
c) 默认值:medium
d) 取值:预设值:medium:中等字号;larger:大字号;smaller:小字号
数值:px【常用】:绝对字体大小
em【常用】:相对于父元素的字体大小,若没有父元素,则使用基准字号;基准字号:浏览器设置的默认字体大小,通常为16px,可更改
%:原理同em,例如200%,相当于2em,50%,相当于.5em
rem:相对于基准字号
- 2. 加粗字体【font-weight】:将【font-weight】设置为【bold】,以加粗文字,该属性可继承
- 3. 倾斜字体【font-style】:将【font-style】设置为【italic】,以倾斜文字,该属性可继承
- 4. 字间距【letter-spacing】:设置【letter-spacing】的值为px或em,可控制文字间的间隙,该属性可继承
- 5. 首行缩进【text-indent】:可实现第一个文字向后缩进
- 6. 给文字划线【text-decoration】:设置【text-decoration】属性,可以给文字划线。
- 7. 下划线 text-decoration:underline
- 8. 删除线 text-decoration:line-through
- 9. 上划线 text-decoration:overline
- 10. 线颜色 text-decoration-color
第二部分
- 1. 修饰首字母【伪元素选择器 ::first-letter】:【::first-line】可选中元素中的第一行文字
- 2. 修饰选中文字【伪元素选择器 ::selection】:【::selection】可选中被用户框选的文字
- 3. 字体类型:
a) 概念:衬线字体和非衬线字体
b) 修改字体类型【font-family】
c) 使用【@font-face指令】加载web字体
d) 使用图标字体
二、 美化边框
圆角边框【border-radius】
Border-radius:50px 0 40px 0( 左上 右上 右下 左下)。
Border-radius:50%(上下左右角为50%,在正方形情况下城圆形)
三、 美化背景
- 1. 【background-image】设置背景图片
- 2. 使用【background-repeat】设置图片重复方式
a) repeat:【默认值】从左到右从上到下重复
b) no-repeat:不重复
c) repeat-x:仅在x轴方向上重复
d) repeat-y:仅在y轴方向上重复
- 3. 使用【background-position】设置图片在边框盒中的位置
预设值:left、right、top、bottom、center
- 4. 使用【background-size】设置背景图尺寸
- 5. 使用【background-attachment】固定背景图:scroll:【默认值】背景图跟随元素移动;fixed:背景图固定。
- 6. 使用速写属性【background】统一设置:background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
- 7. 背景渐变
线性渐变:linear-gradinet
重复渐变:repeating- linear-gradinet
圆形渐变:radial-gradient(circle,red,green);
四、 透明度和鼠标样式
透明度【opacity】和alpha通道
透明度Opacity 取值0-1之间。 0为完全透明。
鼠标样式:cursor:pointer;鼠标变小手 auto :标准光标
default :标准 pointer, hand :手形光标 wait :等待光标 text :I形光 vertical-text :水平I形光标 no-drop :不可拖动光标
not-allowed :无效光标 help :帮助光标 all-scroll :三角方向标
move :移动标 crosshair :十字标
阴影
文字阴影【text-shadow】
text-shadow:2px 2px 4px rgba(0,0,0,.5)
第一个参数:2px表示阴影部分的位置向x轴方向(横坐标)的偏移量为2px。
第二个参数:2px表示阴影部分的位置向y轴方向(纵坐标)的偏移量为2px。
第三个参数:4px表示阴影部分的模糊半径,该数值越大,阴影越模糊。
第四个参数:rgba(0,0,0,.5)表示阴影的颜色。
盒子阴影【box-shadow】
Box-shadow:4px 5px 6px rgba(0,0,0,.5)
四个参数分别表示x轴偏移量,y轴偏移量,模糊半径,阴影颜色。
Box-shadow:inset 0px 0px 10px 5px rgba(0,0,0,.5)
加入inset关键字,可将阴影的扩散方向由外变为内
原文地址:https://www.cnblogs.com/caoxiangwang/p/11372419.html
- Android的编译打包流程详解
- Android 仿京东、拼多多商品分类页
- 简单高效的实现 Android App 全局字体替换
- 基于 RxJava2+Retrofit2 精心打造的 Android 基础框架 XSnow
- Android 图片选择到裁剪之步步深坑
- Android自定义 View 实战之 StickerView
- 十分钟搞定酷炫动画,Android自定义 View 入门
- 基础篇章:关于 React Native 之 Switch 和 ProgressBarAndroid 组件的讲解
- Android 实现视屏播放器、边播边缓存功能、外加铲屎(IJKPlayer)
- 基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解
- Android M 权限最佳实践
- Android自定义ViewGroup神器-ViewDragHelper
- Android 中常见的内存泄漏
- Android 高级自定义Toast及源码解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kafka高可用集群搭建
- ELK7.x日志系统搭建 4. 结合kafka集群完成日志系统
- ELK7.x日志系统搭建 3. 采用轻量级日志收集Filebeat
- ELK7.x日志系统搭建 2. Nginx、Cluster等日志收集
- Java8 Stream
- 性能测试必备知识(4)- 使用 stress 和 sysstat 分析平均负载过高的场景
- 高并发利器-guava分流与缓存
- 树莓派3b+组装+烧录retropie系统
- 使用Azure DevOps Pipeline实现.Net Core程序的CI
- 带你遨游USB世界
- C# 泛型中的数据类型判定与转换
- 评测Loki日志工具
- .Net微服务实战之负载均衡(上)
- ES 7.8 速成笔记(上)
- 利用Xtrabackup进行mysql增量备份和全量备份