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

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

1.字体属性

之前讲到了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（正常）两个属性。

2.背景属性

之前讲到改变背景颜色使用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这个属性

这里我就不做过多的展示了。

3．文本属性

3.1对其方式

一个文本有很多对其方式，就比如中间，左对齐，这里就是用text-align标签，之前讲过，这里不多赘述。

3.2文本修饰

我们知道对文字删除线使用del标签，而在css中，我们可以使用text-decoration属性

使用deoration可以添加下划线，上划线，删除线

3.3大小写

这个东西似乎有一点没用，不过还是讲一下吧，实际上因该用不到，

使用text-transform更改大小写

反正我感觉似乎没什么用，毕竟如果你字打错了不如直接改，毕竟这个还有点难记呢

3.4缩进

我们写文章一般首行缩进2个文字，那么css上使用text-indent即可

这里讲一下单位，你直接使用像素是可以的，比如15px，20px等，但是这里一个em单位为缩进几个文字的宽度，比如2em就是两个文字的宽度。

4.表格属性

先使用table>tr*4>td*4{单元格}进行初始化。

4.1css边框

表格边框之前我们html可以使用align，css中使用border属性

这里对table和td标签都要进行改变

Border：像素大小 soild ，颜色；（次序不分先后）

Solid是必须要加的。

4.2折叠边框

上述的代码可以发现边框是双线的，那么我们可不可以把他变成单线的呢。答案是可以的，使用border-collapse

注意，这里仅仅是table标签

Collapse则是折叠边框，变成单线框。

4.3设置高宽

这个就不多说了用了很多次了。

值得一提的是width和weight要对table和td分别赋值，如果对table赋值width，结果是不会变化。

4.4文字对齐

和文本标签一样，也可以使用text-align对文字对齐。这里都是对td赋值而不是table

4.5表格颜色

表格内部也可以填充颜色，使用background-color可以改变，然后color可以改变字体颜色，这里都是td的属性。

5.结语

那么这一章就结束了，希望大家可以上机实验。如有错误的地方，希望各位师傅可以指正，最后附上学习的链接。本文学习自以下链接

https://www.bilibili.com/video/BV1oz421q7BB/?spm_id_from=333.337.search-card.all.click

原文始发于微信公众号（泷羽Sec-林）：网络安全之前端学习（css篇2）