JavaWeb学习之路(26)–CSS之文本样式

谁践踏了优雅 2022-08-28 06:54 200阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 文本颜色
 *  3. 文本对齐
 *  4. 文本装饰线
 *  5. 小结

# 1. 前言 #

上一篇我们已经讲解了如何将CSS样式设置到标签上，然后也演示了CSS语言格式特点。

所以之后的学习就很简单了，我们学习下新的样式名称，取值和对应的效果，然后自己多写一些代码练习熟练，就可以了。

本篇，我们就来学习下文本相关的样式。

# 2. 文本颜色 #

可以使用`color:xxx;`来设置为本颜色，其中xxx是颜色的名称如red/green/yellow。示例如下：

<body>
        <div>
            文本颜色演示：
            <p style="color:red;">
                春苗不觉晓
            </p>
            <p style="color:green;">
                处处闻啼鸟
            </p>
            <p style="color:blue;">
                夜来风雨声
            </p>
            <p style="color:yellow;">
                花落知多少
            </p>
        </div>
    </body>

我们呢设置了4种颜色，所以效果如下：  
![在这里插入图片描述][1d4acbff328147fab1323a2f96498f28.png]

# 3. 文本对齐 #

什么叫做对齐呢，就好比我们军训的时候参加队列练习，教官会说“向左看齐”，其含义就是左对齐。

对齐的意思就是向左对齐、向右对齐。还有一种叫做居中对齐，就是不管有几个人，都在中间呆着去吧。

说的太抽象了，我们还是看代码更直观：

<div style="text-align: left;">
            <p>
                加入生活欺骗了你
            </p>
            <p>
                不要悲伤，不要心急
            </p>
            <p>
                犹豫的日子里需要寂静
            </p>
            <p>
                相信吧，那快乐的日子即将来临
            </p>
        </div>
        
        <div style="text-align: right;">
            <p>
                加入生活欺骗了你
            </p>
            <p>
                不要悲伤，不要心急
            </p>
            <p>
                犹豫的日子里需要寂静
            </p>
            <p>
                相信吧，那快乐的日子即将来临
            </p>
        </div>
        
        <div style="text-align: center;">
            <p>
                加入生活欺骗了你
            </p>
            <p>
                不要悲伤，不要心急
            </p>
            <p>
                犹豫的日子里需要寂静
            </p>
            <p>
                相信吧，那快乐的日子即将来临
            </p>
        </div>

在上面的例子中，我们分别对三个div设置了左对齐，右对齐，居中对齐，所以div中的段落就会采用相应的对齐方式，所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

# 4. 文本装饰线 #

提到文本装饰线，这个名字就有点高端了，但是下划线大家想必很清楚吧。

CSS的文本装饰线不仅支持下划线，还支持上划线，还有穿越线。上划线是在文本上方的横线，而穿越线是穿过文字中间的直线。

我们来看下代码：

<div>
            
            <p style="text-decoration:none;">
                加入生活欺骗了你
            </p>
    
            
            <p style="text-decoration:underline;">
                相信吧，那快乐的日子即将来临
            </p>
    
            
            <p style="text-decoration:overline;">
                不要悲伤，不要心急
            </p>
    
            
            <p style="text-decoration:line-through;">
                犹豫的日子里需要寂静
            </p>
        </div>

对应效果如下。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_16_color_FFFFFF_t_70_g_se_x_16]  
上面的效果中国，其实也就下划线比较常用而已，应用场景就是那些网站的超级链接，很多时候超级链接喜欢用下划线标志出来。.

# 5. 小结 #

到这里大家可能已经发现了，CSS其实语法都是一样的，只是需要记住那些样式的写法，包括名称和值两部分的写法。

其实也不用大脑记住，我们记在电子文档里面，知道有这么一个样式，当我们需要写的是能够想起来就OK。

其实写的多了，自然就记住了。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[1d4acbff328147fab1323a2f96498f28.png]: /images/20220828/ecb736c6b78d4bab90242b3180918e8b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4472afa22fcb4c61a028a757462bba09.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/57cb76a1e80c41a1b883eb40d42d708a.png