【HTML5+CSS3+JavaScript(ES6)】CSS篇

目录

1 CSS介绍

2 div和span标签

3 选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

5.3 关系选择器优先级

6 属性

6.1 背景颜色属性

6.2 字体属性

6.2.1 字体族属性

6.2.2 字体大小属性

6.2.3 字体风格属性

6.2.4 字体粗细属性

6.2.5 字体复合属性

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

9 浮动

10 定位

10.1 静态定位

10.2 相对定位

10.3 绝对定位

10.4 固定定位


1 CSS介绍

学习网站:

https://developer.mozilla.org/zh-CN/docs/Web

https://www.w3school.com.cn/

Cascading Style Sheets 层叠样式表

2 div和span标签

<div></div>和<span></span>是无语义化标签,只希望对标签进行样式控制和样式设置,不希望标签带有语义化。无语义化含义,可以将它们用于任何地方,都不会产生歧义,只受样式控制。

3 选择器

3.1 标签选择器

标签选择器也叫类型选择器、元素选择器

3.2 类选择器

3.3 ID选择器

多个标签用类class,单个的一般用id

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

普通伪类选择器:

行为伪类选择器:

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

邻接兄弟选择器:

通用兄弟选择器:

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

加载文档流:

5.3 关系选择器优先级

关系选择器也叫组合选择器,将多个选择器以一种关系的方式组合在一起

6 属性

6.1 背景颜色属性

background-color

6.2 字体属性

6.2.1 字体族属性

font-family

6.2.2 字体大小属性

font-size

6.2.3 字体风格属性

font-style

6.2.4 字体粗细属性

font-weight

6.2.5 字体复合属性

font属性,支持同时设置多个字体属性,但顺序必须是:其他字体属性,字体大小,字体族

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

display属性

9 浮动

10 定位

定位:如何确定当前元素的位置

10.1 静态定位

position: static;

10.2 相对定位

position: relative;

10.3 绝对定位

position: absolute;

10.4 固定定位

position: fixed;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当然可以帮您编写使用 HTMLCSSJavaScriptES6 的粒子生长树的完整代码。以下是一个示例: ```html <!DOCTYPE html> <html> <head> <style> #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 使用 ES6 的类来表示粒子 class Particle { constructor(position, parentPosition) { this.position = position; this.parentPosition = parentPosition; this.children = []; } addChild(child) { this.children.push(child); } } // 创建画布 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 生成粒子生长树 function generateTree(numParticles, maxDepth, growthStep) { const particles = [new Particle({ x: canvas.width / 2, y: canvas.height }, null)]; for (let i = 0; i < maxDepth; i++) { const newParticles = []; for (const particle of particles) { for (let j = 0; j < numParticles; j++) { const deltaX = Math.random() * growthStep - growthStep / 2; const deltaY = Math.random() * growthStep - growthStep / 2; const newPosition = { x: particle.position.x + deltaX, y: particle.position.y - growthStep + deltaY }; const newParticle = new Particle(newPosition, particle.position); particle.addChild(newParticle); newParticles.push(newParticle); } } particles.push(...newParticles); } return particles; } // 绘制粒子生长树 function drawTree(particles) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = 'black'; function drawParticle(particle) { ctx.beginPath(); ctx.moveTo(particle.parentPosition.x, particle.parentPosition.y); ctx.lineTo(particle.position.x, particle.position.y); ctx.stroke(); for (const child of particle.children) { drawParticle(child); } } for (const particle of particles) { drawParticle(particle); } } // 示例用法 const numParticles = 3; const maxDepth = 5; const growthStep = 50; const particles = generateTree(numParticles, maxDepth, growthStep); drawTree(particles); </script> </body> </html> ``` 这段代码使用了 HTMLCSSJavaScript(包括 ES6)来实现粒子生长树。HTML 部分定义了一个 canvas 元素用于绘制树形结构。CSS 部分设置了 canvas 的样式,使其占满整个页面。JavaScript 部分使用 ES6 的类来表示粒子,并提供了生成和绘制粒子生长树的函数。 在 JavaScript 部分,生成粒子生长树的 `generateTree` 函数接受三个参数:`numParticles` 表示每个粒子在每一步中生成的子粒子数量,`maxDepth` 表示生长树的最大深度,`growthStep` 表示每一步中粒子的位置变化量。该函数使用循环逐步生成粒子生长树,并返回所有生成的粒子。 绘制粒子生长树的 `drawTree` 函数使用 canvas 的 API 绘制树形结构。它使用递归的方式绘制每个粒子及其子粒子之间的连线。 示例用法部分展示了如何使用上述函数生成并绘制一个简单的粒子生长树。您可以根据需要调整参数,并进一步扩展和美化界面。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开五档的蒙奇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值