从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）

Coisini_甜柚か

已于 2022-04-19 17:14:33 修改

阅读量773

点赞数

分类专栏：从零开始学前端文章标签： css 前端学习

于 2022-01-14 12:21:57 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/122466637

版权

从零开始学前端专栏收录该内容

48 篇文章 11 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：CSS引入 — 今天你学习了吗？（CSS：Day07）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

前言

在这里问大家一个问题，将代码在当前视图内进行展示的快捷键是什么呢？我最开始感觉很基础，但是用着用着，感觉知识就溜走了，看来还是需要根据艾宾浩斯记忆遗忘曲线一段时间内加深学习，大家也记得复习哈，要相信脑力是无限的，永远装不满，所以当前的基础知识，我们能记住多少就尽量记多少，后期补基础很麻烦的！！！

第八节课：主要讲了CSS的字体属性和文本属性

一、CSS字体属性

CSS Font（字体）属性用于定义字体系列，大小、粗细，和文字样式（如斜体）。

CSS使用font-family属性定义文本的字体系列。

p {
    font-family: "宋体";
    /* 或者 */
    /* font-family: 'Arial', "微软雅黑"; */
}

在这里插入图片描述

p {
    /* font-family: "宋体"; */
    /* 或者 */
    font-family: 'Arial', "微软雅黑";
}

在这里插入图片描述
注意^*：

有多个字体的情况各种字体之间必须使用英文状态下的逗号隔开。
一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
最常见的几个字体：body {font-family:'Microsoft YaHei',tahoma,arial 'Hiragino Sans GB";}

二、CSS字体大小

CSS使用font-size属性定义字体大小。

px(像素)大小是我们网页的最常用的单位。
谷歌浏览器默认的文字大小为16px。
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
可以给body指定整个页面文字的大小（标题标签比较特殊需要单独定制字体大小）

例子：
html文件：

    <p>
        你好呀，2022。
        我就把这孩子交给你了。
    </p>
    <span>   
        你好呀，2022。
        我就把这孩子交给你了。
    </span>
    <p class="two one">
        你好呀，2022。
        我就把这孩子交给你了。
    </p>
    <p class="two">
        你好呀，2022。
        我就把这孩子交给你了。
    </p>
    <span id="three">
        你好呀，2022。
        我就把这孩子交给你了。
    </span>

CSS文件：

p {
    font-family: "宋体";
    font-size: 24px;
}
span{
    font-size: 20px;
}
.two{
    font-size: 15px;
}
.one{
    font-size: 18px;
}
/* 
    注意这里必须two在one之前，不然样式不管用！
    多类选择器跟类名的优先级有关
    类名越往前，优先级越高
    */
#three{
    font-size: 12px;
}

效果：
在这里插入图片描述

三、CSS字体粗细

CSS使用font-weight属性设置文本字体的粗细。
属性值：normal（正常字体400px）、bold、bolder、lighter、number
实际开发中，我们提倡使用数字表示加粗或者变细，在写数字的时候不用加单位。

属性值	描述
normal	默认值（不加粗）
bold/dolder	定义加粗字
100~900	400等同于normal，而700等同于bold（注意这个数字后面不跟单位)

例子：
html文件：

    <h1>
        老骥伏枥，志在千里。
    </h1>
    <h2>
        烈士暮年，壮心不已。
    </h2>  
    <h3>
        我是正常粗细字体。
    </h3>
    <h4>
        红豆生南国，春来发几枝。
    </h4>  
    <strong>
        愿君多采撷，此物最相思。
    </strong>

CSS文件：

h1{
    font-weight: 200;
}
h2{
    font-weight: 900;
}
h3{
    /* 默认normal是400 */
    font-weight: normal;
}
h4{
    font-weight: 100;
}
strong{
    color:pink;
    font-weight: 500
}

效果：
在这里插入图片描述

四、CSS字体倾斜

CSS使用font-style属性设置文本的风格。font-style:normal;

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	定义倾斜字体

注意^*:平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体。
例子：
html文件：

    <p>给你们表演个魔术吧！</p>
    看,这是我原来的样子：<br>
    <p class="em1">我是歪脖星人</p>
    然后我张呀张，<br>
    <p class="em2">张直了！</p>

CSS文件：

.em1{
    font-style: italic;
}
.em2{
    font-style: normal;
}

效果：
在这里插入图片描述

五、字体的复合属性

字体属性可以把以上所有的文字样式综合来写，这样可以更节约代码：

font：font-style font-weight font-size/font-height font-family;

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。
例子：
html文件：

    <p class="duibi">这是我素颜的样子</p>
    <p class="pretty">这是我化妆后的样子</p>

CSS文件：

.duibi{
    font-style: italic;
}
.pretty{
    color: pink;
    font: normal 500 24px "幼圆";
}

效果：
在这里插入图片描述
CSS字体总结：

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要跟单位
font-family（常用）	字体	实际工作中按照团队约定写字体
font-weight	字体粗细	记住加粗是700或者blod，不加粗是normal或者400记住数字不要跟单位
font-style	字体样式	记住倾斜是italic，不倾斜是normal，工作中我们常用的是normal
font	字体连写	1.字体连写室友顺序的且不能随意换位置 2.其中字号和字体必须同时出现

六、文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

CSS表示文本颜色使用color属性：

表示	属性值
英文单词颜色值	red，green，blue…
十六进制的颜色值	#FF0000,#FFF,#000…
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

例子：
html文件：

    <p>跟你说个秘密：我可是会变色的！</p>
    <p class="p1">我难过得对话框都黑了</p>
    <p class="p2">我可爱得文字都粉了</p>
    <p class="p3">我饿得文字都蓝了</p>
    <p class="p4">我兴奋得文字都红了</p>

CSS文件：

p{
    color: skyblue;
}
.p1{
    color: #000;
}
.p2{
    color: rgb(255, 168, 183);
}
.p3{
    color:rgb(143, 171, 255);
}
.p4{
    color: red;
}

效果：
在这里插入图片描述

七、CSS对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

属性	说明
left	左对齐
right	右对齐
center	居中

例子：
html文件：同六
CSS文件：

p{
    color: skyblue;
    text-align: right;
}
.p1{
    color: #000;
    text-align: center;
}
.p2{
    color: rgb(255, 168, 183);
    text-align: left;
}
.p3{
    color:rgb(143, 171, 255);
    text-align: justify;
}
.p4{
    color: red;
    text-align: end;
}

效果：
在这里插入图片描述

八、CSS装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性	说明
none	默认，没有装饰线（常用）
underline	下划线
overline	上划线（不常用）
line-through	删除线（不常用）

例子：
html文件：

 <p class="none">默认</p>
    <p class="yes">下划线</p>
    <p class="no">上划线</p>
    <p id="del">删除线</p>

CSS文件：

.none{
    text-decoration: none;
}
.yes{
    text-decoration: underline;
}
.no{
    text-decoration: overline;
}
#del{
    text-decoration: line-through;
}

效果：
在这里插入图片描述

九、CSS文本缩进

text-indent属性用来指定文本的第一行的缩进通常是将段落的首行缩进。
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
解释：
*px表示缩进 *px；
*em表示缩进 *个字体长度（字体长度即font-size）；
例子：
html文件：

    <p>本故事纯属虚构！</p>
    <p id="miss">
        我想干饭，我好饿呀，我不想干活啦，我想当咸鱼~隔壁帅哥哥好好看呐，我好想要一个甜甜的恋爱呀~万恶的资本家，可是我也想要钱包鼓鼓的，生活富富的，吃的香香的，睡得饱饱的~呜呜呜，这也太难了。
    </p>
    <p id="idea">
        我想干饭，我好饿呀，我不想干活啦，我想当咸鱼~隔壁帅哥哥好好看呐，我好想要一个甜甜的恋爱呀~万恶的资本家，可是我也想要钱包鼓鼓的，生活富富的，吃的香香的，睡得饱饱的~呜呜呜，这也太难了。
    </p>

CSS文件：

#miss{
    color: palevioletred;
    font-size: 15px;
    text-indent: 20px;
}
#idea{
    color: skyblue;
    font-size: 22px;
    text-indent: 2em;
}

效果：
在这里插入图片描述

十、CSS行高

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
行间距的组成：上间距、文字内容、下间距
在这里插入图片描述

CSS没有提供文字垂直居中的代码，所以让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。
例子：
html文件：

    <p>默认</p>
    <br>
    <p class="none">行高等于容器高度</p>

CSS文件：

.none{
    line-height: 0%;
}

在这里插入图片描述

十一、文本选择属性

user-select这个属性是控制用户能不能选择文字的

none----------（user-select:none）则用户不能选择文字，防止选取文本。
text------------ 文本可被用户选取。
all-------------- 单击选取文本，而不是双击。
auto----------- 默认。如果浏览器允许，则可以选择文本。

例子：
html文件：

	  <p class="p1">用户不能选择文字</p>
    <p class="p2">文本可被用户选取</p>
    <p class="p3">单击选取文本</p>
    <p class="p4">默认</p>

CSS文件：

.p1{
    user-select: none;
}
.p2{
    user-select: text;
}
.p3{
    user-select: all;
}
.p4{
    user-select: auto;
}

效果：
在这里插入图片描述
动态演示：
https://www.bilibili.com/video/BV1C3411a7Gj/

十二、文本溢出

有时候我们在写字或者是放图片放进一个盒子的时候,可能要放置的内容比我们的盒子大,这个时候文本或者图片就会溢出,我们就可以采取文本溢出解决这个问题,使用overflow来解决。

属性规定当内容溢出元素框时发生的事情。

属性值	说明
visible	默认值。内容不会被修改，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	规定应该从父元素集成overflow属性的值。

例子：
HTML文件：

    <div>溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出</div>

CSS文件：

div{
    background-color: palevioletred;
    height: 200px;
    width: 200px;
    overflow: visible;
    /* overflow: hidden;
    overflow: scroll;
    overflow: auto; */
}

效果图：
overflow:visible:
在这里插入图片描述
overflow: hidden:

overflow: scroll;
永远有滚动条
overflow: auto;:
超出时溢出有滚动条，未超出则没有滚动条

十三、letter-spacing控制文本字与字的间距

属性值为px单位的数值，控制文本字与字的间距。

例子：
html文件：

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae, iste assumenda et ratione non delectus quo nostrum omnis voluptatem, molestiae repudiandae, id ullam excepturi beatae in quia qui expedita nihil!</div>

css文件：

div{
    background-color: skyblue;
    height: 300px;
    width: 300px;
    letter-spacing: 5px;
}

效果图：
默认：
在这里插入图片描述
5px间距：

表格处理单元格与单元格之间的间隙问题
我们不会用之前的标签里面的那个属性去解决，我们直接采用css去解决。
使用border-collapse:collapse;去解决

例子：
html文件：

<table border="1px">
    <tr>
        <th>11</th>
        <th>12</th>
        <th>13</th>
    </tr>
    <tr>
        <th>21</th>
        <th>22</th>
        <th>23</th>
    </tr>
</table>

css文件：

table{
    border-collapse: collapse;
}

效果图：
默认：
在这里插入图片描述

加入border-collapse: collapse;后：
在这里插入图片描述

十四、文本属性总结

属性	表示	注意点
color	文本颜色	三种颜色值都会使用到，十六进制开发最常用
text-align	文本对齐	可以设置文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离`text-indent:2em;`
text-decoration	文本修饰	记住添加下划线underline 取消下划线none
ling-height	行高	控制行与行之间的距离
user-select	限制用户是否可以选中	不常用了解即可
letter-spacing	控制字与字的间隙	不常用，规定应该从父元素继承overflow属性的值
border-collapse	collapse	去除单元格与单元格之间的间隙