HTML & CSS 学习总结

LMr.Tang

已于 2023-07-04 11:34:40 修改

阅读量82

点赞数

文章标签：学习

于 2023-06-17 18:12:24 首次发布

本文链接：https://blog.csdn.net/m0_65605547/article/details/131262297

版权

一、前言

大家好，我是唐同学，本人作为一名大二学生，今年选修了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属性和方法，了解动画的设计原则，我们就可以创建出漂亮而且流畅的动画效果。不断练习和尝试新的技巧，可以提高我们的动画制作技能，使我们的网页更加生动和吸引人。

LMr.Tang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML & CSS 学习总结

大家好，我是唐同学，本人作为一名大二学生，今年选修了web应用基础开发这门选修课（期末计算机人真的事情多啊哭😭😭😭），对于有一定web开发基础和编程基础的我来说并不是太难，很好理解，但很多基础的东西还是需要补充并熟悉，因此就浅浅写了一下学习总结报告，供大家参考🧐；相信很多人都和我一样，在实际开发项目时，都是需要什么才去网上查，平时对于部分不常用知识的一问三不知，下面我就整理了一些本人本学期所学习的HTML & CSS的基础知识点，以及自身的总结,欢迎各位大佬指教。
复制链接

扫一扫