第二章 WEB02-CSS&JS篇
教学导航
教学目标 了解CSS的概念
了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念
掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互.
教学方法 案例驱动法
-----------------------------------------------------------------
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
-----------------------------------------------------------------
【CSS的概述】
什么是CSS:
CSS指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一
* HTML相当于网站的骨架！CSS对骨架进行美化！
CSS在那些地方使用：
任何网站都会使用CSS去美化页面！！！
如何使用CSS
知道CSS的语法.
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器（最重要是记住并理 解选择器），一个声明.
* 选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
行内样式：直接在HTML的元素上使用style属性设置CSS.（最强）
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
【CSS的选择器】
元素选择器：（常用）
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{（定义时加“.”，引入时不用加）
border:2px solid yellow;
}
【CSS的浮动】
使用float属性可以完成DIV的浮动.（想让多个div放到同一行时，就需要用到浮动）
【CSS的其他选择器】
属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
后代选择器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
子元素选择器：
div > span找这个div中的第一层级的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
并列选择器:
选择器,选择器{
}
------------------------------------------------------------------------
【CSS中的盒子模型】
内边距：padding.
边框：border
外边距：margin
------------------------------------------------------------------------
【CSS中的定位】
position属性设置定位：（只有定义了属性，才能使用它的left和top属性）
* relative:相对定位（相对于副容器而言的，即所在的div）
* absolute:绝对定位(相对于整个页面)
使用另外两个属性:left,top
------------------------------------------------------------------------
【JS的概述】
什么是JavaScript：
运行在浏览器端的脚本语言!
JavaScript是脚本语言。
JavaScript是一种轻量级的编程语言。
JavaScript是可插入HTML页面的编程代码。
JavaScript的组成：
ECMAScript：JavaScript的基本的语法
BOM：Browser Object Model ：
DOM：Document Object Model ：
其他的脚本语言：
JavaScript,ActionScript,Flex
JS的用途：
使页面更加丰富,使页面动起来！！！
【JS的基本语法】
区分大小写：
与Java一样，变量，函数名，运算符以及其他一切东西都是区别大小写的。
比如：变量test与变量TEST是不同的。
弱变量类型语言：（与Java不同）
* Java
* int i = 3;
* String s = “abc”;
* JavaScript:
* var i = 3;
* var s = “abc”;
分号可有可无：
变量命名：
变量名需要遵守两条简单的规则：
第一个字符必须是字母、下划线（_）或美元符号（$）
余下的字符可以是下划线、美元符号或任何字母或数字字符
【JS的数据类型】
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* * number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
【JS的运算符】
JS中的运算符与Java中基本一致！
S中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
【JS的语句】
JS中的语句与Java的语句一致！
【JS的通常开发的步骤】
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
【JS的引入方式】
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
---------------------------------------------------------------------------
将JS的代码定义成一个文件引入:
<script src="../js/check.js"></script>
获得页面中的元素:
* document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
---------------------------------------------------------------------------
【HTML的window对象】
* setInterval(); :每隔多少毫秒执行某个表达式.
* setInterval(“change()”,5000);
* setTimeout(); :隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,5000);
---------------------------------------------------------------------------
---------------------------------------------------------------------------