一.css
1.css的简介
- css: 层叠样式表
- 层叠:一层一层的
- 样式表:很多的属性和属性值
- 是页面显示效果更加好
- css将网页内容和显示样式进行分离,提高了显示功能
2.css和html的结合方式(四种)
(1).在每个html标签上面都有一个属性 style 把css和html结合在一起
A.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
</style>
</head>
<body>
<div style="background-color:red;color:yellow">
在每个html标签上面都有一个属性 style 把css和html结合在一起
</div>
</body>
</html>B.效果
(2).使用html的一个标签实现style标签 写在head里面
A.格式
<style type="text/css">
css代码;
</style>B.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
div{
background-color: red;
color: yellow;
}
</style>
</head>
<body>
<div>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</div>
</body>
</html>C.效果
因为颜色没变 所以效果和第一实现方式一样
(3).在style标签里面 使用语句(在某些浏览器下不起作用)
A.格式
@import url(css文件的路径);
- 第一步,创建一个css文件
<style type="text/css">
@import url(div.css);
</style>B.代码
css文件下的
div{
background-color:red;color:yellow;
}html文件下的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</div>
</body>
</html>(4).使用头标签 link,引入外部css文件
1.步骤
第一步,创建一个css文件
<link rel="stylesheet" type="text/css" href="div.css"/>2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
<div>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</div>
</body>
</html>注意： 第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式
优先级(一般情况) 由上到下 由外到内 优先级由低到高
后加载的优先级高
选择器名称 {属性名:属性值:属性名:属性值……}
3.css的基本选择器(三种)
(1).作用:要对哪个标签里面的数据进行操作
(2).标签选择器:使用标签名作为选择器的名称
A.格式
div{
background-color:gray;
color:blue;
}标签选择器上面都用到了 这里也就不再说了
(3).class选择器:每个html标签都有一个属性 class
A.格式
- <div class="haha">aaaaaaa</div>
.haha{
background-color:orange;
}(4).id选择器:每个html标签上面有一个属性 id
<div id="hehe">bbbbb</div>
#hehe{
background-color:#33330000;
}(5).优先级
style > id选择器 > class选择器 > 标签选择器
4.css的扩展选择器
(1).关联选择器
A.格式
<div><p>aaaaaaaaaa</p></div>B.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
div p{
background-color: red;
color: yellow;
}
</style>
</head>
<body>
<div><p>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</p>
</div>
</body>
</html>C.效果
(2).组合选择器
A.格式
<div>aaaa</div>
<p>ddddd</p>
把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p{
background-color:orange;
}B.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
div,p{
background-color: red;
color: yellow;
}
</style>
</head>
<body>
<div>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</div>
<p>
在每个html标签上面都有一个属性 style 把css和html结合在一起
</p>
</body>
</html>C.效果
(3).伪元素选择器(了解)
A.具体情况
css里面提供了一些定义好的样式,可以拿过来直接使用
比如超链接
超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
B.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
a:link{
background-color: yellow;//原始状态
}
a:hover{
background-color: blue;//悬停状态
}
a:active{
background-color: orange;//点击状态
}
a:visited{
background-color: black;//点击之后状态
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">超链接一</a>
</body>
</html>C.效果
就是超链接一四种状态颜色会变 具体要根据上面的设置
5.css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框
A.格式
border:2px solid green;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-rightB.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
#div1{
border: 2px solid green;
}
#div2{
border-top:2px solid red;
border-bottom: 5px solid yellow;
}
</style>
</head>
<body>
<div id="div1">在每个html标签上面都有一个属性 style 把css和html结合在一起</div>
<div id="div2">把div和p标签设置成相同的样式,把不同的标签设置成相同的样式</div>
<div id="div3">原始状态 鼠标放上去状态 点击 点击之后</div>
</body>
</html>C.效果
(2)内边距
A.格式
padding:20px;
padding:统一设置
上 padding-top
下 padding-bottom
左 padding-left
右 padding-rightB.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合方式</title>
<style type="text/css">
#div1{
padding: 20px;
border: 20px solid red;
}
#div2{
padding-left: 2px;
padding-top: 4px;
}
</style>
</head>
<body>
<div id="div1">在每个html标签上面都有一个属性 style 把css和html结合在一起</div>
<div id="div2">把div和p标签设置成相同的样式,把不同的标签设置成相同的样式</div>
<div id="div3">原始状态 鼠标放上去状态 点击 点击之后</div>
</body>
</html>C.效果
(3)外边距
A.格式
margin:统一设置
上 margin-top
下 margin-bottom
左 margin-left
右 margin-rightB.代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 2px solid red;
}
#div2{
margin: 20px;
}
#div3{
margin-left: 30px;
}
</style>
</head>
<body>
<div id="div1">aaaaaaaaaa</div>
<div id="div2">bbbbbbbbbb</div>
<div id="div3">ccccccccccccccc</div>
</body>
</html>C.效果
6.css的布局的漂浮(有些浏览器不支持)
float:
属性值
left： 文本流向对象的右边
right： 文本流向对象的左边
7.css的布局的定位
position:
属性值
absolute:
将对象从文档流中拖出
可以使用top,bottom等属性进行定位
relative:
不会把对象从文档流中拖出
可以使用top,bottom等属性进行定位
8.案例 图文混排案例
**图片和文字在一起显示
A.代码
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div{
width: 350px;
height: 300px;
border: 2px solid orange;
}
#div1{
float:left;//重点
}
</style>
</head>
<body>
<div id="div">
<div id="div1"><img src="1.jpg"/></div>//随便一张图片地址
<div id="div2">以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、
尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（
小小说）。按照表现的内容可分为科幻、公案、传奇、武侠、言情、同人、官宦等。按照体制可分为
章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。 </div>
</div>
</body>
</html>9.案例 图像签名
**在图片上显示文字
A.代码
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div2{
position: absolute;//重点
top:50px;
left:50px;
}
</style>
</head>
<body>
<div id="div1"><img src="1.gif" width="250" height="250"/></div>//图片路径
<div id="div2">以刻画人物形象为中心</div>
</body>
</html>二.Javascript基础
1.javaScript的简介
(1).javaScript性质
是基于对象和事件驱动的语言,应用于客户端
- 基于对象
- 提供好了很多对象,可以直接拿过来使用
- 事件驱动
- html做网站静态效果, javascript动态效果
- 客户端:
- 专门指的是浏览器
(2).js的特点
A.交互性
信息的动态交互
B.安全性
js不能访问本地磁盘的文件
C.跨平台性
java里面跨平台性,虚拟机
只要能够支持js的浏览器,都可以运行
(3).javascript和java的区别(雷锋和雷峰塔)
A.java是sun公司,现在oracle;js是网景公司
B.javaScript 是基于对象的,java是面向对象
C.java是强类型的语言,js是弱类型的语言 比如java里面 int i=”10”; js: var i=10;var m=”10”;
D.javaScript只需解析就可以执行,而java需要先编译成字节码文件,再执行
(4).javascript的组成
三部分组成
A.ECMAScript
ECMA: 欧洲计算机协会
由ECMA组织制定的js的语法,语句…..
B.BOM
broswer object model:浏览器对象模型
C.DOM
document object model:文档对象模型
2.js和html的结合方式(两种)
(1).使用一个标签 <script type="text/javascript"> js代码 </script>
(2).使用script标签,引入一个外部的js文件
创建一个js文件,写js代码
<script type="text/javascript" src="1.js"> </script> 注意:使用第二种方式时候,就不要在script标签里面写js代码了,不会执行
一般我们都是使用的是第一种 方便点
3.js的原始类型和声明变量
(1).java的基本数据类型
byte short int long float double char boolean
(2),定义变量 都使用关键字 var
(3).js的原始类型(五个)
string:字符串
var str="abc";
number:数字类型
var m=123;
boolean:true和false
var flag=true;
null
var date=new Date();
获取对象的引用,null表示对象引用为空,所有对象的引用也是object
undifined
定义一个变量,没有赋值
var aa;(4).typeof():查看当前变量的数据类型
4.js的语句
(1).java里面的语句
if判断
switch语句
循环 for while do-while
(2).js里面的这些语句
if判断语句
=:表示赋值
==:表示判断
switch语句
java里面支持数据类型 string支持吗？在jdk1.7开始支持
js里面都支持
switch(a){
case 5:
break;
case 6:
break;
default:
……..
}
循环语句 for while do-while
while循环
var i=5;
while(i>1){
alert(i);
i--;
}for循环
for(int i=0;i<=10;i++){}
for(var i=0;i<=5;i++){
alert(i);
}i++,++i和java里面一样
5.js的运算符
+= x+=y ==> x=x+y;
js里面不区分整数和小数
字符串的相加和相减的操作
var str=”123”;
相加和java一样 相减的时候则执行的是减法的运算提示NaN:表示不是一个数字
boolean类型也可以操作
如何设置成true 相当于这个值是1
如何设置成false 相当于这个值是0
== 和 === 区别
都做判断的==比较的只是值
=== 比较的值和类型引入知识
直接向页面输出的语句(可以把内容显示在页面上)
document.write("aaa");
document.write("<hr/>");可以向页面输出变量,固定值和html代码
6.99乘法表实现
(1).document.write里面是双引号 如果设置标签的属性需要使用单引号
(2).document.write可以输出变量,还可以输出html代码
7.js的数组
(1).什么是数组?
使用变量,var m=10;
java里面的数组 定义 int[] arr={1,2,3};
(2).js数组的定义方式(三种)
A:var arr=[1,2,3];var arr=[1,”4”,true];
B: 使用内置对象 Array对象
var arr1=new Array(5); //定义一个数字长度为5的数组
arr1[0]=”1”;
C: 使用内置对象 Array
var arr2=new Array(3,4,5); //定义一个数组 数组的元素是3,4,5
数组里面有一个属性 length: 获取到数组的长度
js数组可以存放不同的数据类型的数据
8.js的函数
(1).在java里面定义方法
public 返回类型void/int 方法名(参数列表){
方法体;
返回值;
}
public int add(int a,int b){
int sum=a+b;
return sum;
}(2).在js里面定义函数(方法)有三种方式
A.使用到一个关键字 function
function 方法名(参数列表){
方法体;
返回值可有可无(根据实际需要)
}B.匿名函数
var add = function(参数列表){
方法体和返回值;
}C.(用得少,了解)
使用到js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");9.js的全局变量和局部变量
全局变量: 在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
在方法外部使用,在方法内部使用,在另外一个script标签内使用
局部变量: 在方法内部定义一个变量,只能在方法内使用
如果在方法的外部调用这个变量,提示出错
SCRIPT5009: ” “未定义
注意:ie自带了调试工具,ie8及其以上的版本中,键盘上F12,在页面下方出现一个条
10.script标签应该放到的位置
建议把script标签放到
</body>后面
如果现在有这样一个需求:
在js里面需要获取到input里面的值,如果把script标签放到head里面会出现问题。
html解析是从上到下的,script标签放到的是head里面,直接在里面input里面的值,因为页面还没有解析到input那一行,肯定取不到
11.js的重载
什么是重载？ 方法名相同,参数列表不同
java里面有重载,肯定有
js里面是否有重载？
没有
扫一扫
1725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
