css文本属性

1css文本属性

css文本属性可以定义文本的外观

通过文本属性，你可以改变文本的颜色、字符间距、对齐文本，装饰文本、对文本进行缩进

1.1文本缩进

text-indent属性将页面上的段落第一行进行缩进

取值：

• 用长度指定文本的缩进。可以为负值
• 用百分比指定文本的缩进。可以为负值

p{
    text-indent:20px;
}
p{
    text-indent:20%;
}

1.2文本对齐

text-align属性设置文本水平对齐

取值：

• left：内容向左对齐
• center：内容两端对齐
• right：内容右对齐 
• justify：内容两端对齐，对最后一行无效 
• 注意 如果只有一行，那么第一行同样是最后一行

li{
    text-align:left;
}

li{
    text-align:right;
}

li{
    text-align:center;
}

li{
    text-align:justify;
}

 解决justify

<!-- 如果只有一行文字
方法一 -->
<p class="test">
    只有一行很短的文字
</p>
 <style>
    p.test {
        width: 100%;
        border: 1px solid #f00;
        text-align-last: justify;
    }
</style>

<!-- 如果有多行文字 -->
<p class="test">
   只有一行很短的文字
</p>

<!--方法二
使用伪元素：
1. 需要使用after，将伪元素放在需要两端对齐的元素后面，作为第二行
2. 设定after的width为100%，生成第二行
3. 设置为行内快元素，设置的width才有效
-->
<style>
    p.test {
        text-align: justify;
    }

    p.test:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
</style>
<p class="test">
    只有一行很短的文字
</p>

实现表单名称两端对齐

<style>
    label {
        display: inline-block;
        width: 70px;
        /* 重点代码 */
        text-align: justify;
        text-align-last: justify;
        margin-right: 10px;
    }
</style>
<!-- 如果只有一行文字 -->
<div class="box">
    <form action="">
        <div class="item">
            <label for="username">用户名</label>
            <input type="text" name="" id="username">
        </div>
        <div class="item">
            <label for="pwd">密码</label>
            <input type="password" name="" id="pwd">
        </div>
        <div class="item">
            <label for="repwd">重复密码</label>
            <input type="password" name="" id="repwd">
        </div>
    </form>
</div>

1.3文本修饰

text-decoration属性设置文本线条的位置、综合属性

• text-decoration-line 线条的位置
• text-decoration-color线条的颜色
• text-decoration-style线条的样式

text-decoration-line

none 指定的文字无装饰

underline下划线

overline上划线

line-through贯穿线、删除线

text-decoration-style

solid 单行实线

double 双实线

dotted 点线

dashed 虚线

wavy 波浪线

1.4单词间距

word-spacing属性设置单词之间的间距 注意只适用于英文单词

取值：

默认值：normal

用长度指定间隔，可以为负值

1.5文本间距

letter-spacing属性设置字符之间的间距适用中英文本

默认值：normal

用长度指定间隔，可以为负值

1.6文本换行

word-wrap文字换行

word-wrap属性设置文本内部长单词换行或URL换行

normal默认值（浏览器保持默认处理）

break-word内部进行换行

1.6.2word-break

word-break属性设置自动换行

normal使用浏览器默认的换行规则

1.6.3break-all允许在单词内换行

keep-all只能在半角空格（就回车处）或连字符处换行

white-space不允许文字换行

nowrap文本不换行，文本会在一行上继续直到遇到<br>标签为止

1.6.4text-overflow当文本超出包含元素时剪切文字

elipsis显示省略号来代表被剪切的文本

overflow：hidden超出隐藏

2.1文字阴影

text-shadow属性向文本设置阴影

语法text-shadow：x-shadow y-shadow blur color（注意x轴正方向朝右、y轴正方向朝下）

x-shadow	必需。水平阴影的位置。允许负值。
y-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
    font-size: 50px;
}

2.2盒子阴影

box-shadow属性向框添加一个或多个阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

.box2 {
    width: 150px;
    height: 200px;
    background-color: antiquewhite;
    /* 
    内阴影
    box-shadow: 0px 0px 15px 0px #000 inset; 
    */
}

/* 小米商品鼠标悬浮阴影 */
.box2:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}