渣渣的夏天
渣渣的夏天

Web前端系统学习——课程笔记（章节1-3）

Web前端系统学习——课程笔记

课程链接：WEB前端系统学习 - 网易云课堂

参考教程：菜鸟教程

笔记链接：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文件中，通过选择器来控制样式	

      温馨提示. 	
          

          优点：利于代码重用
          缺点：需要加载服务器

  • 课时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前端系统学习)