一、前言
大家好,我是唐同学,本人作为一名大二学生,今年选修了web应用基础开发这门选修课(期末计算机人真的事情多啊哭😭😭😭),对于有一定web开发基础和编程基础的我来说并不是太难,很好理解,但很多基础的东西还是需要补充并熟悉,因此就浅浅写了一下学习总结报告,供大家参考🧐;相信很多人都和我一样,在实际开发项目时,都是需要什么才去网上查,平时对于部分不常用知识的一问三不知,下面我就整理了一些本人本学期所学习的HTML & CSS的基础知识点,以及自身的总结,欢迎各位大佬指教。
二、CSS布局
1.CSS的引用
分为内联样式、内部样式、外部样式.
内联样式:
<div style="width:250px;height:250px;background-color:green;"></div>
内部样式:
<style type="text/css">
div{
width: 150px;
height: 100px;
background: red;
}
</style>
外部样式:
<link rel="stylesheet" type="text/css" href="css/style.css">
CSS选择器
分为通用、组合、分组、伪组合器,用于选择引用CSS的样式,这里只介绍通用选择器,了解更多请访问:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors是🐂🥵🥵🥵😋
在 CSS 中,一个星号 (*
) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。比如,*.warning
和.warning
的效果完全相同。
ns|*
- 会匹配ns
命名空间下的所有元素*|*
- 会匹配所有命名空间下的所有元素|*
- 会匹配所有没有命名空间的元素*[lang^=en]{color:green;} *.warning {color:red;} *#maincontent {border: 1px solid blue;}
<p class="warning"> <span lang="en-us">A green span</span> in a red paragraph. </p> <p id="maincontent" lang="en-gb"> <span class="warning">A red span</span> in a green paragraph. </p>
会产生如下结果:
-
引入方式的优先级
内联大于内部和外部;内部 和 外部 谁生效
- 如果选择器优先级相同的话,谁后引入谁生效。
- 如果选择器优先级不同,选择器优先级高的生效。
2.美化功能😍
1.文本设置
文本的属性设置主要包含以下几个方面:
- font-family:用于指定文字的字体。
- font-size:用于指定文字的大小。
- font-style:用于指定文字的样式,例如normal。
- font-weight:用于指定文字的粗细程度,不要设太粗了🥵。
- color:用于指定文字的颜色。
- text-align:用于指定文字的对齐方式,例如left、center或right,一般常用center😋。
- text-decoration:用于指定文字的装饰,例如underline、line-through或none。
<!DOCTYPE html> <html> <head> <style> /* 指定字体为Arial */ body { font-family: Arial, sans-serif; } /* 指定字体大小为16px */ h1 { font-size: 16px; } /* 指定字体样式为italic */ em { font-style: italic; } /* 指定字体粗细程度为bold */ strong { font-weight: bold; } /* 指定文字颜色为蓝色 */ p { color: blue; } /* 指定文字居中对齐 */ div { text-align: center; } /* 给链接添加下划线 */ a { text-decoration: underline; } </style> </head> <body> <h1>这是测试</h1> <p>这是一段普通的文本。</p> <p><em>这是倾斜的一个一个文本。</em></p> <p><strong>这是加粗的哟。</strong></p> <p>这是一段<a href="#">这是带有链接的文本</a>。</p> <div>这是一段居中对齐的文本。</div> </body> </html>
当然,CSS不仅可以美化文字,也可以美化表格table,容器,图片等等,需要自己去探索更多!
盒模型:
盒子模型顾名思义,就需要装许多东西哈🥵,比如内容(content)、填充(padding)、边框(border)、边界(margin)等,CSS盒子模式都具备这些属性,如下图所示:
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8"/>
<style>
div{
width: 200px;
height: 150px;
background: red;
padding-top: 18px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 45px;
//简洁写法 padding: 18px 25px 25px 45px;
border: 5px solid blue;//给盒子加上边框
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、HTML
1.基本结构
<!DOCTYPE html>
<!-- 文档头(类型)声明 不是标签,代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的,里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
<!--网页的标题 -->
<title>html+css基础知识总结</title>
<!--针对搜索引擎和解析格式的属性->
<meta charset="utf-8"/>
<!--定义网页的关键字-->
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<!--定义网页的关键字-->
<meta name="description" content="html+css基础知识总结" />
</head>
<body>
<!-- 里面包含的绝大部分在页面中都是可见的, 主要用于搭建 HTML 结构 -->
</body>
</html>
四、个人总结与心得
本次课程之间,我主要学习css动画制作,学习使用CSS制作动画是一项很有趣和有创造性的任务,下面是我对这个过程的总结:
1. 确定动画目标和效果:在开始之前,首先要明确要创建的动画效果。是要使元素移动、旋转、缩放还是淡入淡出?这个目标将指导我们选择适当的CSS属性和方法。
2. 了解关键的CSS属性:在制作动画时,有一些关键的CSS属性是必不可少的。`animation` 属性是一个核心属性,它可以帮助我们定义动画的时间、持续时间、速度曲线等。另外,`transform` 属性可以实现元素的移动、旋转和缩放。此外,还有一些其他属性,如 `transition`、`keyframes` 等,也是常用的。
3. 使用关键帧动画:`keyframes` 是定义动画关键帧的一种方式。通过在不同的关键帧中指定元素的状态,我们可以创建出平滑的动画效果。例如,可以使用`@keyframes`规则并定义不同百分比上元素的属性值,然后将这些关键帧应用到元素上。
4. 设置动画的速度和缓动函数:CSS提供了一些内置的缓动函数,用于在动画过程中控制速度和加速度的变化。例如,`ease`、`linear`、`ease-in`、`ease-out`等。可以根据动画效果的需要选择适当的缓动函数。
5. 结合其他CSS属性和伪类:CSS动画不仅仅限于单个属性的变化,还可以与其他CSS属性和伪类进行结合,创造更加复杂的交互效果。例如,可以使用`opacity`属性实现淡入淡出的效果,使用`hover`伪类实现鼠标悬停时的动画效果。
6. 运用CSS动画最佳实践:在编写CSS动画时,有一些最佳实践可以帮助提高性能和用户体验。例如,避免使用过多的关键帧,减少动画的复杂度,避免使用影响性能的属性等。
总的来说,制作CSS动画是一项有趣和富有创造力的任务。通过学习关键的CSS属性和方法,了解动画的设计原则,我们就可以创建出漂亮而且流畅的动画效果。不断练习和尝试新的技巧,可以提高我们的动画制作技能,使我们的网页更加生动和吸引人。