专栏首页老雷PHP全栈开发css教程之文本字体

css教程之文本字体

css教程之文本字体

一、字体

1、font-size 字体大小

div{font-size:16px;}

2、font-weight 字体粗细

normal 正常的字体。相当于数字值400

bold 粗体。相当于数字值700。

bolder 定义比继承值更重的值

lighter 定义比继承值更轻的值

<integer>:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

div{
      font-weight:600;
}

3.font-family 字体名称

div{font-family: helvetica, verdana, sans-serif;} 

4.font-style:normal | italic | oblique 字体样式

div{
      font-style:italic;
    }

5.字体颜色 color

div{color:#f60;}

二、文本Text

1.white-space 指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。

normal 默认处理方式

pre 原封不动的保留你输入时的状态

nowrap:强制所有文本在同一行内显示

2.word-break 定义元素内容文本的字间与字符间的换行行为

normal:

默认的换行规则。依据各自语言的规则,允许在字间发生换行。

keep-all:

对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal

break-all:

对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。

3.text-align 定义元素内容的水平对齐方式。

left:内容左对齐。

center:内容居中对齐。

right:内容右对齐。

4.word-spacing 指定单词之间的额外间隙

p{word-spacing:20px;}

5.letter-spacing 指定字符之间的额外间隙

p{letter-spacing:10px;}

6.text-indent 定义块内文本内容的缩进

p{text-indent:20px;}

7.vertical-align

定义行内元素在行框内的垂直对齐方式 span/a/em/label

baseline:把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐

sub:把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)

super:把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)

text-top:把当前盒的top和父级的内容区的top对齐

text-bottom:把当前盒的bottom和父级的内容区的bottom对齐

middle:把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐

top:把当前盒的top与行盒的top对齐

bottom: 把当前盒的bottom与行盒的bottom对齐

8.line-height 定义元素中行框的最小高度

9. text-decoration 文本装饰

text-decoration:none | underline | overline | line-through | blink

10.text-overflow

clip 当内联内容溢出块容器时,将溢出部分裁切掉。

ellipsis 当内联内容溢出块容器时,将溢出部分替换为(...)。

    p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本字体</title>
    <style>
      .text{
        height: 100px;
        font-family: helvetica, verdana, sans-serif;
        font-size:24px;
        font-weight:bolder;
        font-style:italic;
        color: #0F8E82;
        text-align:center;
        word-spacing:20px;
        letter-spacing:10px;
        text-indent:20px;
        line-height:100px;
        
      }
      span{
        vertical-align:top;
        text-decoration:underline;
      }
      .text-over{
        width: 100px;
        height: 30px;
        overflow: hidden;
        white-space:nowrap;
        word-break:break-all;
        text-overflow: ellipsis;
      }
</style>
  </head>
  <body>
    <div class="text">
      <div>字体abc abc</div>
      <div>aa<span>bb</span></div>
    </div>
    <div class="text-over">
      textoverflowtextoverflowtextoverflow
    </div>
  </body>
</html>

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之必备插件axios

    本节课程我们主要学习axios的使用,axios主要的功能就是实现ajax功能,他是一个简单的ajax库。

    老雷PHP全栈开发
  • 把项目迁移到Kubernetes上的5个小技巧

    我们将在本文中提供5个诀窍帮你将项目迁移到Kubernetes上,这些诀窍来源于过去12个月中OpenFaas社区的经验。下文的内容与Kubernetes 1....

    Java架构
  • Spring源码阅读-IOC 容器解析

    在Spring框架中最重要的是Spring IoC容器,它是Spring框架的核心。本文将从更高的角度来解析Sping IoC容器,了解其是如何设计的。了解一样...

    美的让人心动
  • Zookeeper 安装

    ZooKeeper服务器是用Java创建的,它在JVM上运行。你需要使用JDK 6或更高版本。

    用户5760343
  • SpringBoot开发案例之整合Quartz任务管理系统

    基于spring-boot+quartz的CRUD动态任务管理系统,适用于中小项目。

    小柒2012
  • Linux logrotate 详细

    志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到。对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了...

    用户5760343
  • 使用海康IP摄像头接入RTSP/RTMP视频平台如何修改默认H.265编码格式?

    我们团队(TSINGSEE青犀视频)在视频监控直播系统搭建上付出了很多努力,最终也出了适应不同场景的搭建方案:接入RTSP协议摄像头的EasyNVR、接入RTM...

    EasyNVR
  • 【开源解析】一款老虎机抽奖的数字滚动js组件

    最近遇到一个数字模拟老虎机滚动的问题,以前有做过几次。但是都没有对它进行沉淀,这次觉得应该把这个东西沉淀一下,方便日后使用。本组件主要针对移动端面。如果是PC端...

    用户5997198

扫码关注云+社区

领取腾讯云代金券