【前端寻宝之路】学习和总结CSS的字体属性设置
【前端寻宝之路】学习和总结CSS的字体属性设置
用户10920432
发布于 2024-03-14 09:15:15
发布于 2024-03-14 09:15:15
字体设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-family: '宋体';
font-size: 80px;
}
</style>
</head>
<body>
<div>这是宋体</div>
</body>
</html>
字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-family: '宋体';
font-size: 80px;
}
</style>
</head>
<body>
<div>这是宋体</div>
</body>
</html>
字体颜色
- 1.直接写颜色的英文单词
color : red ; | |||||||||
|---|---|---|---|---|---|---|---|---|---|
- 2.通过十六进制表示
color : #ff0000 ; | |||||||||
|---|---|---|---|---|---|---|---|---|---|
- 3.通过rgb表示
color : rgb(225,0,0) ; | |||||||||
|---|---|---|---|---|---|---|---|---|---|
其中,第二种和第三种表示的都是三原色:红,绿,蓝 数值越大,表示该颜色的分量越浓. 225,225,225就表示白色 0,0,0就表示黑色 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-style: oblique;
color:#f00;
}
p {
font-style:italic;
color: rgb(0, 0, 225);
}
</style>
</head>
<body>
<div>这是第一段话</div>
<p>这是第二段话</p>
</body>
</html>
字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-weight: bolder;
}
p {
font-weight: lighter;
}
</style>
</head>
<body>
<div>这是第一段话</div>
<p>这是第二段话</p>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-style: italic;
}
p {
font-style:oblique;
}
</style>
</head>
<body>
<div>这是第一段话</div>
<p>这是第二段话</p>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
