JAVAWeb（第一周）
CSS简介
CSS（Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式分离，提高了显示功能。
CSS与html的结合方式
（1）在每个html标签上面都有一个属性style，把css和html结合在一起
<div style="background-color:pink;color:green;">西安欧亚学院</div>
运行结果
（2）使用html的一个标签实现<style>标签，现在head里面
格式：
<style type="text/css">
css代码；
</style>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
background-color:blue;
color:red;
}
运行结果
（3）在style标签里面使用语句
@import url（css文件路径）；
-第一步，创建一个css文件
div{
background-color:black;
color:yellow;
}
-第二步，在头文件中使用
<head>
<style type="text/css">
@import url(div.css)
</style>
</head>
运行结果
（4）使用头标签link，引入外部css文件
- 格式： <link rel="stylesheet" type="text/css" href="css文件路径">
-第一步，创建一个css文件
div{
background-color:gray;
color:yellow;
}
-第二步，在头文件中使用
<head>
<link rel="stylesheet" type="text/css" href="div.css">
</head>
运行结果
注意：第三种结合方式有一些浏览器下不起作用，一般使用第四种方式！
CSS样式优先级和代码规范
*样式优先级
由上到下，由内到外。优先级由低到高。
-一般情况下，后加载的优先级高
*代码规范
选择器名称{ 属性名:属性值; 属性名:属性值;......}
-属性与属性直接用封号隔开
-属性与属性名直接用冒号连接
-如果一个属性有多个值的话，那么多个值用 空格 隔开
CSS的基本选择器
**要对那个标签里面的数据进行操作
（1）标签选择器
div{
background-color:gray;
color:yellow;
}
（2）class选择器
*每个html标签都有一个属性 class
-<div class="类名"> 进行操作的数据</div>
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div.haha{
background-color:yellow;
}
p.haha{
background-color:red;
}
</style>
</head>
<body>
<div class="haha">西安欧亚学院</div>
<p class="haha">物联网工程1701</p>
</body>
</html>
运行结果
（3）id选择器
*每个html标签上面都有一个属性标签 id
- <div id="hehe">hehehehe</div>
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
#hehe{
background-color:gray;
}
</style>
</head>
<body>
<div id="hehe">物联网工程</div>
<p id="hehe">物联网工程1701班</div>
</body>
</html>
运行结果
***优先级
style>id选择器>class选择器>标签选择器
css的扩展选择器
（1）关联选择器
*<div><p>先欧亚学院</p></div>
*设置div标签里面p标签的样式，嵌套在标签里面的样式
*div p{
background-color:green;
}
(2)组合选择器
*<div>1111</div>
*<p>2222</p>
*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
（3）伪元素选择器
*css里面提供了些定义好的样式，可以拿过来使用
*比如超链接
**超链接状态
原始状态 鼠标放上去状态 点击 点击之后
：link ：hover ：active ：visited
盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
border：2px solid blue；
粗细 样式 颜色（每个属性之间用 空格 隔开）
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding：统一设置
padding-top
padding-bottom
padding-left
padding-right
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid yellow;
}
#div1{
padding:20px
}
#div2{
padding-top:50px
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<div id="div2">bbbbb</div>
<div id="div3">ccccc</div>
</body>
</html>
运行结果
（3）外边距
margin：统一设置
margin-top margin-bottom margin-left margin-right
上外边距 下外边距 左外边距 右外边距
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div{
border:2px solid yellow;
}
#div2{
margin:20px
}
#div3{
margin-left:40px;
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<div id="div2">bbbbb</div>
<div id="div3">ccccc</div>
</body>
</html>
运行结果
css的漂浮布局
float：
**属性值
left： 文本流向对象的右边
right： 文本流向对象的左边
CSS的布局定位
position
** 属性值
-absolute：
***将对象从文档流中拖出来
***可以是top，bottom等属性进行定位
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div{
border:2px solid yellow;
width:90px;
height:100px;
}
#div1{
background-color:red;
}
#div2{
background-color:blue;
position:absolute;
top:80px;
left:10px;
}
#div3{
background-color:green;
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<div id="div2">bbbbb</div>
<div id="div3">ccccc</div>
</body>
</html>
运行结果
-relative：
***不会把对象从文档流中拖出来
***可以使用top，bottom等属性进行定位
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
div{
border:2px solid yellow;
width:90px;
height:100px;
}
#div1{
background-color:red;
}
#div2{
background-color:blue;
position:relative;
top:80px;
left:120px;
}
#div3{
background-color:green;
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<div id="div2">bbbbb</div>
<div id="div3">ccccc</div>
</body>
</html>
结果
案例 图文混排案例
**图片和文字一起显示
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
#imgtex1 {
width:400px;
height:300px;
border:2px dashed red;
}
#img1{
/*float:left;*/
float:right;
}
#tex1{
color:green;
}
</style>
</head>
<body>
<div id="imgtex1">
<div id="img1"><img src="15.jpg" width="300px",height="300px"></div>
<div id="tex1">西安欧亚学院是一所经国家教育部批准，以管理、经济为主，艺术、文学、教育、工学等协调发展的国际化应用型普通本科高校。
我们懂得学生的个性化特征，和当今市场经济最新鲜的变革，并且前瞻性地把握现代社会对人才的需求。
我们致力于培养独一无二的毕业生，使其具备专业才能、终身学习能力和批判性思维，以应对全球化的工作环境。</div>
</div>
</body>
</html>
运行结果
对数据进行操作，首先用div或者区域给包起来
案例 图像签名
<html>
<head>
<title>Insert title here</title>
<style type="text/css">
#tex2{
position:absolute;
top:30px;
left:30px;
color:green;
}
</style>
</head>
<body>
<div id="img2"><img src="15.jpg"></div>
<div id="tex2">西安欧亚学院</div>
</body>
</html>
运行结果
学习小结
1. css和html的四种结合方式
2. css的基本选择器（****）
*标签选择器 使用标签名称
*class选择器 .名称
*id选择器 #名称
***优先级 style>id>class>标签
3. css的扩展选择器
*关联选择器
-设置嵌套标签的样式 div p｛｝
*组合选择器
-不同标签具有相同的样式 div，p｛｝
*伪类元素选择器
*超链接状态
-原始：link
-悬停：hover
-点击：active
-点击之后：visited
4. 盒子模型
*边框 border：2px solid red；
上下左右
*内边距 padding：20px；
上下左右四个
*外边距 margin：20px；
上下左右四个
***对数据进行操作，需要把数据放进一个区域里边（div）
5. 布局的漂浮
float
-left：后面的div到右边
-right：后边的div到左边
6.布局的定位
position
-absolute
**从文档流中脱出
-relative
**不会从文档流中脱出
javascript
Javascript是基于对象和事件驱动的语言，应用于客户端
-基于对象：
**提供好了很多对象，可以直接拿来使用
-事件驱动：
**html做的网站静态效果，javascript为动态效果
-客户端：
专门指的是浏览器
js的特点
交互性：信息的动态交互
安全性：js不能访问本地磁盘
跨平台性：支持js的浏览器都可以运行
javascript与Java的区别：
（1）java是sun公司后来被oracle收购；javascript是网景公司；
（2）javaScript是基于对象；java是面向对象；
（3）java是强类型语言；js是弱类型语言；
（4）js只需要解析就可以执行，而java需要先编译成字节码文件，再执行；
javascript的组成
三部分组成
（1）ECMAScript
-ECMA：欧洲计算机协会组织定义js语法语句
（2）Bom
-broswer object model：浏览器对象模型
（3）Dom
-document object model：文档对象模型
js和 html的结合
第一种
- 使用标签<script tyep="text/javascript"> js代码</script>
第二种
- 使用script标签，引入一个外部的js文件
<script type="text/javascript" src="1.js">
</script>
**使用第二种方式的时候，就不需要再script标签里面写js代码，即使写了，也不会执行
js的原始类型和声明变量
js的五个原始类型
-string:字符串
var str="abc"
-number：数字类型
var num="123"
-boolean： true或者false
-null:获取对象的引用，null表示对象对象引用为空，所有对象的引用也是object
-undifined：定义一个变量，但是变量没有赋值
typeof（变量名）；查看当前变量的数据类型
js的语句
**if判断语句
<script type="text/javascript">
var a=10;
if(a==5){
alert("5");
}else{
alert("6");
}
</script>
**switch语句
<script type="text/javascript">
var b=5;
switch(b){
case 3:
alert("3")
break;
case 6:
alert("6")
break;
default:
alert("other");
}
</script>
**循环语句
-while循环
<script type="text/javascript">
var a=5;
while(a>1){
alert(a);
a--;
}
</script>
-for循环
<script type="text/javascript">
for(var a=1;a<20;a++){
alert(a);
}
</script>
js的运算符
+= ： x+=y相当于 x=x+y
js里面不区分整数和小数
**boolea类型也可以操作：
***如果设置成ture，相当于这个值为1
***如果设置成false，相当于这个值为0
==和===的区别：
==：只比较值
===：比较的值和类型
引入知识：
document.write(变量，值，html语句);
可以直接向页面输出的语句（把内容显示在页面上）也可以向页面输出变量，固定值和heml代码
案例：9*9乘法表
document.write("<table border='1' >");
for(var i=1;i<9;i++){
document.write("<tr>");
for (var j =1; j <= i; j++) {
document.write("<td>");
document.write(j+"*"+i+"="+i * j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>")
</script>
js的数组
定义方式
第一种：var arr=[1,2,3]; var arr=["4",true,3];(也可以)
js的数组里可以定义任何类型的数据
<script type="text/javascript">
var arr=[1,2,"asdasd"];
alert(arr);
</script>
结果
第二张：使用内置对象Array对象
var arr1=new Array(6); //定义一个数组长度为6的数组
arr[0]="1"; //从第0位开始赋1的值
var arr1=new Array(3);
arr1[0]="1";
arr1[1]="b";
arr1[2]="e";
alert(arr1);
结果
第三种：使用内置对象Array对象
var arr2=new Array(1,2,3)； //定义一个数组，其中的元素为1 2 3
var arr2=new Array(1,2,3,4,54);
alert(arr2);
结果
数组里面有一个属性 length：获取到数组的长度
js的函数
在js里面定义函数有三种方法
第一种：
<script type="text/javascript">
function f1() {
alert("warriors champion！！！");
}
f1();
function add1(a,b) {
sum=a+b;
alert(sum);
}
add1(4,4);
// 有返回值的效果
function add2(a,b,c) {
var sum1=a+b+c;
return sum1;
}
alert(add2(1,2,3));
</script>
第二种：匿名函数
格式：var 方法名=new function(参数列表){
方法体和返回值；
}
<script type="text/javascript">
var add=function (a,b) {
alert(a+b);
}
add(5,3);
</script>
第三种：使用js里面的一个内置对象Function（动态函数）
var add = new Function("参数列表","方法体和返回值")；
<script type="text/javascript">
var add=new Function("x,y","var sum;sum=x+y;return sum");
alert(add(2,5));
</script>
js的全局变量和局部变量
全局变量： 在script标签内定义一个变量，这个变量在页面js部分都可以使用
——可以在方法的外部使用，在方法的内部使用，在另一个script标签使用
局部变量：在方法内定义一个变量，这个变量只能在方法内部使用
——如果在方法外部调用这个变量，提示出错
script标签的位置
建议把script标签放在</body>后面。
