从零开始学前端之 CSS 基础

CSS 文本属性

属性描述
color文字颜色
direction文本方向
line-height行高
letter-spacing字符间距
text-align文本对齐方式
text-decoration文本装饰
text-indent块元素首行缩进
text-shadow文本阴影
text-transform字母大小写
unicode-bidi文本方向
white-space元素中的空白处理方式
word-spacing文字间距

文本颜色:color

概念
属性值
代码
效果
  • color_name 颜色名称 redblue
  • hex_number 十六进制值 #ffffff#cccccc
  • rgb_number rgb 代码 rgb(255,0,0)
  • inherit 从父元素继承颜色

首行缩进:text-indent

概念

text-indent 属性规定文本块中首行文本的缩进。

注释:可使用负值。如果使用负值,首行会被缩进到左边。

<u>注意: 在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。</u> 不知道是什么意思,待研究。

##### 属性值

描述
length定义固定的长度。默认值:0
%定义基于父元素宽度的百分比的缩进。
intherit从父元素继承 text-indent 属性的值。

##### 代码

<style>
 p {
 text-indent: 2em;
 background: yellow;
}
</style>


<p>首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!首行缩进测试!</p>
<p style="text-indent: -1em;">text-indent 使用负值</p>

##### 效果
![image-20191106145043269]()

水平对齐:text-align

概念

text-align 属性规定元素中的文本的水平对齐方式 。

属性值
描述
left把文本排列到左边。默认值:由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。
inherit从父元素继承 text-align 属性的值。
代码
<style>
        h1 {
            text-align: left;
        }

        h2 {
            text-align: right;
        }

        h3 {
            text-align: center;
        }

        /*div {*/
        /*    text-align: justify;*/
        /*    !*text-align: justify-all;*!*/
        /*}*/

</style>

<h1>文本左对齐</h1>
<h2>文本右对齐</h2>
<h3>文本居中对齐</h3>
<!--<div>-->
<!--    文本两端对齐 文本两端对齐-->
<!--</div>-->
效果

![image-20191108091933359]()

文字间距:word-spacing

概念
属性值
代码
效果

字符间距:letter-spacing

概念
属性值
代码
效果

字母转换:text-transform

概念
属性值
代码
效果

文字装饰:text-decoration

概念
属性值
代码
效果

文本空白:white-space

概念
属性值
代码
效果

文本方向:direction

概念
属性值
代码
效果