CSS核心（三）常用的修改文字样式的CSS属性精华汇总

人亦已歌 · 发表于 2023-1-31 16:27:10

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用的修改文字样式的CSS属性</title>
</head>
<body>
<div>
        这是div盒子
</div>
<i>
        i文字倾斜标签
</i>
<h1>H1标题</h1>
<hr>
<p class="sop">
        123456abcdef
</p>
<a href="http://www.baidu.com">百度</a>
<!--<p>i love You</p>-->
<p class="longp">
        常用的修改文字样式的CSS属性
</p>
<style>
        div{
                /* 设置字体大小font-size */
                font-size:50px;
                /* 设置字体的粗细font-weight，将文字加粗设置为bold */        
                font-weight:bold;
                /* 设置字体风格font-style,取值normal通常是将倾斜字体设置为不倾斜，italic是将正常字体设置倾斜的 */
                font-style:normal;
                /* 设置字体font-family，字体可以写多个 */
                font-family:"华文行楷","微软雅黑","宋体";
        }
        i{
                font-style:normal;        
        }
        h1{
                font-weight:normal;        
                color: aquamarine;
        }
        .sop{
                font-family:"webdings";
                font-size:20px;        
        }
        .longp{
                /* 文本转换，text-transform
                取值：
                uppercase将所有字母转换成大写
                capitalize所有单词的首字母大写
                lowercase将所有字母转换为小写
                 */
                
                text-transform:lowercase;
                
                /* 文本对齐方式text-align，
                取值：
                left/center/right
                 */
                text-align:left;        
                

                /* 首行缩进
                text-indent:2em;
                 */
                /*text-indent:32px;*/
                text-indent:2em;                
        }
        a{
                /* 文本修饰text-decoration
                取值：
                none 取消文本的修饰
                line-through贯穿线（删除线）
                上划线overline
                下划线underline
                 */
                text-decoration:underline;
                /* 文字颜色 */
                color:#000;                
        }
</style>
</body>
</html>

总结：

属性名	解释
font-size: 50px;	字体大小为50像素
font-weight: bold; font-weight: normal;	字体加粗取消字体加粗
font-style: italic; font-style: normal;	字体倾斜取消字体倾斜
font-family: "华文行楷","微软雅黑","宋体";	优先使用华文行楷，如果没有则用微软雅黑，如果没有则用宋体
color: aquamarine; color: #000;	设置字体颜色为CSS内置颜色aquamarine 设置字体颜色为16进制颜色 #000
text-transform:lowercase; text-transform:uppercase; text-transform:capitalize;	将所有字母转换为小写将所有字母转换成大写所有单词的首字母大写
text-align:left; text-align:right; text-align:center;	左对齐右对齐居中对齐
text-indent:2em; text-indent:32px;	首行缩进两个字首行缩进32像素
text-decoration:underline; text-decoration:overline; text-decoration:line-through; text-decoration:none;	下划线上划线删除线取消文本修饰
text-shadow:-5px -5px 2px #999;	设置文字阴影，参数一为阴影的水平偏移，参数二为垂直偏移，参数三为模糊距离，参数四为阴影颜色

请注意：课程中讲到的属性务必记住，因为这些都是最常用的。

文字阴影案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影</title>
</head>
<style>
        body{
                background:#999;        
        }
        .box{
                font-size:100px;
                font-weight:bold;
                color:#999;
                /*参数可以设置多组，表示多个阴影*/
                text-shadow:-10px -10px 2px #000,1px 1px 2px #fff;
                        
        }
</style>

<body>
<div class="box">
        慈众科技
</div>
</body>
</html>

显示结果如下：

Loner · 发表于 2023-2-15 20:50:12

应该好好学习的啊

白云一朵 · 发表于 2023-2-22 10:02:37

我是新手我看不懂你的那些符号可是我在看你写的那些体验上很手感动很好我这个人不喜欢看别人写的东西我是经过一个网上的好朋友介绍的你写的很好可是我要是能看懂你写的那写符号就好了那就跟能体会你的内心感觉我想和你做个朋友你想吗??想的话就在我发的帖子上留下你的电子邮箱.

zhengsq · 发表于 2023-2-26 20:45:52

^学习中~~~~~~~~~~~~~~~~~~~~

沙和尚 · 发表于 2023-3-3 04:07:10

fgafe

flord · 发表于 2023-3-9 15:13:06

^中国的程序员要努力呀！楼主的话很是受用中国的程序员要努力呀！我想应该更多的人把他们的经写出来，这样好让咋们中国人少走一些弯路希望我们共同奋斗，为了自己的理想，拼了！呵呵

1234_rre · 发表于 2023-3-15 15:58:15

感动感动

joan789987 · 发表于 2023-3-19 17:42:20

真得有收获

KilMic · 发表于 2023-3-25 06:32:44

不错

chonghaohuang · 发表于 2023-3-29 04:12:04

从大体上说，我也可以算的上一个初级程序员吧，学的语言很多，不过都不是很精，软件工程学的一点都不好，大部分原因是在学校和老师，谁让我们在这样的垃圾学校拉，不过，我在c和vb上有一点基础，可以这样说，我在学校还可以吧，不过看了你的帖子，我感到我真的不行。以后希望大家在c和vb和单片机的c51方面多说说，谢谢！