CSS相关知识点的总结

高诗轶的CSS总结：
  通过本次有关CSS相关知识的学习，我对CSS这种级联样式表的相关知识点认识更加深入，HTML的作用是撰写页面的内容，而CSS的作用就相当于html的化妆师，使得html的页面更加美丽简洁！
  在本次学习CSS相关知识点后，我熟练掌握了CSS中有
关CSS语法的相关知识，了解了选择器的相关知识（包括id和class选择器，其中class选择器在实际运用中最为普遍），同时了解了CSS的三种方法（外部样式表，内部样式表，内联样式），外部样式表要在同一目录下新建一个样式表文件mycss.css，而内部样式表则是将样式放在html文件中，例如：

<style>
   body {
     background-color: linen;
     text-align: center;
   }
   h1 {
     color: red;
   }
   .haha {
     margin-top: 100px;
     color: chocolate;
     font-size: 50px;
   }
 </style>

其中最不推荐的是内联样式表（最不灵活！）。
  在网页制作过程中，颜色的选择往往对网页的美观起很大的作用，在学习过程中我也学会了对网页背景以及文字的着色

 <h3 style="background-color:Tomato;">Tomato</h3>

以上代码的作用是将三级标题的背景色变为番茄色。
  接下来就来到了CSS的重要部分，设置元素的尺寸（像素px，百分比%）

   .example-1 {
  width: 100%;//使得元素占据全部宽度
  height: 200px;//使得元素高度为200像素
  background-color: blue;//设置背景色为纯蓝色
  text-align: center;//方式居中对齐
}
.example-2 {
  height: 100px;//高度占据100像素
  width: 500px;//宽度占据500像素
  background-color: rgb(73, 138, 60);//通过rgb调色
  text-align: right;//向右对齐
}
   

  接下来便是元素的对齐（对于文本我们可以设置text-align属性实现向左向右或居中对齐），学习了盒子模型（这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的），具体分析见下：

.box1 {
  height: 200px;//设置元素的高度为200像素
  width: 200px;//设置元素的宽度为200像素
  background-color:#615200;//设置元素的背景色
  color: aliceblue;
  border: 10px solid red;//设置边框的颜色宽度
  padding: 25px;//设置内边距像素为25px
  margin: 25px;//设置外边距像素为25px
}
.box2 {
  height: 300px;//设置元素的高度为300px
  width: 300px;//宽度300px
  background-color:#004d61;//颜色
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;//内边距25px
  margin: 25px;//外边距25px
}

  此外，我还学会了如何设置元素的边距 以下为修改内边距属性示例代码：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;//顶部
padding-bottom: 100px;//底部
padding-right: 50px;//右侧
padding-left: 80px;//左侧
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

  同时，在学习CSS级联样式表过程中还学会了利用元素的position属性对该元素进行定位（static为静态，relative为相对，fixed为固定，absolute为绝对）需要注意的是只有我们设置了position属性后，我们才能使用以上值。
  最后，还了解了元素溢出（当元素内容超过指定的区域后我们通过overflow属性处理溢出（overflow有几个值：visible默认,hidden溢出部分不可见,scroll剪裁提供上下左右滚动条,auto剪裁视情况提供滚动条），我们可以设置float属性让元素水平向左向右移动（浮动）。同时了解了不透明度，组合选择器，伪类和伪元素。
  此次CSS学习，使我的编程能力更进一步的提升，学会了很多有用的前端知识，我受益匪浅。我以后会更加努力的学习web技术基础，为以后的程序工作夯实基础！