当前位置: 首页 > news >正文

html5--6-23 CSS3中的文字与字体

html5--6-23 CSS3中的文字与字体

  • text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出
    • clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 溢出的部分裁切掉。
    • ellipsis:当对象内文本溢出时显示省略标记(...)。
    • 温馨提示:该属性需要和over-flow:hidden属性、white-space:nowrap配合使用,放到后边章节再讲解

 

 

 

学习要点

  • 掌握文字与字体的设置

颜色值查询方法:

  • 百度查询,很多网站有提供
  • 下载相关手册等需要时查表
  • 运用绘图工具中的拾色器


CSS中常用的字体属性设置

  • font-size 规定文本的字体尺寸
    • 通常使用px,百分比,em来设置字体的大小
      • em是css中的相对单位,是相对于当前对象内的字体尺寸,若没有制定文字大小尺寸,则为浏览器默认字体大小
    • xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸,默认值:medium。
    • smaller 把 font-size 设置为比父元素更小的尺寸。
    • arger 把 font-size 设置为比父元素更大的尺寸。
  • font-variant:规定是否以小型大写字母的字体显示文本。
    • normal 默认值。浏览器会显示一个标准的字体。
    • small-caps 浏览器会显示小型大写字母的字体。
  • font-style:规定文本的字体样式。
    • normal 默认值。浏览器会显示一个标准的字体。
    • italic 浏览器会显示一个斜体的字体样式。
    • oblique 浏览器会显示一个倾斜的字体样式。暂时不作讲解,了解即可
  • font-weight:规定字体的粗细。
    • normal 默认值。定义标准的字符。
    • bold 定义粗体字符。
    • bolder 定义更粗的字符。lighter 定义更细的字符。
    • 100-900;定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
  • font-family:规定文本的字体系列。
  • font:在一个声明中设置所有字体属性。
    • 这个简写属性用于一次设置元素字体的两个或更多方面。
    • 至少要指定字体大小和字体系列
    • 可以按顺序设置如下属性:font-style/font-variant/font-weight/font-size/font-family
  • @font-face:嵌入字体
  • 注:字体的设置还有其他几个很少的用到的属性,比如font-size-adjust为元素规定 aspect 值;font-stretch 收缩或拉伸当前的字体系列。都很少用到或者多数浏览器不支持,就不作讲解


CSS中常用的文本属性设置

温馨提示:对于一些目前浏览器支持度不是太好或者极不常用属性不进行讲解

掌握

  • color 设置文本颜色
  • text-align 规定元素中的文本的水平对齐方式。
    • left 默认值/right/center/justify两端对齐
    • CSS3中新增了start和end属性值,在通常情况下,start相当于left,end相当于right
  • line-height 设置行高。
    • normal/数字/百分比/px/em
  • text-indent 设置文本的首行缩进
    • 常用单位像素/百分比/em
  • text-decoration 向文本添加修饰。
    • none 默认值。显示标准的文本。
    • underline 定义文本下划线。
    • overline 定义文本上划线。
    • line-through 定义穿过文本下的一条线。
    • blink 定义闪烁的文本。
    • CSS3中还有一些新增加的属性值但是目前浏览器多不支持,不再介绍
  • letter-spacing 设置字符间距。
    • 定义字符间的固定空间
    • normal 默认。/像素:(允许使用负值)
  • word-spacing 设置字/单词间距。
    • 增加或减少单词间的空白
    • normal 就等同于设置为 0。/如果指定为长度值,会调整字之间的通常间隔;(允许使用负值)。
  • text-transform 设置对象中的文本的大小写
    • none默认。标准的文本。/capitalize每个单词以大写字母开头。/uppercase 转换为大写字母。/lowercase转换为小写字母
  • text-shadow 向文本添加阴影。

熟悉

  • white-space 设置元素中空白的处理方式。
    • normal 默认。空白会被浏览器忽略
    • pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br标签为止。
    • pre-wrap 保留空白符,但是正常地进行换行。
    • pre-line 合并空白符,但是正常地进行换行。
  • direction 设置文本方向
    • ltr默认。文本方向从左到右。/rtl 文本方向从右到左。
  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
    • normal默认值/break-word:在长单词或 URL 地址进行换行。
  • word-break 规定非中日韩文本的换行规则。
    • normal默认值/break-all:允许在单词内换行。/keep-all 只能在半角空格或连字符处换行。
  • text-fill-color 文本填充颜色,指定文字填充部分的颜色.目前多数浏览器不支持,暂不讲解。
  • text-stroke 文本边框颜色,指定文字描边部分的颜色。目前多数浏览器不支持,暂不讲解。
    • text-stroke-width文字的描边宽度
    • text-stroke-color文字的描边颜色
    • 备注:使用该属性需要使用浏览器私有前缀
  • text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出
    • clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 溢出的部分裁切掉。
    • ellipsis:当对象内文本溢出时显示省略标记(...)。
    • 温馨提示:该属性需要和over-flow:hidden属性、white-space:nowrap配合使用,放到后边章节再讲解

了解

  • text-outline 规定文本的轮廓
  • text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。
  • text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
  • text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
  • unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
    • normal/embed/bidi-override
    • 不常用,了解即可
  • hanging-punctuation 规定标点字符是否位于线框之外。
  • punctuation-trim 规定是否对标点字符进行修剪。
  • tab-size:设定一个tab在页面中的显示长度
  • text-wrap 规定文本的换行规则。注释:目前主流浏览器都不支持 text-wrap 属性。

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/8013218.html

相关文章:

  • activity theme parent 属性浅析
  • Filter过滤器,Interceptor拦截器,ControllerAdvice,Aspect切片
  • php调用系统命令如何获得输出结果
  • 实现一个websocket服务器-实践篇
  • 分布式架构高可用架构篇_04_Keepalived+Nginx实现高可用Web负载均衡
  • ABP理论学习之缓存Caching
  • Linux GPIO控制方法
  • “双十二”:“交互+交易+交付”融合运营为王
  • 直接拿来用,最火的.NET开源项目
  • FAQ宝典之Rancher Server
  • Kali Linux渗透测试实战 2.2 操作系统指纹识别
  • Git:pull --rebase 和 merge --no-ff
  • 数据库模块(2天)(sql基础主键,外键,唯一索引)最重要连表查询
  • Neo4j embedded例子
  • win10编译caffe跑faster-rcnn(cuda7.5)
  • #Java异常处理
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • Android开源项目规范总结
  • android图片蒙层
  • css布局,左右固定中间自适应实现
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • flutter的key在widget list的作用以及必要性
  • Leetcode 27 Remove Element
  • leetcode-27. Remove Element
  • leetcode388. Longest Absolute File Path
  • leetcode98. Validate Binary Search Tree
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • python_bomb----数据类型总结
  • SQLServer之索引简介
  • WebSocket使用
  • yii2中session跨域名的问题
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 高性能JavaScript阅读简记(三)
  • 扑朔迷离的属性和特性【彻底弄清】
  • 前端设计模式
  • 使用Gradle第一次构建Java程序
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • # C++之functional库用法整理
  • #if和#ifdef区别
  • $refs 、$nextTic、动态组件、name的使用
  • (2)Java 简介
  • (23)Linux的软硬连接
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (八)Spring源码解析:Spring MVC
  • (二)PySpark3:SparkSQL编程
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (论文阅读32/100)Flowing convnets for human pose estimation in videos
  • (心得)获取一个数二进制序列中所有的偶数位和奇数位, 分别输出二进制序列。
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)原始图像数据和PDF中的图像数据
  • (转载)利用webkit抓取动态网页和链接
  • ../depcomp: line 571: exec: g++: not found