css3教程（关于字体以及文本）

小旭的前端笔记

已于 2022-12-11 11:48:26 修改

阅读量451

点赞数 1

分类专栏： html5 css3 js完整教程文章标签： css3 css 前端

于 2022-12-11 11:41:00 首次发布

本文链接：https://blog.csdn.net/ljxvvds/article/details/128272908

版权

html5 css3 js完整教程专栏收录该内容

12 篇文章 3 订阅

订阅专栏

上一节课我们已经初步了解了css3这个东西了，那再我们的编辑器之中，我们该如何编写一个css3的代码呢？今编来带你敲代码啦！首先，看下面这个东西：

*{
    color:red;
}

上节课我们还学习了命名，大范围用id，小范围建议用class。那上图的*是什么呢？*代表全部代码，也就是body标签里面的内容，全部听他的话。好了，该说的都说了，现在才步入主题。

今天小编的主要搬砖内容是带领大家了解字体。话不多说，咱们开始吧！

<style type="text/css">
        p {
            font-family: 'Courier New' '微软雅黑';
        }
        
        h1 {
            font-size: 18px;
        }
        
        h2 {
            font-weight: bold;
        }
        
        h3 {
            font-style: italic;
        }
    </style>
</head>
 
<body>
    <p>测试</p>
    <h1>字体大小</h1>
    <h2>字体粗细样式</h2>
    <h3>字体样式</h3>
</body>

小编已经主备好了，看上图，发现每一个字体的属性前面都有一个font，这是字体的属性，要牢牢记住哦！

一.字体属性

1、字体系列

font-family：定义文本字体，定义多个字体用逗号隔开，设置中英文字体时，注意先英后中。当然，您如果使用vscode编辑器的话会给你默认为“ 微软雅黑 ”，如果更改为其他字体，在“”中输入其他字体即可。在编程当中，除命名以外，“”和‘’是通用哒。

2、字体大小

font-size，控制字体大小时，我们通常使用px（像素），一般在谷歌浏览器当中，会默认字体大小为十六px（小技巧：做一名好的程序员，有一个习惯，像素通常为双数）。每个浏览器之中有不同的风格，所以我们尽量做到统一。

3、字体粗细

font-weight：属性值有normal、bold、bolder、lighter、数字（100-900）。如果对这些有兴趣，自己上网上查，小编认为这些不大重要。如果想学习，请看下图：

设置字体粗细程度
取值:
	  bold    加粗
	  bolder  比加粗还要粗
	  lighter 细线， 默认就是细线
	  100-900之间整百的数字
	  400 等同于 normal
	  700 等同于 bold
快捷键：
	  fw font-weight:;
	  fwb font-weight: bold;
	  fwbr  font-weight: bolder;

4.字体倾斜

用于打开和关闭斜体文本
取值：
 	  normal ： 正常的， 默认就是正常的
 	  italic :  倾斜的
快捷键：
 	  fs font-style: italic;
 	  fsn font-style: normal;

二.文本属性

1.文本修饰属性

格式:text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

2.文本水平对齐的属性

格式: text-align: right;
取值:
left 左
right 右
center 中

3.文本缩进的属性

格式: text-indent: 2em;
取值:
2em, 其中是em单位, 一个em代表缩进一个文字的宽度

4.设置或者取消字体改变

用于使文本显示为全大写或全小写，text-transform 允许字体改变，文本变形

格式: text-transform: uppercase

取值：

none 防止任何改变

uppercase 将文本转换为大写

lowercase 将文本转换为小写

capitalize 将所有单词第一个字母转换为大写

full-width 转换为类似于一个等宽字体

最基本的文本样式就到此结束了，如果我的文章帮助到了您，点个赞，顺手来我的主页看看吧！

小旭的前端笔记的博客_CSDN博客-html5 css3 js完整教程领域博主