【网页制作】CSS文本和字体属性讲解【附讲解视频】

一枫阳光

已于 2022-03-31 00:52:05 修改

阅读量1k

点赞数 1

分类专栏：网页制作学习 CSS 文章标签：前端前端框架 css html

于 2022-03-26 00:02:09 首次发布

本文链接：https://blog.csdn.net/m0_61299785/article/details/123747574

版权

网页制作学习同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

1.CSS文本和字体属性的作用：给文本和字体设置样式（具体看第二部分）

注意：在html中我们可以省略单位，但CSS中不可以省略单位。

简单的说大多数情况在html的body标签中我们可以省略单位，但在CSS的style标签中我们不能省略单位。

2 CSS文本和字体属性

（1）一些常用的CSS文本属性

属性名称	作用	单位/值
color	设置字体的颜色	#f00/red/rgb(200,125,100)
text-indent	设置首行缩进，允许负值	px/em
text-decoration	设置文本修饰线	underline/overline/line-through
text-transform	单词字体大小写	单词字体大小写
line-height	设置行高	固定值或百分比
text-align	设置在当前文本的对齐方式	left/right/center
word-spacing	设置单词之间的间距	px
letter-spacing	设置字符之间的间距	px

注意：此处大家要注意单词间距和字符间距，不要搞错了。下面举例说明一下：

abcd 四个字符之间的间距叫做字符间距

a happy day 3个单词之间的间距叫做单词间距

（2）一些常用的CSS字体属性

属性名称	作用	单位/值
font-size	设置文本的大小	10px，20px
font-family	设置字体的类别	宋体，楷体
font-style	设置文本为斜体	normal（正常）,italic(斜体）
font-weight	设置字体的粗细	normal（正常），bold（加粗)
font	包含上面所有作用。注意属性设置有顺序要求： 1斜体 2加粗 3大小 4类别每一个值之间需要空格隔开	举例：font：italic bold 10px “楷体” 设置为：斜体加粗 10px大小楷体

注意：
（2.1）用font直接设置属性值时要注意属性的顺序（1斜体 2加粗 3大小 4类别），不能弄错

（2.2）关于font-family字体类别的设置，如果用户电脑有对应的字体文件，则设置成功；否则默认显示为宋体，用户可以通过路径导入没有的字体，这里就不讲解怎么导入了，大家知道这一点就好。

（2.3）font-family: "楷体","黑体","微软雅黑";

如果用户电脑有楷体则为楷体，否则判断用户电脑是否有黑体，有则为黑体，没有则判断用户电脑是否有微软雅黑，有责则为微软雅黑，没有则为默认的宋体，按照顺序判断

3 代码及介绍（本章会用到前面选择器的内容，不懂的小伙伴可以去学习回顾一下）

总代码：

（1） CSS文本属性代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>文本字体属性</title>
   <style type="text/css">
       .a{

   /*设置《火影忍者》为红色*/
           /*color:red; */ /* 方法1设置颜色为红色 */
           /* color:#f00; */ /* 方法2设置颜色为红色 */
           color:rgb(255,0,0); /* 方法3设置颜色为红色 */
           /* #rgb分别代表红绿蓝，通过比列混合出不同的颜色 */
           /* 十进制表示的颜色在CSS中没有浏览器兼容性问题 */
           /* 通常rgb三个值取值在0-255之间，大了也可以，只不过不会变了 */
       }

       #h{

/*设置大标题火影忍者的样式*/
           text-align:center; /* center居中，left靠左，right靠右 */
           color:rgb(200,100,125); /* 设置文本颜色 */
           font:normal bold 100px "楷体"; /* 设置文本为非斜体加粗 100px 楷体 */

       }

       #b{

  /*设置二级标题岸本齐史的样式*/
           text-align:center;   /*设置文本居中*/
           color:rgb(220,50,105);
           text-decoration: underline;
           /* underline下划线/overline上/line-through中 */
       }
       #e{

  /*设置段落为首行缩进值*/
           /* text-indent: 35px; */   /*设置首行缩进35px*/
           text-indent: 2em; /*设置首行缩进2个汉字*/ /* 1个em表示一个汉字的位置 */
           /* text-indent: -2em; /*设置首行缩进负的2个单位*/
                   } */
           }
       #bc{

/*设置字母abcd的的样式*/
           text-align:center;
           text-transform: uppercase;
           /* capitalize首字母大写，uppercase小写-大写，lowercase大写-小写 */
           letter-spacing: 5px; /*设置字符间距为5px*/
       }
       #g{

  /*设置a happy day的的样式*/
           text-align:center;
           text-transform: uppercase;
           /* capitalize首字母大写，uppercase小写-大写，lowercase大写-小写 */
           word-spacing: 20px; /*设置单词间距为20px*/
           letter-spacing: 5px; /*设置字符间距为5px*/
       }
       #m1{

  /*设置div标签的第二季《火影忍者疾风传》的样式*/

           height: 100px; /*设置高度*/
           border:1px solid #00f; /*设置边框的大小1px，实线，蓝色*/
           line-height: 100px;  /*设置第二季《火影忍者疾风传》在边框的垂直距离*/
           /* 当行高的值（ line-height）和高度（height）的值一样就可以实现文本垂直居中 */
           text-align:center;
       }s
   </style>
</head>
<body>
   <h1 id="h">火影忍者</h1>
   <h2 id="b">岸本齐史</h2>
   <h3 id="bc">abcd</h3>
   <p id="e">电视动画<span class="a">《火影忍者》</span>改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
   <p id="g">a happy day </p>
   <div id="m1">第二季《火影忍者疾风传》</span></div>
</body>
</html>

代码效果：

（2）CSS字体属性代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>字体属性</title>
   <style type="text/css">
       #h{
           font-size: 100px; /* 设置字体的大小100px */
           font-family: "楷体"; /* 设置字体为楷体 */
           /* 默认为宋体 */
           font-weight: normal; 设/* 置字体不加粗 */
           font-style: italic; /* 设置为斜体 */
           /* font:italic bold 100px "微软雅黑"; */
           /* 用最后一行代码时记得注释掉前面所有四部分 */
       }
       .a1{
           font-style: italic;
       }
   </style>
</head>
<body>
   <h1 id="h">火影忍者</h1>
   <p>电视动画《火影忍者》改编自日本漫画家<span class="a1">岸本齐史</span>的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
</body>
</html>