初识CSS-文本属性和引用方式

SS文本属性

CSS text（文本）属性就是设置文本的外观，比如字体颜色、对齐方式、缩进、行间距等。

文本颜色

属性名：color。

属性值：

颜色英文单词：color：red;

16进制颜色值：color：#000000;

RGB代码：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在开发中常用的是十六进制写法。

代码示例：

<head>
  <style>
  		/* 文本颜色属性 */
        .red {
            color: red;
        }
        .colorNum {
            color: #f00;
        }
        .colorRgb{
            color: rgb(255, 0, 0);
        }
  </style>  
</head>
<body>
     <!-- 文本颜色属性 -->
    <p class="red">我是文本属性的单词颜色设置</p>
    <p class="colorNum">我是文本属性的16进制颜色设置</p>
    <p class="colorRgb">我说文本属性的rgb颜色设置</p>
</body>

代码运行界面

文本对齐方式

属性名：text-align。

属性值：

“text-align: left”：默认值，文本左对齐。

“text-align：center”：文本居中对齐。

“text-align：right”：文本右对齐。

代码示例：

<head>
  <style>
  		/* 文本对齐方式 */
        .l {
            text-align: left;
        }
        .cen {
            text-align: center;
        }
        .ri {
            text-align: right;
        }
  </style>  
</head>
<body>
    <!-- 文本对齐方式 -->
    <p class="l">文本左对齐</p>
    <p class="cen">文本居中对齐</p>
    <p class="ri">文本右对齐</p>
</body>

运行界面：

文本装饰

属性：text-decoration。

属性值：

“text-decoration：none”：默认值，没有装饰线。

“text-decoration：underline”：给文本添加下划线。

注意：a标签中自带下划线，可以使用默认值属性去除a标签的下划线。

“text-decoration：overline”：给文本添加上划线。

“text-decoration：line-through”：给文本添加删除线。

代码示例：

<head>
  <style>
  		/* 文本装饰线 */
        .nor {
            text-decoration: none;
        }
        .underl {
            text-decoration: underline;
        }
        .upl {
            text-decoration: overline;
        }
        .lineTh {
            text-decoration: line-through;
        }
  </style>  
</head>
<body>
    <!-- 文本装饰 -->
    <p class="nor">文本装饰线：默认状态</p>
    <p class="underl">文本装饰线：文本添加下划线</p>
    <p class="lineTh">文本装饰线：文本添加删除线</p>
    <p class="upl">文本装饰线：文本添加上划线</p>
    <a href="#">我是超链接标签，文本自带下划线</a><br>
    <a href="#" class="nor">我是超链接标签，文本自带下划线。使用默认值属性，可去除文本下划线</a>
</body>

运行界面：

文本缩进

属性名：text-indent。通常指段落首行缩进。

属性值：px或em。

em是一个相对单位，

如果当前元素已经设置文字大小，就按照当前元素1个文字的大小显示缩进。

如果当前元素中没有设置，则按照父元素的1个文字大小，即1个em=16px显示缩进。

代码示例：

<head>
  <style>
  		/* 文本缩进 */
        .indEm {
            text-indent: 2em;
            /* em是一个相对单位，
            在没有设置文字大小时，按照默认字体大小，即16px显示。
            设置了文字大小，则按照设置的文字大小，几个em就是几个文字大小进行显示。
            */
        }
        .indPx {
            /* 像素是绝对单位，设置几就是几 */
            text-indent: 32px;
        }
  </style>  
</head>
<body>
    <!-- 文本缩进 -->
    <p class="indPx">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
    <p class="indEm">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
</body>

运行界面：

行间距

属性名：ling-height。用于设置文本的行高。即行与行之间的距离。

行间距=文本高度+上间距+下间距。（上间距=下间距）

行间距调整就是设置的上下间距的高

属性值：px或em。

代码示例：

<head>
  <style>
  		/* 行间距 */
        .lH {
            line-height: 3em;
        }
  </style>  
</head>
<body>
    <!-- 行间距 -->
    <p class="lH">
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
         我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
          我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
    </p>
</body>

运行界面：

CSS引入方式

分为三类：行内样式表（行内式）、内部样式表（内嵌式）、外部样式表（链接式）

行内样式表：

位置：直接写在元素的开始标签中。

特点：书写内容少，权重级别高，只能控制一个标签，结构样式混乱。

语法：style=”color: red;”

注意：多个属性之间使用空格分隔。

代码示例：

<p style="color: red;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性。</p>

<p style="color: red; font-size:28px;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性和字体28px。</p>

内部样式表（内嵌式）

位置：在head标签下，和title标签并列。样式属性均包含在style标签中。

特点：部分结构与样式相分离，还是在同一html文件上。

语法：

<style>
p {
color: red;
font-size: 28px;
}
</style>

代码示例：

<head>
 	<title></title>
	<style>
        .styleP {
            color: red;
            font-size: 32px;;
        }
	</style>
</head>
<body>
	<!-- 内部样式表 -->
    <p class="styleP">内部样式表：样式属性写在同一个html文件中的head标签里，和title标签并列。</p>
</body>

外部样式表（链接式）

第一步：创建index.css文件，在文件中输入样式属性，不用任何标签。

第二步：在html文件的head标签中，添加link标签，引入css文件。

第三步：给html文件中需要添加属性的元素添加选择器名称。

特点：结构和样式全局分离，一个css文件可以控制多个html页面。

注意：在css文件中只有样式没有标签，即直接书写标签器和属性，不要写style标签。

代码示例：

第一步：新建index.css文件，设置样式属性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head标签中添加link标签引用css文件。

<head>
  	<title>CSS样式引入方式</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./index.css">
</head>

第三步：在标签中调用属性。

<body>
   	<!-- 外部样式表 -->
    <p class="linC">
        外部样式表：<br>
        第一步：新建一个css文件，文件中直接编辑样式属性，不需要添加style标签。<br>
        第二步：使用css文件的html文档，应该在其head标签中添加link标签选择css文件的存储位置,<br>
        第三步：调用css文件中的样式。
    </p>
</body>

运行界面：

以上就是今天学习的内容，明天继续学习CSS的相关内容，今天就到这里了，各位晚安！

mac 文件管理中有这样一个小细节。

当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示
当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名

一个很微妙但非常人性化的细节（ps.都能完全看见也就不需要提示了）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~

一、CSS 实现思路

相信大家都知道 title 这个属性，原生的提示就用这个了，可以说从上古世纪就开始支持，下面是 MDN 上关于这个属性的介绍

title 全局属性包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户

用法也非常简单

<p  class="txt" title="这是absolute">元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
</p>

这里 title 的表现样式还有停留时间与操作系统和浏览器有关，也不可修改

现在问题来了，title 属性是预先添加的，并且无法通过样式来控制是否显示，那么，CSS 如何做到动态处理呢？接着往下看

虽然 CSS 无法动态去改变 title 属性，换个思路，假如有两份相同的文本，其中一份是带有 title 属性的，比如

<p class="wrap">
  <span class="txt">元素会被移出正常文档流，并不为元素预留</span>
  <span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留</span>
</p>

为了方便演示，这里给带有 title 属性的文本加上背景色，然后暂且称为 文本A 和 文本B 吧（以下适用），如下所示

现在只需要在单行文本的时候展示 文本A ，多行文本的时候展示 文本B，就可以实现我们想要的功能了。

那么，如何判断文本是否超出一行呢？

二、多行文本判断

首先，当文本超出一行时，高度必然会发生变化（），假设行高为 1.5，那么1行文本就是 1.5em，2行就是 3em，依次类推...

但是，如果我们限制A的最大高度为两行，那么一行和多行不就区分开了吗（单行高度是1.5em，多行高度是3em）

.txt{
  display: block;
  max-height: 3em;/*最大高度为2行*/
}

现在关键的一步来了，把文本B 往上移动2行的距离，这里用相对定位实现（margin也可以）

.title{
  position: relative;
  top: -3em; 
}

是不是有点奇怪了？其实就是往上位移了2行的距离，这样在文本A 只有一行的时候，文本B 就刚好“出界”了；在文本A 有多行的时候，由于高度只有2行的高度，文本B 刚好“覆盖”在上面，原理示意如下

这时，如果把父级的高度限制在一行，并且把文本B做单行截断

.wrap{
  line-height: 1.5;
  height: 1.5em;
}
.title{
  position: relative;
  top: -3em; 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

这样，在多行的时候，视野内看到的就是文本B了，效果如下

最后，把父级超出隐藏，还有文本B背景设置成父级相同的颜色就可以了~

到这里为止，就实现了文章开头所示的效果，完整代码可以查看 codepen auto title（记得鼠标放上去o~）

为了更方便直观的演示，这里做了一个类似的列表如下

在线例子可访问 codepen auto title list（记得鼠标放上去o~）

三、其他实用案例

下面再介绍两个更加实用的提示效果

中间省略效果

细心的小伙伴可能已经发现，文章开头的文本超出时，省略号是在中间的。

这种设计有什么好处呢？比如有时候很多文件的名称是相同的，只有后缀名不同，或者很多会有个版本号，举个栗子：

当宽度较小时，末尾出现了省略号，这就很尴尬了，由于前面都是一样的，一眼看上去完全分不清文件名哪个跟哪个（）

如果省略号在中间就很好区分了。那么，如何实现这一效果呢？

借助上面的布局，下面所有分析只需要对 文本B 进行处理就行了。关于中间省略效果，目前还没有专门的 CSS 样式可以实现，不过可以模拟它，接着往下看

首先，复制一份文本，这里使用 ::before 伪类通过 content 生成

.title::before{
    content: attr(title);
}

很明显，这个时候两段文本是连接在一起的

然后，给 :before 设置右浮动，宽度设置成 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}

接着，给 :before 设置超出截断

.title::before{
    /**/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最后，把 :before 换成前面省略号的效果，可以用 direction 实现，关于 direction，平时可能没怎么接触，其实就是改变排版方向的，默认是从左到右，省略号在右侧，如果改成从右到左，那么省略号也会在左边，所以

.title::before{
    /**/
    direction: rtl; /*从右到左*/
}

现在看看完成效果吧

有一点小问题，中间的省略号左边的空隙有时候有点大，如下

这个是因为这个地方刚好换行了，所有空出了一小截。这里可以用文本两端对齐简单优化一下

.title{
    /**/
    text-align: justify;
}

这样就能保证最右端的文字是靠右的（当然文本的间隙会略微增加一点~），效果如下

在线例子可访问 codepen auto middle ellipsis（记得鼠标放上去o~）

超出滚动效果

有时候，title 提示可能有点弱，不够明显，产品需要文本超出的时候，鼠标放上去可以自动滚动起来，类似这样的效果

如何实现的呢？其实借助上面的布局，这里实现就非常容易了，只需要对 文本B 做滚动动画即可，关于 CSS3实现无缝滚动，这里介绍一下实现：

要做到首尾无缝滚动，首先需要复制一份相同的文本，这里使用 ::after 伪元素通过 content 生成

.title::after{
    content: attr(data-title);/*复制一份文本，下图绿色的部分*/
}

现在需要在一行显示，不换行

.title{
    /**/
    white-space: nowrap;
}

可以看到，虽然不换行了，但是宽度还是父级的宽度，并没有跟随文字内容，这时，可以设置 display: inline-block

.title{
    /**/
    display: inline-block;
    white-space: nowrap;
}

关于宽度跟随文字内容，其实还可以用 width: max-content 实现，兼容性略差

.title{
    /*
    display: inline-block;
    white-space: nowrap;
    */
    width: max-content;
}

接着，设置 animation 动画即可，只需要当 transform 位移到 自身一半50% 时 迅速归位，就能达到无缝衔接的效果，如下

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
    }
}

这里首尾的间隙是用 padding 实现的

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*无缝滚动的首位间隙*/
}

在线例子可访问 codepen auto scroll list（记得鼠标放上去o~）

唯一的缺陷是动画时间是固定的，如果文本很长，可能出现滚动过快的问题

四、总结和说明

本文介绍了一种全新 CSS 自动判断多行文本的思路，并且带来3个人性化的小交互。总的来说，其实也没用到太多的技巧（主要还是想象力），结构还不算复杂，相信一步步看下来不会有很大的难度。

重点依旧是上面的布局部分，布局出来了，下面很多扩展效果也就迎刃而解了。由于只用到了 CSS2 相关特性（max-height、文本截断等），兼容性也是棒棒的，实测可以兼容到 IE7+（全兼容，放心使用），后面的超出滚动效果兼容到 IE10+，现在总结一下实现重点：

转换思路，节点复制是一个好办法
通过 max-height 可以判断单行和多行
灵活运用 CSS 障眼法 层级覆盖和超出隐藏
direction：rtl 可以实现前置省略号的效果
中间省略号可以用两段文本拼接的方式模拟
宽度跟随文本自适应可以用 inline-block 实现
无缝滚动效果可以用位移 -50% 来实现

好了，这样一个成本低廉，又非常人性化的小功能，赶紧用起来吧。如果大家觉得不错的话，欢迎点赞、收藏、转发???~

References

[1] [codepen auto title] https://codepen.io/xboxyan/pen/WNppXxx
[2] [codepen auto title list] https://codepen.io/xboxyan/pen/eYvveBe
[3] [codepen auto middle ellipsis] https://codepen.io/xboxyan/pen/VwpPNbm
[3] [codepen auto scroll list] https://codepen.io/xboxyan/pen/ZEeerBb

敬的用户，您是否曾经因为需要给大量的HTML文本添加同样的内容而感到苦恼？让我们介绍一款高效的批量处理工具，为你解决这个问题！这个工具能够快速地给html文本批量添加所需内容，让您不再因苦于手工操作，大幅提升工作效率。

首先，在首助编辑高手的主页面板块栏里，选择“文本批量处理”板块。

第二步，进入板块栏里，我们要点击上方功能栏里的“添加文件”即可

第三步，在弹出来的文件夹里，将您要添加内容的HTML文件进行导入进去

第四步，然后在下方的功能栏里，选择“添加内容”功能即可。

第五步，选择完毕之后，我们就要在下方的内容栏里将要输入的内容进行一一导入进行，即可

第六步，都设置完毕之后，我们就可以点击批量添加内容，等上方的状态栏显示添加成功，我们就可以打开文件进行查看，发现我们的内容已经添加完毕了

在线咨询

上一篇：登回雁峰（丙戌）近现代·傅子馀「诗话回雁峰（13
下一篇：Win10新版大手术：游戏玩家有福了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

初识CSS-文本属性和引用方式

SS文本属性

CSS引入方式

一、CSS 实现思路

二、多行文本判断

三、其他实用案例

四、总结和说明

您的项目需求