6CSS之文本

CSS文本:文本缩进(text-indent)、文本对齐(text-align)、文本修饰(text-decoration)、文本大小写(text-transform)、字符距离(letter-spacing)

 

		<hr/>
		<p id="pid">当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。</p>
		<hr/>

		<!--
			div#outer {width: 500px;}
			div#inner {text-indent: 10%;}
			#inner p{width: 200px;}
		-->
		<div id="outer">
			<div id="inner">some text. some text. some text.
				<p>this is a paragragh.</p>
			</div>
		</div>
		
		<hr/>
		<p id="pid2">当时已经有过一些样式表语言的建议了This is some text. This is some text</p>
		<hr/>
		<p id="pid3">
		This              paragraph has    many    spaces           in it.
		This              paragraph has    many    spaces           in it.<br/>
		This              paragraph has    many    spaces           in it.</p>

　　

/*-----------------------------文本--------*/
/*文本缩进*/
p#pid{
	text-indent:2em;/*em这个单位在文本缩进使用，效果更好*/
}

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
#inner p{width: 200px;}

/*字间隔*/
p#pid2{
	word-spacing:2em;          /*word-spacing是表示单个英文单词之间的距离*/
	/*letter-spacing: 1em;*/   /*letter-spacing是表示单个字符之间的距离*/
}

/*处理空白符*/
p#pid3{
	white-space: normal;	/*将多余的空格丢弃，去掉换行*/
	/*white-space: pre;*/			/*将多余的空格与换行原样输出*/
	/*white-space: nowrap;*/ 	 /*去掉所有换行，除非有br标签*/
}

　　

------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------

 

-------------------------------------------------------------------------------------------

 

-------------------------------------------------------------------------------------------

 

-------------------------------------------------------------------------------------------

 

#testId{
	text-indent: 30px;/*由此可知，默认字体占15px或16px*/
}

#tdId{
	/*text-decoration: underline; */
	/*text-decoration: line-through;*//*删除线*/
	text-decoration:overline;
}

#lsId{
	letter-spacing: 10px;
}

#ttId{
	text-transform:lowercase;
}

#uid{
	text-transform: uppercase;
}

　　

 

-------------------------------------------------------------------------------------------