CSS
1、css概述
* Cascading Style Sheets:层叠样式表
** 层叠:一层一层(优先级,最终以哪个样式为准)
** 样式表:很多的属性和属性值
* 增强页面的显示效果
*** CSS将网页内容和显示样式进行分离,提高了显示功能
* 要想使用css,必须要和html在一起使用
2、css和html的结合方式
(1)每个html标签都有一个属性 style,在style里面设置样式
*
* 格式 style=”属性名1:属性值1;属性名2:属性值2”
(2)使用html的一个标签
* 一般style标签写在头标签里面
* div {
background-color:black;
color:white;
}
* 应用场景:只是在一个页面设置这个样式,其他页面设置其他的样式
(3)在style标签里面使用语句
* 首先创建一个css文件
* <style type="text/css"> @import url(css文件路径); </style>
* <style type="text/css">
@import url(div.css);
</style>
* 注意:在某些浏览器下不支持
(4)引入外部的css文件
* 使用头标签 link
* <link rel="stylesheet" type="text/css" href="css_3.css" />
* 应用场景:比如现在有一万个页面,一万个页面需要相同的样式
** css优先级
* html代码加载顺序:从上到下加载
* 一般情况下,后加载的优先级高
** 格式:属性名:属性值 ; 属性名:属性值;
3、css的基本选择器
* 在哪个标签上设置样式
(1)标签选择器
* 使用标签名作为选择器
* p {
background-color:green;
}
(2)class选择器
* 每个html标签都有一个属性class
* .haha {
background-color:red;
color:green;
}
(3)id选择器
* 每个html标签都有一个属性id
* #hehe {
background-color:#990099;
color:#ccff99;
}
* id建议不要相同,后面js获取值
** 优先级
style > id > class > 标签选择器
4、css的扩展选择器
(1)关联选择器(设置嵌套标签里面的样式)
*
aaaaa
*
bbbbb
** 设置div里面的p标签里面的内容
* div p {
background-color:blue;
}
(2)组合选择器(设置不同的标签具有相同的样式)
* <div>qqqqqq</div>
* <p>wwwwww</p>
** 设置div和p具有相同的样式
* div,p {
background-color:orange;
}
(3)伪类元素选择器(了解)
* 实现一些简单的动态效果
* 不是一个真正的选择器,css里面提供的一些选择器,可以直接使用
** 超链接的状态
* 原始状态 鼠标放上去(悬停) 点击(瞬间) 点击之后
:link :hover :active :visited
* 如何记忆:
lv ha
5、CSS的盒子模型
* 要进行布局,首先要把数据封装到一块区域里面去(div)
* 边框 border : border-width || border-style || border-color
** 上下左右 border-top border-bottom border-left border-right
* 内边距:padding:length
** 有上下左右四个内边距
* 外边距 :margin:length
** 有上下左右四个外边距
6、css的布局(漂浮)
* float属性:left right
7、案例:实现图文混排效果
8、css布局(定位)
* position:absolute relative
** absolute:将对象从文档流中拖出,使用 left , right , top , bottom 进行定位
** relative: 不会把对象从文档流中拖出,使用 left , right , top , bottom 进行定位
9、案例:图像签名(在图片上加文字)
1、javascript简介
* javascript是一个基于对象和事件驱动的语言,应用与客户端。
** 基于对象:
- java是面向对象语言
- js里面提供了很多对象,直接使用
** 事件驱动:
- 鼠标滑动,每次滑动都会变换一张图片
** 客户端
- 浏览器
** html实现静态的页面效果,js实现一些动态的效果
* 特点
** 交互性:
** 安全性:js不可以直接访问本地硬盘
** 跨平台性:只要可以解析js的浏览器都可以运行
* javascript和java区别(雷锋和雷峰塔)
- java是sun公司,现在是oracle公司;javascript是Netscape公司
- java是面向对象,js是基于对象
- javascript是若类型语言,java是强类型语言
* 在java里面,int i = 1; int m = "1";
* js里面定义 var n = 1; var m = "12"; var flag = true;
- java跨平台基于jvm,js跨平台基于浏览器
* javascript组成:
1、ECMAScript(js的一些语法)
* ECMA:组织,欧洲计算机协会
* 语句,语法。。。
2、BOM:browser object model
* 浏览器对象模型
3、DOM:document object model
* 文档对象模型
2、js与html结合方式 (两种)
1、 通过html标签
*
js代码
2、使用外部引入js文件方式
* 创建js文件
* <script type="text/javascript" src="js路径地址"></script>
* 当使用了外部引入方式,引入js之后,在script标签里面不能写js代码
* <script type="text/javascript" src="1.js"/>
* 使用 alert("要显示的内容");
3、js的原始数据类型和变量声明
* js的注释
- 单行注释 //
- 多行注释 /* */
* 原始数据类型
* Boolean:布尔类型 true false
- var flag = true;
* Number :数字类型
- var m = 1;
* String:字符串
- var str = "abc";
* Undefined:
- 表示变量声明,但是没有赋值
- var aa;
* Null:
- 表示引用类型为空
var date = null;
- 所有引用类型都是object
* 声明变量
- 任何的数据类型都是使用关键字 var
- typeof(变量名称):查看变量的类型
4、js的语句
* java里面语句
- 循环 for while do-while
- if() { } else {}
- switch() String类型在jdk1.7开始支持
* js里面的语句
- if else
* if(i == 3) {
} else {}
- 循环语句 for while do-while
* document.write(""); 在页面上显示内容
** write("<br/>"):可以写变量,写html代码
- switch语句:(条件没有类型的限制)
switch(条件) {
case 1:
break;
......
default:
}
5、案例:实现99乘法表
* document.write(“
//循环行
for(var i=1;i<=9;i++) {
document.write(““);
//循环列
for(var j=1;j<=i;j++) {
document.write(““);
}
//增加换行
//document.write(“
”);
document.write(““);
}
document.write(“
“); document.write(j+”*”+i+”=”+i*j+” ”); document.write(“ |
6、js的运算符
* i++ ++i
* js的字符串的加减操作
- var str = “123”;
- document.write(str+7);//字符串拼接 = 1237
- document.write(str-1);//做相减操作 = 122
* boolean类型的加减操作
- var flag = true;
//document.write(flag+1); //true 值1
- var flag1 = false;
document.write(flag1+1); //flase 值0
* 数字类型number操作(不区分整数和小数)
- var mm = 123;
//在java里面值 0
- document.write(123/1000*1000); //123
* &&和||区别
* &和|
7、js的数组
* 存很多值
** java里面定义数组 int[] arr = {1,2,”3”};不正确
* 三种定义方式
1、第一种 var arr = []; var arr = [1,2,3]; var arr = [1,"a",3];
2、第二种 var arr1 = new Array(3);传入一个参数 :表示定义了一个数组名称arr1,并且数组的长度是3
* arr1[0] = 1;
arr1[1] = 2;
arr1[2] = 3;
3、第三种 var arr2 = new Array(4,5,6);
* 表示定义一个数组名称arr2,并且数组里面的具体值是4 5 6
* js的数组里面有一个属性 length 查看数组的长度
8、js的函数(方法)
* java里面定义方法
- public void/int 方法名(参数列表) {
方法体;
返回值;
}
* js里面定义函数有三种方式
1、使用一个关键字 function
- 格式: function 方法名(参数列表) {
方法体;
//返回值可以有可以没有;
}
//参数列表部分不加var,直接写参数名称
* function add1(m,n) {
var sum = m+n;
//alert(sum);
return sum;
}
2、动态函数(不建议使用)
* 使用js内置对象 Function("方法的参数列表","方法体和返回值")
* var param = "a,b";
var methods = "var sum;sum=a+b;return sum;";
var aa = new Function(param,methods);
3、匿名函数
* function(参数列表) {方法体和返回值;}
* var bb = function(p,q) {
var sum = p+q;
return sum;
}
9、js的全局变量和局部变量
* 全局变量:在script里面定义的一个变量,这个变量在页面中都有效
* 局部变量:在方法内部定义一个变量,这个变量只能在方法内部使用
** ie调试方式:直接打开ie浏览器f12,出现控制台,看到js的错误信息
10、