初学css3教程狂神说——CSS3最新教程快速入门通俗易懂

本文主要介绍关于css3,css,vscode的知识点，对【狂神说——CSS3最新教程快速入门通俗易懂】和【初学css3教程】有兴趣的朋友可以看下由【淡水瑜】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的【前端】相关技术问题。

初学css3教程

参考资料

文章目录 1.CSS的简单介绍2.什么是CSS和发展史3.CSS的快速入门及优势4.四种css导入方式5.三种基本选择器（重要）6.层次选择器7.结构伪类选择器8.属性选择器（常用重要）9.CSS的作用及字体样式10.文本样式11.文本阴影和超链接伪类12.列表样式练习13.背景图像应用及渐变14.盒子模型及边框使用（重要）15.内外边距及div居中16.圆角边框及阴影和经验分享17.display（重要）和浮动18.overflow及父级边框塌陷问题19. 相对定位的使用及练习20.方块定位练习讲解21.绝对定位和固定定位22.z-index及透明度23.动画及视野拓展24.CSS小结

1.CSS的简单介绍

); /* x轴平铺 */ background-repeat: repeat-x; /* y轴平铺 */ background-repeat: repeat-y; /* 只有一个 */ background-repeat: no-repeat;

渐变色：https://www.grabient.com/ body {
   
  /* 渐变色背景 */
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

14.盒子模型及边框使用（重要）

marging:外边距 border：边框 padding：内边距 border:边框 边框的粗细 边框的样式 边框的颜色 body {
   
  /* body 默认外边距margin:8px */
  margin: 0px;
}

#app {
   
  /* border: 边框粗细 样式 颜色 */
  width: 250px;
  border: 1px solid red;
}

15.内外边距及div居中

/* margin 可以居中 */
margin:  0 auto;

form {
   
/* 页边距 上 */
margin-top: 100px;
/* 页边距 左 */
margin-left: 10px;
/* 页边距 右 */
margin-right: 50px;
/* 页边距 下 */
margin-bottom: 30px;
}

/* 内边距 */
padding: 5px;

16.圆角边框及阴影和经验分享

圆角边框 div{
   
      width: 100px;
      height: 50px;
      border: 1px solid red;
      background-color: red;
      /* 左上 右上 左下 右下 顺时针方向*/
      border-radius: 50px  50px 0px 0px;
  }
  
img{
   
    padding: 20px;
    /* 图片圆角 */
    border-radius: 100px;
}
  
阴影
/* 阴影 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 */
 box-shadow: 0 0 10px green;

前端网站可以下载：
http://www.cssmoban.com/tags/55m75b2V/
下载下来自己分析CSS

17.display（重要）和浮动

/* display block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行 none 隐藏 */

18.overflow及父级边框塌陷问题

/* clear left 左侧不允许右浮动元素 right 右侧不允许右浮动元素 both 两侧不允许右浮动元素 none 什么都没用 */


#main{
   
   width: 150px;
   height: 100px;
   border:1px solid red;
   /* 超出边界 overflow: hidden 隐藏 auto 自动 scroll 滚动条 */
   overflow:scroll;
}

19. 相对定位的使用及练习

/* 相对定位：相对于原来的位置，进行指定的偏移 上下左右 仍然在标准流中 */
    position: relative;
    left:10px;
    top:-10px;
    right:10px;
    bottom:-10px;

20.方块定位练习讲解

21.绝对定位和固定定位

/* 绝对定位：相对于父级或者浏览器的位置，进行指定的偏移 上下左右 不在标准流中 */
position: absolute;
right: 20px;

/* 固定位置 */
 position:fixed;
 right:0;
 bottom:0;

22.z-index及透明度

/* 设置图层 默认是0 最高无限 */
z-index:  1;
/* 透明度 */
opacity: 0.5;

23.动画及视野拓展

菜鸟教程 https://www.runoob.com/css3/css3-animations.html
less https://less.bootcss.com/

css 动画
canvas 动画

24.CSS小结

渐变色网页 https://www.grabient.com/

笔记代码下载地址：https://download.csdn.net/download/weixin_29431461/85464940

本文《狂神说——CSS3最新教程快速入门通俗易懂》版权归淡水瑜所有，引用狂神说——CSS3最新教程快速入门通俗易懂需遵循CC 4.0 BY-SA版权协议。