css 字体文本相关样式

字体设置:
	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   列分割的样式,即间距样式
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值