码迷,mamicode.com
首页 > Web开发 > 详细

4 css文本和文字样式

时间:2019-06-06 21:11:12      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:san   cin   百分数   因此   是什么   参考   设置字体   垂直   int   

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.big{line-height: 200%}//参考其父元素的行高
		p.big{line-height: 20px}
		p.big{line-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.ex1{font: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;}//仅对一个英文单词过长没换行溢出的情况

  

4 css文本和文字样式

标签:san   cin   百分数   因此   是什么   参考   设置字体   垂直   int   

原文地址:https://www.cnblogs.com/xuanjian-91/p/10986806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!