字体设置:
font-size:10px; 设置字体大小
其中:
自适应大小:
font-size:samll/large等
font-size:100%等,100%为原本大小,参照的是父级的字体大小
font-size:1em; 1em相当于100%,参照父级,一个字符的宽度
font-family "黑体"; 设置字体格式
其中:
(1)字体可以定义多个,以','号分割,如果第一个字体不可用,浏览器会自动往后选择
(2)多个单词的字体必须用引号''包裹,单个不用
font-weight:bold; 设置字体加粗
font-style:italic; 斜体
font-variant:small-caps; 小型大写
谷歌字体
如果您不想使用HTML中的任何标准字体,则可以使用Google Fonts API向页面添加数百种其他字体。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
body {
font-family: "Sofia";
font-size: 22px;
}
字体颜色设置
color
行高设置
line-height:10px; 即行间距
行高等于div的高度,行中的内容将会竖直居中
文本设置
text-align:center 文本内容位置设置
text-overflow:ellipsis|clip; 溢出的内容以省略号|截断显示
text-transform:uppercase/lowercase/capitalize; 大写/小写/首字符大写
text-indent:npx/1em; 首行缩进多少px,缩进多少字符的宽度
direction: rtl; 文字从右开始排列
文本下划线设置:
text-decoration:none; 去除下划线
text-decoration: line-through underline; 给文字添加中划线和下划线
text-decoration是text-decoration-line、text-decoration-color、text-decoration-style的复合属性
text-decoration-line 可定义多个表示都添加上
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-decoration-color
text-decoration-style:solid
text-划线类型-offset:npx; 划线距离文本的偏移
text-underline-offset: 1px;
文本内容设置
文本内容要使用上下边框,必须转为块级元素
letter-spacing: npx; 文本内容中每个字符的距离为npx
word-spacing:npx; 设置单词之间的间距
保留文本空白和换行
white-space: nowrap; 不换行
white-space:pre;
white-space:pre-line; 只保留换行
<pre>xx</pre>
文本(单词)换行
word-wrap: break-word; 允许长文本换行,会首先放到下一行,若下一行宽度不够该文本,会再进行断句换行
word-break: keep-all; "-"的连接符后换行
break-all; 在任何字符处换行
不会尝试把长单词挪到下一行,而是直接进行单词内的断句换行,比起word-wrap会更节省空间
文字同一行显示不换行
white-space:nowrap;
文本排版模式
writing-mode:vertical-lr; 将原文本的每一行转换成每一列,从左向右排列
writing-mode:horizontal-tb; 默认排版方式,从左到右,从上到下
文本环绕样式
shape-outside:border-box/padding-box/content-box/margin-box; 若遇到换行,文本将围绕盒子的边框/内边距/内容/外边距展示
文字阴影
text-shadow: 2px 2px 5px red,2px 2px 5px red; 阴影列表
选择文字:
-moz-user-select: none
子元素所有的文字都不能选择,包括input输入域中的文字。
-moz-user-select: -moz-all
子元素所有的文字都可以被选择,但是input输入域中的文字不能被选择。
-moz-user-select: -moz-none
子元素所有文字多不能选择,除掉input输入域中的文字。
文字多列排版
column-count=n数字 分几列
column-gap=npx 列间距
column-rule=solid/dashed 2px red 列分割的样式,即间距样式
css 字体文本相关样式
最新推荐文章于 2022-11-22 07:45:00 发布