其他分享
首页 > 其他分享> > 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(Day08)

从零开始学前端: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', "微软雅黑";
}

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

二、CSS字体大小

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

例子:
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)、boldbolderlighternumber
实际开发中,我们提倡使用数字表示加粗或者变细,在写数字的时候不用加单位。

属性值描述
normal默认值(不加粗)
bold/dolder定义加粗字
100~900400等同于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-sizefont-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这个属性是控制用户能不能选择文字的

例子:
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-collapsecollapse去除单元格与单元格之间的间隙

十五、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);

例子:
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或者一些装饰性的小图片或者超大的背景图片,有点事非常便于控制位置。(精灵图也是一种运用场景)(背景图片比插入图片位置更精确一些)

语法:

例子:
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属性。默认就是平铺。

语法:

例子:
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自定义长度,可以是百分数也可以是单位标识符
positiontop | 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