4 css文本和文字样式

Posted 2021-12-28 xuanjian-91

CSS 文本样式：
	通过文本属性，改变文字
	*范围小的选择器生效优先级高于范围大的选择器
	css样式属性之间没有先后顺序，有这条属性就行
	如果对盒子没有指定宽高，那么盒子的宽高，由其子元素来撑开
	选择器+声明叫做一条css描述
	
	缩进文本
			p text-indent: -5em;//负位移
			p text-indent: 20%;//百分数要参考父元素的宽度。只影响第一行，举例，如果将缩进值设置为 20%，元素的第一行会缩进 20%（参考其父元素宽度的）。
			
	水平对齐
		text-align:center
   		line-height 
		
	字间隔
		p.spread word-spacing: 30px;
		p.tight word-spacing: -0.5em;
		
	字母间隔
		h1 letter-spacing: -0.5em
		h4 letter-spacing: 20px
		
	字符大小写转换
		h1 text-transform: uppercase
		h1 text-transform: lowercase
		h1 text-transform: capitalize//首字母大写
		h1 text-transform: none
		
	文本装饰
		a text-decoration: none;
		a text-decoration: underline;//下划线
		a text-decoration: overline;
		a text-decoration: line-through;
		
	处理空白符
		p white-space: normal; //合并多余的空白符
		p white-space: pre; // 不合并空白符，不忽略换行符
		p white-space: pre-wrap; //不合并空白符，不忽略换行符，还允许自动换行。
		p white-space: pre-line; /合并空白符,保留换行符, 还允许自动换行
		
	段落间距
		p.bigline-height: 200%//参考其父元素的行高
		p.bigline-height: 20px
		p.bigline-height: 0.5//0.5是什么
		
CSS 字体
	字体的属性:那种字体、大小、加粗、风格（如斜体）和变形（如小型大写字母）
	body font-family: sans-serif;//字体系列
	font-family 字体
                font-family: "宋体";
                font-family:"微软雅黑"  
                font-family:"微软雅黑","宋体";
                font-family:"Microsoft Yahei","SimSun"
                font-family:"Arial","Microsoft Yahei","SimSun"
				font-family:arial,sans-serif;//字体系列至少2个字体，通用字体系列和特定字体系列
				只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
	font-style 设置斜体
		p.normal font-style:normal;//字体样式，如斜体   italic; 让文字倾斜
			oblique 与 italic区别:
				italic会找到新的斜的字型替代
				oblique是普通的倾斜
				中文一律用italic  
	font-variant
		设定小型大写字母
		p font-variant:small-caps;
		p.normal font-variant: normal
		
	font-weight 设定字体粗细
		p.thick font-weight:bold;//700或bold字体 加粗
		p.thicker font-weight:400;//400或normal 表示正常
		
	font-size 设置字体大小
		h1 font-size:3.75em; //字体大小
		h1 font-size:60px;
		
	字体简写属性：
		p.ex1font:italic arial,sans-serif;
		font: italic bold 14px/28px arial,sans-serif;//无顺序书写，不同描述用空格隔开，一个描述用逗号隔开
		
	em
		W3C 推荐使用 em 尺寸单位
		浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。	
		如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels
		1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。	
		结合使用百分比和 EM
			在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

文本阴影
	CSS3 文本阴影
	h1
	text-shadow: 5px 5px 5px #FF0000;
	
	text-shadow: h-shadow v-shadow blur color;
	h-shadow 水平阴影的位置
	v-shadow 垂直阴影的位置
	blur  模糊的距离,值越大越模糊
	color 阴影的颜色
	
自动换行
	p word-wrap:break-word;//仅对一个英文单词过长没换行溢出的情况