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

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

文章目录

• 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day08）
• • 前言
  • 第八节课：主要讲了CSS的字体属性和文本属性
  • • 一、CSS字体属性
    • 二、CSS字体大小
    • 三、CSS字体粗细
    • 四、CSS字体倾斜
    • 五、字体的复合属性
    • 六、文本属性
    • 七、CSS对齐文本
    • 八、CSS装饰文本
    • 九、CSS文本缩进
    • 十、CSS行高
    • 十一、文本选择属性
    • 十二、文本溢出
    • 十三、letter-spacing控制文本字与字的间距
    • 十四、文本属性总结

前言

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

第八节课：主要讲了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
实际开发中，我们提倡使用数字表示加粗或者变细，在写数字的时候不用加单位。

例子：
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;

注意^*:平时我们很少给文字加斜体，反而要给斜体标签( 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字体总结：

六、文本属性

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

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

例子：
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属性用于设置元素内文本内容的水平对齐方式。

例子：
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属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

例子：
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来解决。

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

例子：
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;后：

十四、文本属性总结

预习：从零开始学前端：CSS背景颜色 — 今天你学习了吗？（Day09）

------有教养的头脑的第一个标志就是善于提问。

解梦吧