zoukankan      html  css  js  c++  java
  • 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 { 500px;}
    			div#inner {text-indent: 10%;}
    			#inner p{ 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 { 500px;}
    div#inner {text-indent: 10%;}
    #inner p{ 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;
    }
    

      

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

  • 相关阅读:
    nginx 配置https, 服务器是阿里云的ECS(亲测)
    jenkins 安装2.170版本 的问题汇中
    终于有人把“TCC分布式事务”实现原理讲明白了!
    springcloud(九) springboot Actuator + admin 监控
    springcloud(八) Hystrix监控
    springcloud(七) feign + Hystrix 整合 、
    springboot 2.0 自定义redis自动装配
    springboot 2.0 自动装配原理 以redis为例
    博文分类索引--Python
    【python】-- Ajax
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/6836801.html
Copyright © 2011-2022 走看看