Web前端系统学习——课程笔记（章节1-3） 落日映苍穹つ 2024-04-17 19:57 22阅读 0赞 #### Web前端系统学习——课程笔记 #### 课程链接：[WEB前端系统学习 - 网易云课堂][WEB_ -] 参考教程：[菜鸟教程][Link 1] 笔记链接：[Web-Learn-Note][] -------------------- * 章节1 前端的认知 * 章节2 CSS引入 * 章节3 CSS盒模型 -------------------- ##### 章节1 前端的认知 ##### * 课时1 Html5及行业介绍 23:07 * 课时2 课程介绍及工具安装PS使用 27:02 Sublime Text3安装、相关使用插件介绍 PS安装 * 课时3 HTML文档的结构 14:23 ##### 章节2 CSS引入 ##### * 课时4 CSS引入之行间样式与内部样式、标签名 21:10 1.行间样式的引入 写法：在标签中，写一个style的属性 比如：style="....." 在引号当中，写相应的css样式 缺点：不利于维护，不利于代码重用 优点：优先级最高 2.内部样式表的引入 写法：在head标签里，写一个style的标签，在标签中，通过选择器来控制样式 选择器？ 标签名选择器 写法 ： div { ... css的样式 } ID选择器 写法： 首先在相应标签中设置一个ID的属性 如： id="id名" 在样式表中，通过 # + id名 { ... css的样式 } 温馨小提示： id名要以英文字母开头 id名不能重复，是唯一的 class选择器 写法： 首先在相应标签中设置一个class的属性 如：class="class名" 在样式表中，通过 . + class名 { ... css的样式 } 温馨小提示 class名以英文字母开头 优先级 标签名选择器 < class选择器 < id选择器 < 行间样式 优点：加载速度快，不需要去请求服务器 缺点：不利于代码重用 3.外部样式表的引入 写法：在head标签里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器来控制样式 温馨提示. <link rel="stylesheet" href="css文件的路径"> 优点：利于代码重用 缺点：需要加载服务器 * 课时5 class选择器和外部样式表，选择器优先 19:18 标签名选择器 < class选择器 < id选择器 < 行间样式 * 课时6 css宽、高、背景设置 26:35 width 宽 height 高 background 背景 背景色 background-color:颜色值 英文单词 十六进制 rgb 背景图 background-image:url("图片路径") 背景图平铺 background-repeat:no-repeat repeat-x repeat-y 背景图定位 background-position:第一个值(X轴的位置) 第二个值(Y轴的位置); 第一个值: left center right 30px; 第二个值: top center bottom 100px; 复合写法 background: color image position repeat; 背景图滚动 background-attachment:fixed; 背景图尺寸 background-size:第一个值(X轴的比例) 第二个值(Y轴的比例); 温馨小提示：css3的样式 不兼容 ##### 章节3 CSS盒模型 ##### * 课时7 css的基础样式-border 17:20 border 边框 复合写法 border: border-width border-style border-color; border-width 边框宽度 border-style 边框样式 solid 实线 dashed 虚线 dotted 点线 （点线IE6不认） border-color 边框颜色 英文单词 十六进制 rgb border-radius 圆角 透明 transparent * 课时8 css的基础样式-padding 18:08 padding 内边距 内填充 padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 padding:10px; 一个值代表 上右下左都是10px padding:10px 20px; 两个值 第一个值代表上下 第二个值代表左右 padding:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下 padding:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左 * 课时9 css的基础样式-margin 18:33 margin 外边距 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left 左外边距 margin的复合写法 margin:10px; 一个值代表 上右下左都是10px margin:10px 20px; 两个值 第一个值代表上下 第二个值代表左右 margin:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下 margin:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左 * 课时10 盒模型 14:02 空间大小 ： 盒子的总宽度 ： border-left + padding-left + width + padding-right + border-right 盒子的总高度 ： border-top + padding-top + height + padding-bottom + border-bottom 位置 margin [WEB_ -]: https://study.163.com/course/courseMain.htm?courseId=1003112011 [Link 1]: https://www.runoob.com/html/html-tutorial.html [Web-Learn-Note]: https://github.com/zz2summer/Web-Learn-Note
还没有评论，来说两句吧...