css 字体文本相关样式

深藏阁楼爱情的钟 2021-07-24 14:44 489阅读 0赞

字体设置:
    	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;  小型大写
    	
    字体颜色设置
    	color
    
    行高设置
    	line-height:10px;  即行间距
    	行高等于div的高度，行中的内容将会竖直居中
    	
    文本设置
    	text-align:center     文本内容位置设置
    	text-decoration:none;  去除下划线
    	text-overflow:ellipsis;   溢出的内容以省略号显示
    	text-decoration: line-through/underline;  给文字添加中划线/下划线
    	text-transform:uppercase/lowercase/capitalize; 大写/小写/首字符大写
    	text-indent:npx/1em;  首行缩进多少px,缩进多少字符的宽度
    	direction: rtl;  文字从右开始排列
    	
    文本内容设置
    	文本内容要使用上下边框，必须转为块级元素
    	letter-spacing: npx;  文本内容中每个字符的距离为npx
    	word-spacing:npx;  设置单词之间的间距
    
    保留文本空白和换行
    	white-space:pre;
    	white-space:pre-line; 只保留换行
    	<pre>xx</pre>
    
    文字同一行显示不换行
    	white-space:nowrap;
    
    文本排版模式
    	writing-mode:vertical-lr;  将原文本的每一行转换成每一列,从左向右排列
    	writing-mode:horizontal-tb; 默认排版方式,从左到右,从上到下
    
    文本环绕样式
    	shape-outside:border-box/padding-box/content-box/margin-box; 若遇到换行,文本将围绕盒子的边框/内边距/内容/外边距展示
    
    选择文字:
    	-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   列分割的样式,即间距样式