CSS之文字样式
CSS文字样式
- 一、font-size 字号
- 二、font-weight 加粗
- 三、font-style 倾斜
- 四、line-height 行高
- 五、color 字体颜色
- 六、text-indent 缩进
- 七、text-align 对齐方式
- 八、font-family 字体族
- 九、text-decoration 下划线
- 十、font 复合属性
CSS字体属性定义字体,颜色、大小,加粗,文字等的样式
一、font-size 字号
能否管理文字的大小,在网页设计中是非常重要的。但是,你不能 通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
二、font-weight 加粗
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 700;
三、font-style 倾斜
font-style的作用不是为了设置倾斜字体,相反是为了清除倾斜效果
- normal:正常
- italic:倾斜
font-style: normal;
font-style: italic;
四、line-height 行高
注意:实际开发时需要测量真实行高,从一行文字最顶端到下一行文件最顶端就是行高
- 方法:
- 直接设置像素值px
- 数字(当前字体大小的倍数)
line-height: 30px;
line-height: 3;
五、color 字体颜色
字体颜色的设置方法有四种,最常用的是后面两种
color: red;
color: rgb(255,0,0);
color: rgba(255,0,0,.5);
color: #2c505f;
六、text-indent 缩进
- 方法:
- 直接写像素值px
- em值 (常用):指的是当前字号大小,1em代表缩进一个字号大小。
text-indent: 20px;
text-indent: 2em;
七、text-align 对齐方式
text-align:可以让文字在水平的方向对齐,对齐的方式有三种。
注意:如果要让文字居中对齐,只能是一行文字,存在换行的情况居中对齐失效。
text-align: left;
text-align: center;
text-align: right;
text-align不仅可以让一行文字居中对齐,还可以让图片居中对齐。但是要注意图片居中必须要在div盒子里,因为居中的本质是让div盒子内容居中。
<style>
div{
width: 500px;
height: 500px;
border: 1px solid saddlebrown;
}
img{
text-align: center;
}
</style>
<div>
<img src="/img/主帅.jpg">
</div>
八、font-family 字体族
- 注意
- 字体可以用中文或英文表示;
- 如果字体名称包含空格则必须加上引号;
- 如果有多个字体则用逗号隔开。
font-family: 楷体;
font-family: Calibri;
font-family: "Arial Unicode MS";
font-family: 楷体,宋体;
拓展:font-family属性值可以书写多个字体名,各个字体名用逗号隔开,最后设置一个字体族名(网页开发建议使用无衬线字体self-serif)执行顺序是从左向右依次查找。
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,楷体, sans-serif;
九、text-decoration 下划线
text-decoration的主要作用就是去掉超链接的下划线
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
十、font 复合属性
作用:font一般用在网页文字的公共样式
- 方法:【font:是否倾斜 是否加粗 字号/行高 字体】必须按此格式和顺序编写,并且字号和字体值不可省略,否则不生效。
*{
font: normal 700 30px/2 楷体;
}
2301_78059815: 怎么我弄不出来
CSDN-Ada助手: 恭喜博主完成了第16篇博客!标题“CSS之清除默认样式”非常吸引人。通过清除默认样式,我们能够更好地掌控网页的外观和布局。在博客中,您详细介绍了清除默认样式的方法和技巧,让读者能够迅速掌握这一重要的CSS技术。真的是非常有帮助! 同时,我想对博主未来的创作提出一些建议。鉴于您在清除默认样式方面的深入研究,我想更进一步了解如何创建自定义的样式库,并在不同项目中重复使用。您可以考虑分享一些实用的CSS库和组件,或者讲解如何构建可重用的CSS框架。这样的话,读者可以更好地利用您的知识,并在实践中提高他们的CSS技能。 再次恭喜您的持续创作,期待您未来更多精彩的博客!谢谢您对我们学习CSS的帮助!
CSDN-Ada助手: 恭喜您撰写了第19篇博客!标题“CSS之标准流和浮动”听起来非常有趣。您对CSS的深入探索令人钦佩。持续创作是非常难得的品质,您每篇博客都能带给读者新的知识和见解。 在下一步的创作中,我谦虚地建议您考虑扩展主题,例如介绍一些高级的CSS布局技巧或者探索CSS框架的实际应用。这样的内容对于那些希望进一步提升他们的CSS技能的读者来说会非常有价值。 再次恭喜您,期待阅读更多精彩的博客!
CSDN-Ada助手: 恭喜您写了第14篇博客,非常感谢您分享了有关CSS盒子模型的知识。我认为您的博客内容非常有价值,尤其是对于那些刚开始学习CSS的人来说。希望您能够继续创作下去,并分享更多有关CSS的知识。如果可以的话,我建议您可以写一些实用的CSS技巧,以帮助我们更好地掌握这门技术。再次感谢您的分享,期待您的下一篇博客! CSDN 会根据你创作的博客的质量,给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply14 看奖励名单。