资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/14 ,CSS 文字与文本

14 ,CSS 文字与文本

blankyao / 2410人阅读

1.CSS 中长度与颜色

2.CSS 中的文字属性

3.CSS 中的文本属性

14.1 CSS 中长度与颜色

长度单位 说明

in 英寸

cm 公分

mm 公里

cm 以目前字体高度为单位

ex 以小写字母高度为单位（大部分不支持）

pt 1pt/72英寸

pc 1pc/12pt

px 像素（推荐使用）

颜色单位： 说明

十六进制 如：color:#ff0000

颜色名称 如：color:red

三原色单位 如：rgb(255,0,0)

一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。

每个值域在0－255之间

14.2 CSS 中的文字属性

属性名称 属性值 说明

font-style normal 正常显示

italic 斜体

font-variant normal 正常显示

small-caps 将英文大小写字母写调为同宽

font-weight normal 正常显示

bold 粗体

font-size 像素 字体大小

百分比 字体大小

font-family 字体名称 设置字体名称

font属性简化的使用方法：

font:是否斜体 是否同宽 是否粗体 大小 字体名称

例如:font:italic bold 200 隶书；

14.3 CSS中的文本属性

属性名称 属性值 说明

color 十六进制 颜色

英文名称 颜色

三原色单位 颜色

letter-spacing normal 正常显示

长度 文本间隔

word-spacing normal 正常显示

数字 单词间距

white-space normal 文本自动处理换行

pre 换行和空白受保护

nowrap 强制在同一行显示

text-align left 文字靠左

right 文字靠右

center 文字靠中

text-decoration none 正常显示

underline 加上下划线

overline 加顶线

line-through 加删除线

text-indent 长度 首行缩进

百分比 同上

line-height 像素 行高

数字/百分比 行高

text-transform none 正常显示可以包含大，小字符

capitalize 字符串第一个字符大写

uppercase 设置大写字符

lowercase 设置小写字符

vertical-align sub 设置文字为下标。

super 设置文字为上标。

top 元件往上端靠齐。

middle 设置文字是在中线位置。

bottom 元件往下端靠齐。

 

 

</>复制代码 
  3. 无标题文档
  5. </>复制代码 
    2. 1 CSS 中长度与颜色
    3. 长度单位 说明
    4. in 英寸
    5. cm 公分
    6. mm 公里
    7. cm 以目前字体高度为单位
    8. ex 以小写字母高度为单位（大部分不支持）
    9. pt 1pt/72英寸
    10. pc 1pc/12pt
    11. px 像素（推荐使用）
    12. 颜色单位： 说明
    13. 十六进制 如：color:#ff0000
    14. 颜色名称 如：color:red
    15. 三原色单位 如：rgb(255,0,0)
    16. 一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。
    17. 每个值域在0－255之间
    • italic 斜体
    • italic 斜体
  7. bold 粗体,color,颜色
  8. font-size 像素 百分比 字体大小,font-family,字体名称 设置字体名称
    2. font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称
    4. font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称
  10. letter-spacing字间距,文本间隔
  11. 单词间距,汉字无效，zhe shi yige laoshi 
  12. pre 换行和空白受保护  nowrap 强制在同一行显示,
  13. pre 换行和空白受保护  nowrap 强制在同一行显示
  14. pre 换行和空白受保护  nowrap 强制在同一行显示
  16. 文本居中
  17.  none 正常显示
  18. underline 加上下划线
  19. overline 加顶线
  20. line-through 加删除线
  21. text-indent 长度 首行缩进
  22. 百分比 同上
  23. line-height 像素 行高数字/百分比 行高
  24. </>复制代码 
    1. text-transform none 正常显示可以包含大，小字符
    2. capitalize 字符串第一个字符大写
    3. uppercase 设置大写字符
    4. lowercase 设置小写字符
    5.  vertical-align sub 设置文字为下标。
    6. super 设置文字为上标。
    7. top 元件往上端靠齐。
    8. middle 设置文字是在中线位置。
    9. bottom 元件往下端靠齐。
  25. 设置文字是在中线位置

 

　　

 

云服务器 GPU云服务器 css文本框 js文本框提示文字 文字与图片 css与html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1045.html

相关文章

  • 前端基本功之从大型项目中迅速定位修改位置

    摘要：前端开发，有一项很重要的基本功，就是在大型项目中，比如几万行代码中，迅速找到新增功能或调试的切入点。猜测输入框大小跟这个字号有关系。通过观察分析和断点技巧，我们很容易地就从一个大型项目几万行代码中迅速定位到我们要修改的地方。 前端开发，有一项很重要的基本功，就是在大型项目中，比如几万行js代码中，迅速找到新增功能或调试bug的切入点。特别是你只是接手这个项目，并不了解其中每一个功能点所...

    rubyshen 评论0 收藏0

  • [译]HTML&CSS Lesson6: 排版

    摘要：有几个不同的因素致使它的流行。在这四个值中，我们最常用的就是将文本设置为斜体和将文本恢复为正常样式。因此任何低于的值会显得更细，而高于的值会显得更粗。目前浏览器默认为蓝色，我们要把它改成和到元素一致的颜色。 随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。 过去我们只能在网站中使用少量的字体。...

    BDEEFE 评论0 收藏0

  • [译]HTML&CSS Lesson6: 排版

    摘要：有几个不同的因素致使它的流行。在这四个值中，我们最常用的就是将文本设置为斜体和将文本恢复为正常样式。因此任何低于的值会显得更细，而高于的值会显得更粗。目前浏览器默认为蓝色，我们要把它改成和到元素一致的颜色。 随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。 过去我们只能在网站中使用少量的字体。...

    chadLi 评论0 收藏0

  • HTML+CSS基础课程-imooc-【更新完毕】

    摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

    Heier 评论0 收藏0

  • three.js 实现立体几何的文本标签

    摘要：最近在做一个基于实现立体几何的项目，碰到一个问题，如何给球体加上文字标签，探索了几种实现方法。 最近在做一个基于three.js实现立体几何的项目，碰到一个问题，如何给球体加上文字标签，探索了几种实现方法。 二维文字标签 1.通过CSS2DObject创建二维对象 var earthDiv = document.createElement( div ); earthDiv.class...

    Hancock_Xu 评论0 收藏0

发表评论

登陆后可评论

0条评论

blankyao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<