css文本外观属性大全(内附实例与图解)

目录

  1. letter-spaceing:字间距

  2. Word-spacing:单词间距

  3. line-height:行间距

  4. text-decoration:文本修饰

  5. text-align:水平对齐方式

  6. text-indent:首行缩进

  7. white-space:空白符处理

  8. Word-break:自动换行

  9. text-Shadow:文字阴影

  10. overflow 文字溢出

  11. text-overflow 文字溢出处理

  12. letter-spaceing:字间距

Letter-space属性用于定义字间距

《css文本外观属性大全(内附实例与图解)》

  1. Word-spacing:单词间距

-Word-spacing属性用于定义英文单词之间的间距,对中文字符无效,和letter-spacing一样,其属性值可以为不同的单位数值,允许使用负值默认为normal

《css文本外观属性大全(内附实例与图解)》

Word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母间的间距,而Word-spacing定义的为英文单词之间的间距

  1. line-height:行间距

Line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称成为行高。Line-height常用的属性单位有三种,分别为像素px,相对值em,和百分比%,实际工作中使用最多的是像素px
《css文本外观属性大全(内附实例与图解)》
行高: 文本顶部 + 文本底部 + 一倍行距
Css定义的行高:两行文本之间的基线的距离就是行高(加上去其实就等于上面定义行高的距离)

行高可以跟单位,也可以不跟单位,但是意义不同
Font: 12px/1.5em ‘宋体’;
Font: 12px/150% ‘宋体’;
Font: 12px/1.5 ‘宋体’;
Font: 12px/20px ‘宋体’; (绝对)
继承特性:
加上单位 先计算 后继承 是父类为基准
不加单位 先继承 后计算 是孩子根据自己的文字为基准
Line-height: 可以让单行文本垂直居中
行高=盒子的高度的时候文本在盒子中垂直方向居中
行高>盒子高度:文本偏下
行高<盒子高度:文本偏上

通常设置行高来控制文本的垂直居中

  1. text-decoration:文本修饰

Text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性如下:
-none:没有装饰(正常文本默认)
-underline:下划线
-overline:上划线
-line-through: 删除线

text-decoration: underline;

《css文本外观属性大全(内附实例与图解)》

text-decoration: overline;

《css文本外观属性大全(内附实例与图解)》

text-decoration: line-through;

《css文本外观属性大全(内附实例与图解)》

另外,text-decoraction后可以赋多个值,用于给文本添加多种显示效果,例如希望文字同时有下划线跟删除线效果,就可以将underline和line-through同时赋值给text-decoration。

清除a标签的默认样式

a { 
            text-decoration: none;
   }
  1. text-align:水平对齐方式

Text-align属性用于设置文本内容的水平对齐,相当于HTML中的align对齐属性,其可用属性值如下:
-left: 左对齐(默认)
-right: 右对齐
-center: 居中对齐

常用的文字水平居中

text-align: center;
  1. text-indent:首行缩进

Text-indent属性用于设置段落的文本缩进,只能设置于块级标签。其属性值可为不同单位的数值,em字符宽度的倍数,或相当于浏览器窗口宽度的百分比%,允许使用负值,建议用em作为设置单位

一般用于网站h1标题的SEO优化

h1 {
text-indent: -9999px;
}

P { 
Text-indent: 2em;
/*首行缩进*/
}

《css文本外观属性大全(内附实例与图解)》

  1. white-space:空白符处理

使用HTML制作网页时,不论源代码中多少空格,在浏览器中只会显示一个字符的空白。在css中,使用white-space属性可设置空白字符1的处理方式,其属性如下:

-normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行

-pre:预格式化,按文档的书写格式保留空格、空行原样显示

-nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记
。内容超过元素边界也不换行,若超出浏览器页面则会自动增加滚动条。

《css文本外观属性大全(内附实例与图解)》

  1. Word-break:自动换行

-Normal:使用浏览器默认的换行规则,不打断单词完整
-break-all:允许在单词内进行换行
-keep-all:只能在半角空格或连字符处进行换行 连字符“- ,。 .”

Normal:
《css文本外观属性大全(内附实例与图解)》

Break-all:
《css文本外观属性大全(内附实例与图解)》

Keep-all:
《css文本外观属性大全(内附实例与图解)》

  1. text-Shadow:文字阴影

格式:

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;

注意设置文字阴影时,水平位置与垂直位置一定不能省,其他可以省略

 text-shadow: 10px 10px 5px #1234;

文字多阴影

语法格式同多背景

text-shadow: 2px 2px 5px blue,
             5px 5px 5px red;

《css文本外观属性大全(内附实例与图解)》

文字凹凸效果

利用文字多阴影设置两个方向相反的文字阴影实现

凹:text-shadow: 1px 1px #000,-1px -1px #fff;
凸: text-shadow: -1px -1px #000,1px 1px #fff;

  1. overflow 文字溢出

取值:
visible: 对溢出内容不做处理,内容可能会超出容器。 (默认)
hidden: 隐藏溢出容器的内容且不出现滚动条。
scroll: 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。

常用:

overflow: hidden;
  1. text-overflow 文字溢出处理

取值:
clip: 当内联内容溢出块容器时,将溢出部分裁切掉。
ellipsis: 当内联内容溢出块容器时,将溢出部分替换为(…)

注意:text-overflow使用需要配合overflow:hidden;(超出部分隐藏)和white-space:nowrap;(单行显示)一起使用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

《css文本外观属性大全(内附实例与图解)》

    原文作者:曾吹雨
    原文地址: https://blog.csdn.net/weixin_45135068/article/details/107711644
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞