CSS中常用的属性特性

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

text-align

我们都知道text-align作用是用于元素的对齐，常用的参数有left，center，right，但是我们很少用text-align去操作字符属性值，因为这是css Level4规范新增特性，如果我们操作字符属性值需要注意几点：必须是单个字符，而且只能用于单元格。此外字符与关键字属性值可以一起使用，当我们不去使用关键字属性值，那么字符就会显示在右侧。

td {
    text-align: '.' center;
}

//dom 代码

<table>
    <col width="55" height="100">
    <tr> <th> 学习JavaScript
    <tr> <td> 小学学费50.9
    <tr> <td> 中学学费545.3
    <tr> <td> 高中学费1105.3
    <tr> <td> 丢了0.01元
</table>

以上案例中的对齐方式就会按"."来对齐

text-decoration

text-decoration平时我们主要对文字进行操作，常用到的就是none，underline或者line-through。还有del结合text-decoration来实现贯穿线的删除效果。

<del style="text-decoration: line-through;">我是学习前端的的菜鸟周帅帅</del>

效果图如下：

text-decoration属性是一种缩写形式，完成的属性有以下几种形式： text-decoration- 可以接line、style、color和thickness这些参数。

下面是line相关属性有：none、underline、line-through、overline分别表示没有xianhuax

//取消下划线
<p style="text-decoration-line: none;">学习前端</p>
//添加下划线
<p style="text-decoration-line: underline;">javaScript</p>
//添加中间线
<p style="text-decoration-line: line-through;">web</p>
//添加下划线
<p style="text-decoration-line: overline;">web</p>

除了我们单个使用之外，css中text-decoration还支持多个值同时使用：

// 多个值同时使用，上划线和下划线
<p style="text-decoration-line: overline underline;">java</p>

style相关属性：solid、double、dotted、dashed、wavy分别表示实线，双实线，点线，虚线，波浪线。

//添加实线
<div style="text-decoration-style: solid;">学习 </div>
//添加双实线
<div style="text-decoration-style: double;">前端</div>
//添加点线
<div style="text-decoration-style: dotted;">liunx</div>
//添加虚线
<div style="text-decoration-style: dashed;">python</div>
//添加波浪线
<div style="text-decoration-style: 波浪线;">后端</div>

注意：如果我们对父元素和子元素使用相同的css属性，我们会发现一个新的效果，例如当父元素和子元素中同时设置text-decoration效果的时候，文字的效果不是覆盖的，而是进行了效果的累加。

text-decoration属性和border都可以实现双线、双实线等效果。但是两者比较的话，发现border会更好，因为border和padding结合可以控制间隔距离，同时可以实现多行下划线。text-decoration优点是可以实现波浪线效果。