2024年Web前端最新CSS学习笔记，web可视化开发

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 4.4阴影

• 4.5超链接伪类

• 4.6列表

• 4.7背景

• 4.8渐变

• 五、盒子模型

• • 5.1什么是盒子模型

• 5.2边框

• 5.3圆角边框

• 5.4阴影

• 六、浮动

• 七、定位

• • 7.1相对定位

• 7.2绝对定位

• 7.3固定定位 fixed

• 7.4 z-index

---

一、什么是CSS？

========================================================================

1. CSS 指的是层叠样式表，也称级联样式表(Cascading Style Sheets)。

2. css的优势：

内容（HTML）与表现（CSS）分离；

网页结构表现统一，可以实现复用；

样式十分的丰富；

建议使用独立于html的css文件。

二、CSS的三种导入方式

===========================================================================

1. 行内样式

2. 内部样式

3. 外部样式

我是标题

三、选择器

====================================================================

3.1作用

---

选择页面上的某一个或者某一类元素。

3.2基本选择器

---

• 标签选择器：选择一类标签 标签{}

学习Java

学习前端

• 类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

标题1

标题2

标题3

p标签

• id选择器：全局唯一！ #id名{}

标题1

标题2

标题3

标题4

标题5

• 优先级：id>class>标签

3.3层次选择器

---

• 后代选择器：在某个元素的后面

/后代选择器/

body p{

background-color: cornflowerblue;

}

• 子选择器 一代，儿子

/子选择器/

body>p{

background-color: antiquewhite;

}

• 相邻兄弟选择器 同辈

/相邻兄弟选择器:只有一个，相邻（向下）/

.active + p{

background-color: green;

}

• 通用选择器：通用兄弟选择器，当前选中元素的向下的所有兄弟元素

/通用兄弟选择器，当前选中元素的向下的所有兄弟元素/

.active~p{

background-color: blueviolet;

}

• 总代码

p0

p1

p2

p3

• p4

• p5

• p6

  3.4结构伪类选择器

  ---

  /ul的第一个子元素/

  ul li:first-child{

  background-color: blueviolet;

  }

  /ul的最后一个子元素/

  ul li:last-child{

  background-color: red;

  }

  • 总代码

  p1

  p2

  p3
• li1
• li2
• li3
• • 结果图

  

  3.5属性选择器（常用）

  ---

  = 绝对等于

  *= 包含这个元素

  ^= 以这个开头

  $= 以这个结尾

  • 代码示例

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  • 结果展示

  

  四、美化网页元素

  =======================================================================

  4.1为什么要美化网页

  ---

  • 有效的传递页面信息

  • 美化网页，页面漂亮，才能吸引用户

  • 凸显页面主题

  • 提高用户体验

  span标签：重点要突出的字，使用span标签括起来

  欢迎学习Java

  4.2字体样式

  ---

  4.3文本样式

  ---

  1. 颜色 color rgb rgba

  2. 文本对齐的方式 text-align=center

  3. 首行缩进 text-indent:2em

  4. 行高 line-height: 单行文字上下居中

  5. 装饰 text-decoration:

  6. 文本图片水平对齐：vertical-align：middle

  123456

  123456

  123456

  故事介绍

  天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；

  而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。

  太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。

  然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王，这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。

  然而面对众人对哪吒的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔，他将何去何从

  

  哪吒之魔童降世

  • 结果图展示

  

  4.4阴影

  ---

  /text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色/

  #price{

  text-shadow: 10px 10px 2px grey;

  }

  4.5超链接伪类

  ---

  /* 未访问的链接 */

  a:link {

  color: #85e9ff;

  }

  /* 已访问的链接 */

  a:visited {

  color: #00FF00;

  }

  /* 鼠标悬停链接 */

  a:hover {

  color: #FF00FF;

  }

  /* 已选择的链接 */

  a:active {

  color: #0000FF;

  }

  4.6列表

  ---

  /ul li/

  /*

  list-style:

  none 去掉原点

  最后

  好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

  做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

  tml>

  • 结果图展示

  

  4.4阴影

  ---

  /text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色/

  #price{

  text-shadow: 10px 10px 2px grey;

  }

  4.5超链接伪类

  ---

  /* 未访问的链接 */

  a:link {

  color: #85e9ff;

  }

  /* 已访问的链接 */

  a:visited {

  color: #00FF00;

  }

  /* 鼠标悬停链接 */

  a:hover {

  color: #FF00FF;

  }

  /* 已选择的链接 */

  a:active {

  color: #0000FF;

  }

  4.6列表

  ---

  /ul li/

  /*

  list-style:

  none 去掉原点

  最后

  好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

  做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。