Css_文本$字体

最新推荐文章于 2023-06-02 16:39:44 发布

Rapper_cl

最新推荐文章于 2023-06-02 16:39:44 发布

阅读量148

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/m0_37510446/article/details/89945461

版权

Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先来看看字体的颜色：
color属性：

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:green;
background-color:yellow;
width:50%;
heigth:100px;
padding:20px 20px;
}
</style>
</head>
<body>
<h1  id="cc">给字体设置颜色</h1>
</body>
</html>

text-align:设置文本的对齐方式，主要讲justify这个属性，该属性的作用是使当前的文本宽度前后保持一致，就像报纸的排版一样

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:green;
background-color:yellow;
width:50%;
heigth:100px;
padding:20px 20px;
text-align:justify;
}
#c1{
color:yellow;
background-color:green;
width:50%;
height:200px;
text-align:left;
}
</style>
</head>
<body>
<h1  id="cc">给字体设置justify属性使其保持前后宽度一致</h1>
<h1  id="c1">设置字体向左对齐</h1>
</body>
</html>

text-decoration:用来设置或删除文本的一种修饰，说白了就是一个下划线来修饰文本

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
color:green;
background-color:yellow;
width:50%;
heigth:100px;
padding:20px 20px;
text-align:justify;
text-decoration:overline;
}
#c1{
text-decoration:line-through;
}
#c2{
text-decoration:underline;
}
</style>
</head>
<body>
<h1  id="cc">使用overline来修饰,overline越过线，意思就是越过字体，在字体上方修饰</h1>
<h1  id="c1">使用line-through来修饰，穿过字体修饰</h1>
<h1  id="c2">使用underline来修饰，在字体下方进行修饰</h1>
</body>
</html>

transform:文本转换,大小写之间的转换

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
text-transform:uppercase;
text-decoration:underline;
}
#c1{
text-transform:lowercase;
text-decoration:underline;
}
#c2{
text-transform:capitalize;
text-decoration:underline;
}
</style>
</head>
<body>
<h1  id="cc">uppercase</h1>
<h1  id="c1">lowercase</h1>
<h1  id="c2">capitalize</h1>
</body>
</html>

indent:文本缩进单位px

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#cc{
text-transform:uppercase;
text-decoration:underline;
text-indent:50px;
}
#c1{
text-transform:lowercase;
text-decoration:underline;
text-indent:40px;
}
#c2{
text-transform:capitalize;
text-decoration:underline;
text-indent:30px;
}
</style>
</head>
<body>
<h1  id="cc">uppercase</h1>
<h1  id="c1">lowercase</h1>
<h1  id="c2">capitalize</h1>
</body>
</html>

Rapper_cl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css_文本$字体

首先来看看字体的颜色：color属性：<!DOCTYPE html><html><head><meta charset="UTF-8"/><style>#cc{color:green;background-color:yellow;width:50%;heigth:100px;padding:20px 20px;...
复制链接

扫一扫