CSS-2，基础前端开发

2401_84164721

于 2024-04-07 19:28:19 发布

阅读量234

点赞数 3

分类专栏： 2024年程序员学习文章标签： css 前端

本文链接：https://blog.csdn.net/2401_84164721/article/details/137475039

版权

2024年程序员学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

a:visited{

color: orange;

}

a:hover{

color: pink;

}

a:active{

color: skyblue;

}

哔哩哔哩

focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器主要针对于表单元素来说。

在这里插入图片描述

老北京来了

5.复合选择器总结

| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |

| — | — | — | — | — |

| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a：hover实际开发的写法 |

三.CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

1.块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等。其中**<div>是最典型的块元素**。

块元素的特点：

比较霸道，自己独占一行。
高度，宽度，外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素不能使用块级元素。
p标签主要用于存放文字，因此里面不能放块级元素,特别是不能放<div>。
同理<h1>~<h6>等都是文字类块级标签，里面也不能放其它块级元素。

2.行内元素

常用的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中**<span>标签是最典型的行内元素**。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高，宽直接设置无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但会给转换一下块级模式最安全。

3.行内块元素

在行内元素中有几个特殊标签------<img/>,<inout/>,<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块)在一行上，但是它们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高，外边距以及内边距都可以控制（块级元素特点）。

4.元素显示模式总结

| — | — | — | — | — |

5.元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性比如想要增加理解<a>的触发范围。

转换为块元素：display:block
转换为行内元素：display:inline
转换为行内块：display:inline-block

案例

老北京来了

小皮皮

我是块级元素

行内元素转换为行内块元素

6.一个小技巧使单行文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

例

老北京来了

7.单行文字垂直居中的原理

在这里插入图片描述

四.CSS的背景

序：通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

1.背景颜色

background-color属性定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素背景颜色默认值都是transparent(透明)，我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2.背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

background-image : none |url (url)

| 参数值 | 作用 |

| — | — |

| none | 无背景图（默认的） |

| url | 使用绝对或相对路径指定背景图像 |

**注意：**背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加问号。

3.背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat : repeat | no-repeat | repeat-x | repeat-y

| 参数值 | 作用 |

| — | — |

| repeat | 背景图像在纵向和横向上平铺（默认的） |

| no-repeat | 背景图像不平铺 |

| repeat-x | 背景图像在横向上平铺 |

| repeat-y | 背景图像在纵向上平铺 |

4.背景图片的位置

利用background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。

| 参数值 | 说明 |

| — | — |

| length | 百分数|由浮点数字和单位标识组成的长度值 |

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致。
如果只指定了一个方位名词吗，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

如果参数是精确单位，那么第一个肯定是x坐标，第二个一定是y坐标。
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用则第一个值是x坐标，第二个值是y坐标。

5.背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚定效果。

background-attachment : scroll | fixed

| 参数 | 作用 |

| — | — |

| scroll | 背景图像是随对象内容滚动 |

| fixed | 背景图像固定 |

6.背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。当使用简写属性时，没有特定的书写顺序，一般习惯的约定顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

这是实际开发中，我们更提倡的写法。

7.背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

HTTP

HTTP 报文结构是怎样的？
HTTP有哪些请求方法？
GET 和 POST 有什么区别？
如何理解 URI？
如何理解 HTTP 状态码？
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
对 Accept 系列字段了解多少？
对于定长和不定长的数据，HTTP 是怎么传输的？
HTTP 如何处理大文件的传输？
HTTP 中如何处理表单数据的提交？
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
对 Cookie 了解多少？
如何理解 HTTP 代理？
如何理解 HTTP 缓存及缓存代理？
为什么产生代理缓存？
源服务器的缓存控制
客户端的缓存控制
什么是跨域？浏览器如何拦截响应？如何解决？

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

[外链图片转存中…(img-s0rbb8Xs-1712489281907)]

HTTP

HTTP 报文结构是怎样的？
HTTP有哪些请求方法？
GET 和 POST 有什么区别？
如何理解 URI？
如何理解 HTTP 状态码？
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
对 Accept 系列字段了解多少？
对于定长和不定长的数据，HTTP 是怎么传输的？
HTTP 如何处理大文件的传输？
HTTP 中如何处理表单数据的提交？
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
对 Cookie 了解多少？
如何理解 HTTP 代理？
如何理解 HTTP 缓存及缓存代理？
为什么产生代理缓存？
源服务器的缓存控制
客户端的缓存控制
什么是跨域？浏览器如何拦截响应？如何解决？

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-wSS8gLro-1712489281907)]

2401_84164721

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS-2，基础前端开发

元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 || 块级元素 | 一行只能放一个块级元素 | 可以设置宽度，高度 | 容器的100% | 容器级可以包含任何标签 || 行内元素 | 一行可以放多个行内元素 | 不可以直接设置高度，宽度 | 它本身内容的宽度 | 容纳文本或者其它行内元素 || 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 | |
复制链接

扫一扫