网络安全之前端学习(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(正常)两个属性。

  1. 背景属性

之前讲到改变背景颜色使用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 值。 |

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

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

相关推荐
qq. 28040339843 小时前
CSS层叠顺序
前端·css
白夜易寒4 小时前
Docker学习之私有仓库(day10)
学习·docker·容器
喝拿铁写前端4 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.4 小时前
vue 路由
前端·javascript·vue.js
淮北4944 小时前
ros调试工具foxglove使用指南三:在3d空间写写画画(Panel->3D ->Scene entity)
python·学习·3d·机器人
烛阴4 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91535 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing5 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学5 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪5 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js