14 ,CSS 文字与文本

blankyao 发布于2019-04-23 11:42 / 2246人阅读

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 元件往下端靠齐。

无标题文档

	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之间

italic 斜体
italic 斜体

bold 粗体,color,颜色

font-size 像素百分比字体大小,font-family,字体名称设置字体名称

font属性简化的使用方法:是否斜体是否同宽是否粗体大小字体名称
font属性简化的使用方法:是否斜体是否同宽是否粗体大小字体名称

letter-spacing字间距,文本间隔

单词间距,汉字无效，zhe shi yige laoshi

pre 换行和空白受保护 nowrap 强制在同一行显示, pre 换行和空白受保护 nowrap 强制在同一行显示 pre 换行和空白受保护 nowrap 强制在同一行显示

文本居中

none 正常显示 underline 加上下划线 overline 加顶线 line-through 加删除线

text-indent 长度首行缩进百分比同上

line-height 像素行高数字/百分比行高

text-transform none 正常显示可以包含大，小字符
					capitalize 字符串第一个字符大写
					uppercase 设置大写字符
					lowercase 设置小写字符
 vertical-align sub 设置文字为下标。
					super 设置文字为上标。
					top 元件往上端靠齐。
					middle 设置文字是在中线位置。
					bottom 元件往下端靠齐。

设置文字是在中线位置

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

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

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

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

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

rubyshen 2019-08-22 17:32 评论0 收藏0
[译]HTML&CSS Lesson6: 排版

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

BDEEFE 2019-08-02 15:58 评论0 收藏0
[译]HTML&CSS Lesson6: 排版

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

chadLi 2019-08-29 13:55 评论0 收藏0
HTML+CSS基础课程-imooc-【更新完毕】

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

Heier 2019-08-01 15:04 评论0 收藏0
three.js 实现立体几何的文本标签

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

Hancock_Xu 2019-08-23 18:38 评论0 收藏0