网络安全之前端学习（css篇2）

news2025/5/19 17:58:32

那么今天我们继续来学习css，预计这一章跟完后，下一章就是终章。然后就会开始js的学习。那么话不多说，我们开始吧。

字体属性

之前讲到了css可以改变字体属性，那么这里来详细讲一讲。

1.1字体颜色

之前讲到了对于字体改变颜色食用color关键字，其实color关键字不止可以使用英文（不如red）这种方式，还可以使用二进制以及rgb，rgba进行改变

这里使用之前学过的类选择器进行区别。

这里讲一下#ff0000是红色的16进制，在后续工作用到的比较多。

然后是rgb和rgba，这两个其实差不多，就是类似调色板，对三原色进行比例挑选，rgba的最后一个是透明度，为0-1，0为透明，1为完全不透明，中间的就是半透明。

1.2文本大小

之前也讲过，调整字体大小是font-size，这里不多讲，但是要注意一点，有些浏览器有字体的最小像素，什么意思呢，举个例子，比如有些浏览器只能接受最小字体为10px，那么如果你设置为比10px还要小的字体，也就显示10px，不能更小了。

1.3为本粗细

文本字体有粗有细，这里就是用font-weight。可以使用bold，bolder，lighter，或者使用100-900（其中400相当于默认粗度，而700则是bold）

这里可能大家就会发现bold和bolder似乎长得一模一样啊，反正我感觉是一样的。所以大家以后就是用bold因该就够用了。

1.3字体样式

在我们日常浏览网页中，我们可以看到有很多不同样式的字体，那么这就是使用font-family关键字变换的样式。

实际上font-family有很多样式，这个就大家自行探索好了。

1.4字体斜体

大家知道斜体使用的是<em>或者是<i>，但是其实使用css也可以实现，使用font-style

这里主要使用两个一个是italic（斜体），normal（正常）两个属性。

背景属性

之前讲到改变背景颜色使用background-color关键字，这里来讲讲更多的系统属性。

2.1背景颜色

这个之前讲到过，使用background-color可以定义。

值得一提的是，这里的background-color也可以使用16进制，rgb，rgba来进行更改赋值。

2.2背景图片

设置背景图片使用background-image标签

这里大家要注意background-image的属性是如何书写的，要写为background-image：url（“”）

这里大家就会有疑惑了，我的截图怎么就只有一个角被截进来了？因为图片过大，放不下，就从左上角开始放，放满为止。

这里先讲一个属性，叫background-repeat

这里我的图片过大，就不展示了，跟各位说一下啊，当我们的容器比图片大的时候，图片就会在水平/竖直方向重复。而background-repeat就是解决这一问题的属性backgound-repeat有几个值：repeat（默认值），no-repeat（x，y都不重复），repeat-x（只向水平平铺），repeat-y（只向竖直平铺）。

然后再就是设置背景图片的大小。

使用background-size调整，这里主要讲两个值，一个是contain（以图片比例尽可能填充整个容器，如果实在不行，就空着（设置background-repeat后））

从图中我们可以清晰看到div标签定义300*300位置，但是没有占满，这个contain就是尽可能占满整个容器。

第二个值就是cover，再占满容器的前提下尽量放下整张图片

这里也可以看到，占满了整个容器的同时尽量放下整张图片。

那么回收开始时我们的图片只展示左上角，那么这里可以使用另一个属性background-position这个属性

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。