CSS：文本样式（缩进/对齐/字符间隔/文本装饰/空白格处理）_html/css_WEB-ITnos

通过CSS样式，可以设定文本的缩进，对齐，字符间隔等属性。

代码整理自w3school：http://HdhCmsTestw3school测试数据.cn

               body {background-color:#e9e9e9}    span.redStyle {color:red}    p#indentStyle {text-indent:5em}    p#indentStyleNega {text-indent:-5em; padding-left: 5em;}    p#indentStylePercent {text-indent:20%}    div.divFixedWidth {width:500px;background-color:#bfb;}    div#outer {width: 500px;background-color:#bfb}    div#inner {text-indent: 10%;}    p#pFixedWidth {width: 200px;}    p.alignLeftStyle{text-align:left}    p.alignRightStyle{text-align:right}    p.alignCenterStyle{text-align:center}    p.bigWordSpace{word-spacing:0.5em}    p.smallWordSpace{word-spacing:-0.2em}    p.bigLetterSpace{letter-spacing:0.2em}    p.smallLetterSpace{letter-spacing:-0.2em}    p.upperCase span {text-transform:uppercase}    p.lowerCase span {text-transform:lowercase}    p.capitalize span {text-transform:capitalize}    p.underlineStyle {text-decoration:underline}    p.overlineStyle {text-decoration:overline}    p.whiteSpaceNormal {white-space:normal}    p.whiteSpacePre {white-space:pre}    p.whiteSpacePreWrap {white-space:pre-wrap}    p.whiteSpacePreLine {white-space:pre-line}    p.whiteSpaceNoWrap {white-space:nowrap}       CSS 文本     
(一)首行数字缩进
  
 首行缩进5em的段落。 这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容
  
(二)首行数字缩进为负值
  
 首行缩进-5em,padding-left=5em的段落(悬挂缩进的效果)。 这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容
  
(三)首行相对父元素百分比缩进
  
    
 首行相对父元素缩进20%。由于父元素是500px,因此本段落首行就缩进100px。 这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容

      
查看更多关于CSS：文本样式（缩进/对齐/字符间隔/文本装饰/空白格处理）_html/css_WEB-ITnos的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did106559