【css】文本基本样式(对齐方式、装饰、首行缩进、字词间距)

文本相关样式也是可以继承的,在父元素中设置后子元素中同样生效。

一、对齐方式

注:要给它们的父元素设置
使用text-align属性,设置文字内联块内联元素 居中对齐:

text-align: center;   居中对齐
text-align: left;  居左对齐
text-align: right;  居右对齐

我们简单设置一下,我在一个div内放入了文字、连接和图片(中间有br换行),div是它们的父元素,我设置上居中对齐属性:

html:

    
我是文字
我是链接

css:

        div{
            text-align: center;
            width:400px;
            height:400px;
            background-color: pink;
        }

效果如下,实现了居中对齐:


图1 居中对齐

二、文本装饰(下划线等)

(1)使用text decoration进行文本装饰,可以给各种文本加上下划线,也可以消除自带的下划线:

text-decoration: underline;  下划线
text-decoration: overline;  上划线
text-decoration: line-through;  中划线
text-decoration: none;  没有线

我们用三行文字和一行连接来体现效果:

html:

        我有上划线
我有中划线
我有下划线
我是没有下划线的链接

css:

        .s1{
            text-decoration:overline;
        }
        .s2{
            text-decoration: line-through;
        }
        .s3{
            text-decoration: underline;
        }
        a{
            text-decoration:none;
        }

效果如下:


图2-1 文本装饰

(2)给文本装饰改变样式
注意顺序是“上划线(中划线,下划线) 线的样式 线的颜色 ”中间空格分离

text-decoration: underline wavy red;
                   下划线  波浪形 红色

线的样式:

  • 实线 solid
  • 点状 dotted
  • 虚线 dashed
  • 双线double
  • 波浪线 wavy

举几个例子试试看:

html:

下划线波浪形红色
中划线双线绿色
上划线点状蓝色

css:

        .s1{
            text-decoration:overline wavy red;
        }
        .s2{
            text-decoration: line-through double green;
        }
        .s3{
            text-decoration: underline dotted blue;
        }
图2-2 文本装饰——各种划线

(3)给父元素设置上划线,再给子元素设置下划线,子元素不会把父元素里的上划线覆盖掉,而是又加了一个下划线,会出现两条线。

我们在(2)的css基础上,再给它们的父元素div添加一个文本装饰属性:

        div{
            text-decoration:overline;
        }

效果如下:文本装饰是不会覆盖掉的,会累加


图2-3 文本装饰叠加

三、首行缩进

使用text-indent进行设置,实现自然段的功能
em的大小是根据字号font-size决定的,2em就是缩进2个字大小的意思(这个值可以是负的哦):

text-indent:2em;  缩进2个字

我们用两段文字来感受一下(为了方便看到缩进效果,我设置了下段落宽度为300px)

html:

    

在我年纪尚轻,涉世未深时,父亲教导过我一句话,至今言犹在耳。

“当你想开口批评别人的时候,”父亲对我说 ,“你要想到,这个世界上不是所有人都像你一样拥有那么多优越的条件。”

css:

        p{
            width:300px;
            text-indent: 2em; 
        }

效果如下,实现了首行缩进:


图3 首行缩进

四、字间距

使用letter-spacing设置字母与字母之间的距离,文字与文字之间的距离

letter-spacing: 30px;  设置字间距为30px

接下来我们给一句中文和英文分别试一下,设置字间距为10px:
html:

    

勇敢做自己。

Dare to be yourself.

css:

       p{
           letter-spacing: 10px;
       }

效果:


图4 字间距

五、词间距

使用word-spacing设置单词与单词之间的距离

word-spacing: 30px; 设置词间距为30px

我们把刚刚字间距模块的

样式改为调整词间距的:
html:

    

勇敢做自己。

Dare to be yourself.

css:

        p{
            word-spacing: 10px;
        }

效果如下,只对英文单词有用哦:


图5 词间距

你可能感兴趣的:(【css】文本基本样式(对齐方式、装饰、首行缩进、字词间距))