继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS中的文本样式

慕慕9229675
关注TA
已关注
手记 19
粉丝 1
获赞 10

首行缩进(text-indent)

我们原来讲过段落标签可以用<p>标签表示,但是<p>标签没有直接设置首行缩进的属性。不过CSS中的text-indent属性可以实现段落的首行缩进。来一段宋词:

<div id="div01">
        <p class="p01">
            永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹;又有清流激湍,映带左右,引以为流觞曲水,列坐其次。虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。
        </p>
        <p class="p01">
            是日也,天朗气清,惠风和畅,仰观宇宙之大,俯察品类之盛,所以游目骋怀,足以极视听之娱,信可乐也。
        </p>
    </div>

CSS定义样式

#div01{
    width: 400px;
    height: auto;
    margin: 0 auto;
}

.p01{
    text-align: left;
    font-size: 15px;
    text-indent: 30px;
}

中文的首行缩进一般都是缩进两个汉字的距离,所以中文情况下text-indent的值一般设置成font-size的两倍,看一下运行效果:

图片.png

文本对齐(text-align)

CSS中使用text-align控制文本的对齐方位,其有以下几种对齐方式:

对齐属性 对齐方式
left 左对齐
center 剧中对齐
right 右对齐
start 块容器的方向是从左到右,则与left相同;块容器的方向是从右到左,则与right相同
end 如果块容器的方向是从左到右,则为右;如果块容器的方向是从右到左,则为左
justify 两端对齐
inherit 继承父类的对齐样式

我们看一下部分场景效果,为了便于比对,div中添加了背景色:
text-align:left;

图片.png

text-align:end;
图片.png

text-align:center;
图片.png

start属性和end属性是CSS3中引入的,其效果与left和right基本相同,只是在排版方向上略有不同。

几种划线

之前HTML中要实现上划线或者下划线一般都是使用s或者u标签,但是在CSS中使用text-decoration属性就可以定义不同的划线。text-decoration有以下几个常用属性值:

text-decoration属性值 说明
none 不添加任何划线
underline 下划线
overline 上划线
line-through 中划线
<div>
    <p class="underline">下划线</p>

</div>

<div>
    <p class="overline">上划线</p>
</div>

<div>

    <p class="through">中划线</p>

</div>
.underline{

    text-decoration: underline;

}

.overline{

    text-decoration: overline;

}

.through{

    text-decoration: line-through;

}

浏览器里的运行效果:

图片.png

文字大小写

英文字母存在大小写的区分,CSS中的text-transform属性可以将文本中的大小写转换成统一的大写或者小写,text-transform有以下几个常用值:

text-transform属性值 说明
none 不做任何转换
uppercase 转为大写
lowercase 转为小写
capitalize 首字母大写
full-width 将所有字符转换成全角形式
initial 设置为默认值
inherit 继承父类属性值
unset initial和inherit二选一
<div>
        <p class="none">none</p>
        <p class="uppercase">uppercase</p>
        <p class="lowercase">lowercase</p>
        <p class="capitalize">capitalize</p>
        <P class="initial">initial</P>
        <P class="inherit">inherit</P>
        <P class="unset">unset</P>
 </div>
.none{
    text-transform: none;
}

.uppercase{
    text-transform: uppercase;
}

.lowercase{
    text-transform: lowercase;
}

.capitalize{
    text-transform:capitalize;
}

.unset{
    text-transform:unset;
}

.initial{
    text-transform:initial;
}

.inherit{
    text-transform:inherit;
}

.unset{
    text-transform: unset;
}

浏览器中的运行效果:

图片.png

行高

CSS中使用line-height来控制每一行的高度,其取值有nomal百分比具体像素值inheritinitial等,由于其取值比较多并且具体像素值的单位不同效果也不一样,篇幅原因这篇文章就不做具体介绍了。

间距

CSS中使用letter-spacingword-spacing表示间距和词间距,使用频率不高,简单了解即可。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP