CSS文本样式值

字体样式针对的是“文字本身”的形体效果,而文本样式针对的是“整个段落”的排版效果。字体样式注重个体,文本样式注重整体。常见的文本样式如下表。

属性 说明
text-indent 首行缩进
text-align 水平对齐
text-decoration 文本修饰
line-height 行高
text-transform 大小写转换
letter-spacing、word-spacing 字母间距、词间距

接下来,我们一起来看看这些属性的运用。

text-indent

p元素的首行是不会自动缩进的,因此我们在HTML中往往使用6个 (空格)来实现首行缩进两个字的空格。但是这种方式会导致冗余代码很多。因此使用text-indent属性来定义p元素的首行缩进。



    
        
        首行缩进
        
    
    
        

从明天起,做一个幸福的人,喂马,劈柴,周游世界;从明天起,关心粮食和蔬菜,我有一所房子,面朝大海,春暖花开;从明天起,和每一个亲人通信,告诉他们我的幸福。那幸福的闪电告诉我的,我将告诉每一个人;给每一条河每一座山取一个温暖的名字。陌生人,我也为你祝福,愿你有一个灿烂的前程;愿你有情人终成眷属;愿你在尘世获的幸福;我也愿面朝大海,春暖花开。

text-align

使用text-align属性来控制文本在水平方向上的对齐方式。

text-align属性值:

  • left(左对齐)
  • center(居中对齐)
  • right(右对齐)


    
        
        水平对齐
        
    
    
        

我爱学习

我爱学习

我爱学习

text-decoration

使用text-decoration属性来定义文本的修饰效果(下划线、中划线、顶划线)。text-decoration属性取值有4个,如下表。

属性值 说明
none 去掉所有划线效果
underline 下划线
line-through 中划线
overline 顶划线

在HTML中,可以使用s元素实现中划线,用u元素实现下划线。但是有了CSS之后,都是使用text-decoration属性来实现。结构用html标签,外观一般都要用CSS。



    
        
        文本修饰
        
    
    
        

我爱学习

我爱学习

我爱学习

line-height

可以使用line-height属性来控制一行文本的高度。



    
        
        行高
        
    
    
        

我爱学习


我爱学习


我爱学习

text-transform

可以使用text-transform属性来将文本进行大小写转换。text-transform属性取值有4个,如下表。

属性值 说明
none 无转换
uppercase 转换为大写
lowercase 转换为小写
capitalize 只将每个英文单词首字母大写


    
        
        大小写
        
    
    
        

Study hard and make progress every day

Study hard and make progress every day

Study hard and make progress every day

letter-spacing

可以使用letter-spacing属性来控制字与字之间的距离。每一个中文汉字都被当作一个“字”,而每一个英文字母也被当作一个“字”。



    
        
        字间距
        
    
    
        

Study hard and make progress every day.好好学习,天天向上

Study hard and make progress every day.好好学习,天天向上

Study hard and make progress every day.好好学习,天天向上

word-spacing

使用word-spacing属性来定义两个单词之间的距离。一般来说,word-spacing只针对英文单词而言。



    
        
        词间距
        
    
    
        

Study hard and make progress every day.好好学习,天天向上

Study hard and make progress every day.好好学习,天天向上

Study hard and make progress every day.好好学习,天天向上

你可能感兴趣的:(前端,css)