css中一些文本属性的用法

代码

/*
    text-transform用法
*/
.p1 {
    /* 默认值 */
    text-transform: none;
}
.p2 {
    /* 每个单词的首字母大写 */
    text-transform: capitalize;
}
.p3 {
    /* 全部转换为大写字母 */
    text-transform: uppercase;
}
.p4 {
    /* 全部转换为小写字母 */
    text-transform: lowercase;
}

/*
    text-decoration用法
*/
.p5 {
    /* 默认值 */
    text-decoration: none;
}
.p6 {
    /* 下划线 */
    text-decoration: underline;
}
.p7 {
    /* 上划线 */
    text-decoration: overline;
}
.p8 {
    /* 穿越文本中间的线 */
    text-decoration: line-through;
}
.p9 {
    /* 去除超链接自带的下划线 */
    text-decoration: none;
}

/* letter-spacing用法 */
.p10 {
    /* 默认值 */
    letter-spacing: normal;
}
.p11 {
    /* 设置字符间距为10px */
    letter-spacing: 10px;
}
.p12 {
    /* 设置字符间距为-5px */
    letter-spacing: -5px;
}

/* word-spacing用法 */
.p13 {
    /* 默认值 */
    word-spacing: normal;
}
.p14 {
    /* 设置字的间距为10px，对中文的效果不明显 */
    word-spacing: 10px;
}
.p15 {
    /* 设置字的间距为-5px，对中文的效果不明显 */
    word-spacing: -5px;
}

/* text-align用法 */
.p16 {
    /* 水平右对齐 */
    text-align: right;
}
.p17 {
    /* 水平居中对齐 */
    text-align: center;
}
.p18 {
    /* 水平两端对齐 */
    text-align: justify;
}

/* text-indent用法 */
.p19 {
    /* 首行缩进20px，第一行会右移20px */
    text-indent: 20px;
}
.p20 {
    /* 首行缩进-30px，第一行会左移-30px，可以达到隐藏的效果 */
    text-indent: -30px;
}
.p21 {
    /* 与字体大小配合使用，使首行缩进距离随着字体大小的变化而变化 */
    /* 设置字体大小为20px，如果不设置字体大小，默认为16px */
    font-size: 20px;
    /* 首行缩进距离是字体大小的2倍为40px */
    text-indent: 2em;
}
.p22 {
    font-size: 20px;
    /* 用%设置首行缩进距离，%是基于父元素宽度的百分比的缩进 */
    text-indent: 4%;
}

<p class="p1">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p2">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p3">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p4">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p5">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p6">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p7">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p8">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p>
    <a href="#">网易新闻频道（超链接默认自带下划线）</a>
</p>
<p>
    <a href="#" class="p9">网易新闻频道（去掉下划线）</a>
</p>
<p class="p10">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p11">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p11">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p12">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p12">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p13">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p14">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p14">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p15">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p15">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p>默认水平左对齐</p>
<p class="p16">水平右对齐</p>
<p class="p17">水平居中对齐</p>
<p class="p18">
    You Are the Woman I Love Best of All in My LifeHe, a gentleman, was regarded to be the most handsome man in the world, wonderfully urbaneextremely agreeable. His pure eyes and charmingsmile always quivered a network of ripples in thehearts of his fans. He was the charming prince in the dreams of tens of thousands of women and adoredcrazily by them in the last half of the century. His name was Gregory Peck.
</p>
<p class="p19">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p20">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p21">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>
<p class="p22">
    嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。
</p>

效果

查看源代码