CSS学习篇（二）

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 136 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #html

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS的基本应用，包括文字颜色设置、对齐方式（居中、右对齐、两端对齐）、字体类型、大小及大小写转换，以及文本修饰如下划线、删除线等。强调了清晰编码的重要性。

小序

已经半年没有更新了，转眼间2023已然到了8月底
我曾说过2023 去做一些想做的喜欢的事
敬自己敬青春
特别应景此时网易云的随机推荐歌是致你·2023
好，我们言归正传
接着上面的CSS（一）继续谈

文本格式

简单概括来说，文本的CSS样式可以实现字体、颜色、格式等一些样式的选择，以实现文本的美观化。
这里我仅仅只写一些我们平常用的较多的文本样式，如有其他需求，可在评论区留言或私信笔者，会加更。

文字颜色

简单的文字颜色可直接在标签内进行编辑选择
例如下面的文字“这里是CSS学习篇（二”的颜色即被设置为红色

<p style="color:red">这里是CSS学习篇（二）</p>

但是，这样的做法通常不提倡，因为代码相对较为混乱，不具备条理性
可在style的样式中注明属性名，这样可方便不少，代码也更明晰

<style>
body {color:blue;}
h1 {color:red;}
p.fy {color:purple;}
</style>
<body>
<h1>标题</h1>   //颜色为红色
<p>蓝色的简单段落</p>
<p class="fy">类是fy  颜色为紫色</p>
</body>

下面的代码块都会采用这样的方法。

对齐方式

我们用的最多的就是居中对齐了，下面简单谈几种对齐方式

<style>
h1 {text-align:center;}
p.date {text-align:right;} // right是右对齐 left为左对齐
p.ct{text-align:justify;}
</style>
<body>
<h1>对齐方式</h1>
<p class="date">2023.8.31</p>
<p class="ct">下面说一说justify的应用</p>
</body>

justify
其目的是达到两端对齐的效果
需要注意的是，仅有一行是看不出justify的效果的，且文本的最后一行会被忽略
简单的方法可以将其加一行，只要不是最后一行就解决啦

文本变换

下面玩一点好玩的字体变换样式

字体类型、大小…

<style>
p.fy{font-family:"Times New Roman",Times,serif;font-size:20px;} 
</style>

<body>
<h1>CSS font-family</h1>
<p class="fy">字体是 Times New Roman 大小为 20px</p>
</body>

之所以在上面的字体类型后面写三种字体，是一种备选机制，如果第一种不被支持，将自动尝试下一种字体。
除了设置像素外，还可通过设置em单位来实现

<style>
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>

这里做一个小小的总结：
font-family 文本字体
font-size 文本大小
font-style 文本样式
font-weight 字体粗细
font-variant 小型大写字体或者正常字体显示

多样字体

大小写多样玩法

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

<body>
<p class="uppercase">To do the list.</p>
<p class="lowercase">To do the list.</p>
<p class="capitalize">To do the list.</p>
</body>

结果如下图

多样修饰字

<style>
body{background-color:#6495ed;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>

<body>
<h1>To do the list.</h1>
<h2>To do the list.</h2>
<h3>To do the list.</h3>
</body>