从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（Day08）
作者：互联网
从零开始学前端：CSS字体属性和文本属性 — 今天你学习了吗？（Day08）
复习：从零开始学前端：CSS引入 — 今天你学习了吗？（Day07）
文章目录
前言
在这里问大家一个问题，将代码在当前视图内进行展示的快捷键是什么呢？我最开始感觉很基础，但是用着用着，感觉知识就溜走了，看来还是需要根据艾宾浩斯记忆遗忘曲线一段时间内加深学习，大家也记得复习哈，要相信脑力是无限的，永远装不满，所以当前的基础知识，我们能记住多少就尽量记多少，后期补基础很麻烦的！！！
第八节课：主要讲了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 | 去除单元格与单元格之间的间隙 |
十五、CSS背景颜色
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定。
1. 背景颜色
background-color属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。
语法：
background-color:颜色值(red/#000/rgb(255,255,255))
例子：
html文件：
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css文件：
div{
background-color: #999;
}
效果图：
2.背景颜色半透明
背景半透明：background:rgba(0,0,0,0.3);
- 最后一个参数是aipha透明度，取值范围在0~1之间
- 我们习惯把0.3的0省略掉，写为background：rgb（0,0,0,.3）；
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3新增属性，是IE9+版本浏览器才支持的
- 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用
例子：
html文件：
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css文件：
div{
background-color: rgb(233, 167, 167,.3);
}
效果图：
3.背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，有点事非常便于控制位置。（精灵图也是一种运用场景）（背景图片比插入图片位置更精确一些）
语法：
background-img；none|url（url）- none表示无背景图，默认的。url使用绝对路径或者相对路径指定背景图片。
background-size：200px 150px;（cover覆盖我的盒子）- 设置背景图片尺寸，前面为宽度，后面为高度
例子：
html文件：
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
css文件：
div{
height: 200px;
width: 500px;
background-color: rgb(233, 167, 167,.3);
background-image: url(./康纳1.jpg);
}
效果图：
4.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。默认就是平铺。
语法：
- background-repeat:repeat | no-repeat | repeat-x | repeat-y
- 四个属性：平铺、不平铺、沿着X轴平铺、沿着Y轴平铺
例子：
html文件：
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus ullam maxime alias quaerat quisquam voluptates, aliquam inventore expedita saepe labore maiores, repellat sint unde, animi minus tempora rem tenetur eveniet?
</div>
CSS文件：
div{
background-color: rgb(233, 167, 167,.3);
}
body{
background-image: url(./康纳1.jpg);
background-repeat: repeat;
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
效果图：
repeat:x/y均平铺
no-repeat:左右均不平铺
repeat-x:x平铺
repeat-y:y平铺
5.背景图片位置
利用background-position属性可以改变图片在背景中的位置。
语法：
background-position：x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。
| 参数值 | 说明 |
|---|---|
| length | 自定义长度，可以是百分数也可以是单位标识符 |
| position | top | center | bottom | left | center | right 方位名词 |
当参数是精确单位：
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。
如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中。
当参数是方位名词：（right、left、center）
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
当参数是混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
例子：
CSS文件：
div{
background-color: rgb(233, 167, 167,.3);
}
body{
background-image: url(./康纳1.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
效果图：
可以看到左边和顶部都留有空隙。
6.背景图片固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部门滚动。
语法：
background-attachment:scrroll l fixedcss
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
例子：
CSS文件：
div{
height: 900px;
width: 500px;
background-image: url(./康纳1.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
/* background-attachment: fixed; */
background-attachment: scroll;
}
效果图：
fixed:
图片位置不会变动，字体跟随滚动轮变动
scroll:
图片跟随字体一起向上：
7.背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在一个属性background中。从而节约代码量。当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
background:transparent url(image.ipg) repeat-y fixed top;
注意：
背景复合写法没有顺序要求，但是不能在两个位置之间写其他属性值。
例子：
CSS文件：
div{
background: palegoldenrod url(./康纳1.jpg) scroll bottom ;
height: 800px;
}
效果图：
图片会跟随文字一起向上，然后图片位置是bottom，所以上面空间和左边空间多余出来时会平铺
预习：https://blog.csdn.net/weixin_45266979/article/details/122491445
------有教养的头脑的第一个标志就是善于提问。
标签：Day08,文本,---,溢出,background,font,文本属性,CSS,属性 来源： https://blog.csdn.net/weixin_45266979/article/details/122466637