方式1:内联样式表通过标签的style属性设置样式
[code]<span style="color:#00FF00 ;font-size: 100px;">
方式2:内部样式表在当前页面中使用的样式
通过head标签的style子标签导入
[code]<style>
#divId2{
background-color: #0f0;
}
</style>
方式3:外部样式表有独立的css文件

通过head标签的link子标签导入
例如:
[code] css:
#divId2{
background-color: #0f0;
}

html:
<link rel="stylesheet" href="css/1.css" type="text/css"/>

选择器★

id选择器

要求:
html元素必须有id属性且有值 <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值 #id1{...}
[code]		<style>
#d1{
color: red;
}
</style>
class选择器

要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}
[code]		<style>
.d1{
color: green;
}
</style>
元素选择器（标签名）

直接用元素(标签)名即可 xxx{...}
[code]
<style>
div{
color: red;
}
</style>
派生的选择器

属性选择器★

要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
[code]		<style>
input[type="text"]{
background-color: yellow;
}

input[type="password"]{
background-color: green;
}
</style>
后代选择器

选择器后代选择器{...} 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器
[code]		<style>
#d1 div{
color: red;
}

span{
background-color: #f00;
}

div span{
font-size: 1cm;
}
</style>
锚伪类选择器——注意顺序
[code]		<style>
a:link {color: #FF0000}	/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */
</style>
选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类元素
元素选择器:一种元素
属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)
若多个样式作用于一个元素的时候
不同的样式,会叠加
相同的样式,最近原则。如：字体颜色
若多个选择器作用于一个元素的时候
越特殊优先级越高 id优先级最高>属性选择器>class选择器>元素选择器

属性(了解)

字体

font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格
[code]		<style>
#div3{
font-family: "黑体";
font-size: 1cm;
font-style: italic;
}
</style>
文本

改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进

color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline——默认值
text-align:对齐文本

列表

list-style-type:设置列表项的类型例如:a 、1 、实心圆
list-style-image:设置图片最为列表项类型使用的时候使用 url函数 url("/i/arrow.gif");

背景

background-color:设置背景颜色
background-image:设置图片作为背景 url

尺寸

width:
height:

浮动

float: 可选值 left right

使用clear属性清除浮动：

Left ：清除左侧浮动

Right ：清除右侧浮动

Both ：清除两侧的浮动
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divCls{
background-color: #ff0;
border: 1px solid red;
height: 25px;
width: 25px;
float: left;
}
.cle{
clear: both;
}
</style>
</head>
<body>
<div class="divCls">1</div>
<div class="divCls">2</div>
<div class="divCls">3</div>
<div class="divCls">4</div>

<div class="cle"></div>
<div class="divCls">5</div>
<div class="divCls">6</div>
<div class="divCls">7</div>
<div class="divCls">8</div>

</body>
</html>
分类

clear:设置元素的两边是否有其他的浮动元素

值为:both 两边都不允许有浮动元素

display:设置是否及如何显示元素。

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。（用于将列表放到一行）
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: #ff0;
border: 1px dashed red;
height: 50px;
width: 50px;
}
#div0{
display: none;
}

#span0{
display: block;
}

h1{
display: inline;
}
</style>
</head>
<body>
<div >1</div>
<div id="div0">2</div>
<div >3</div>
<div >4</div>
<span>天佑中华</span>
<span id="span0">天佑中华</span>
<span>天佑中华</span>
<hr />
<h1>热门商品</h1>你好啊
</body>
</html>

框模型(理解)

一个元素外面有padding(内边距) border(边框) margin(外边距)

padding:元素和边框的距离——内容填充时的边距
margin:元素最外层的空白——元素之间的距离

上面这三个属性都有简写的属性

若设置大小的时候四个值:顺序上右下左（顺时针）（没有与对面相同——上下，左右配对）
padding:10px 10px 10px 10px
若只写一个的话代表四个边使用同一个值 padding:10px
若只写两个个的话代表四个边使用同一个值 padding:10px 20px
若只写三个个的话代表四个边使用同一个值 padding:10px 20px 30px

border(边框)

还可以设置颜色风格
简写属性:
border:宽度风格颜色;
[code]border:5px solid red;
solid:实线
dashed:虚线
double:双实线
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
div{
background-color: #ff0;
width: 150px;
height: 150px;
float: left;

border: 10px solid red;
margin: 50px 25px;
padding: 10px 20px 30px;
}
</style>
</head>
<body>
<div>123</div>
<div>123</div>
</body>
</html>

扩展: 颜色取值

英文取值：

color：red

十六进制数：

color：#ff0000

Rgb方式：

color：rgb(255,0,0)

javascript

俗称 js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型（不需定义数据类型）、基于原型的语言、事件驱动型，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

组成部分:

ECMAScript:js基础语法(规定关键字运算符语句函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型

作用:

修改html页面的内容
修改html的样式
完成表单的验证

注意:

js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js

JS的输出

alert()

向页面中弹出一个提示框！！

innerHTML:

向页面的某个元素中写一段内容，将原有的东西覆盖

document.write();

向页面中写内容

js和html整合

方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入

js中变量声明

var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略

js的数据类型

原始类型:(5种)
Null
String
Number
Boolean
Undefined

通过 typeof 运算符可以判断一个值或者变量是否属于原始类型。

若属于原始类型,他还可以判断出属于那种原始类型
方法：typeof 变量|值;
若变量为null,使用typeof弹出的值 object

使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
[code]<script>
//类型覆盖
var age=18;
age="hello";
age=true;
alert(typeof age);

//Undefined类型
var bisdfa;
alert(typeof bisdfa);

//object类型——null为对象的占位符
var username=null;
alert(typeof username);

//object类型——对象
var s=new String();
alert(typeof s);
</script>

引用类型: var s=new String();

js:事件驱动函数

函数定义——1

方式1:
function 函数名(参数){
函数体;
}

[code]		<script>
function add(a,b){
alert(a+b);
}

//add(2,20);
</script>

注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数)

js中的事件
js对象——event
常见的事件:

单击: onclick

表单提交: onsubmit ——加在form表单上的 οnsubmit="return 函数名()" 注意函数返回值为boolean类型

页面加载: onload

js事件和函数的绑定——1

方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>

[code]		<script>
function btnCli(){
alert(44944);
}

function init(){//body 中的事件
alert("页面加载成功");
}

</script>

<body onload="init()">
<input type="button" value="点击我试试" onclick="btnCli()">

</body>

js获取元素

方式1:
var obj=documnet.getElementById("id值");

获取元素的value值

obj.value;

获取元素的标签体中的内容

obj.innerHTML;

[code]		<script>
function btnCli(){
//获取id为btn的元素
var obj=document.getElementById("btn");

//获取value属性
alert(obj.value)
}
</script>

<body>
<input value="确定" id="btn" type="button" onclick="btnCli()"/>
</body>

简单表单校验案例

[code]<!-- 案例2-步骤分析: -->
<!-- 1.先有一个表单 -->
<!-- 2.在form上添加一个事件 onsubmit="return checkForm()" -->
<!-- 3.编写checkForm这个方法 -->
<!-- 4.获取每个表单子标签的内容 -->
<!-- 5.判断是否满足要求, -->
<!-- 若满足,不用管他 -->
<!-- 若不满足,表单不能提交,返回false,且提示信息. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkForm(){

//获取用户名及其内容
var usernameObj=document.getElementById("username");
//2.获取值
var username=usernameObj.value;
//判断value是否为空 若为空不能提交表单,
if(username==null || username == ""){
//添加提示信息
alert("用户名不能为空");

//必须要有返回的 Boolean类型
return false;
}

//获取密码及其内容
//1.获取密码元素
var pwdObj=document.getElementById("password");

//2.获取密码的值
var pwdValue=pwdObj.value;

//3.判断
if(pwdValue==null || pwdValue==""){
alert("密码不能为空");

//必须要有返回的 Boolean类型
return false;
}

//必须要有返回的 Boolean类型
return true;
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
姓名:<input name="username" id="username"/><br>
密码:<input type="password" name="password" id="password"><br>
<input type="submit" value="保存"/>
<input type="reset" />
</form>
</body>
</html>

函数定义——2

方式1:
function 函数名(参数){
函数体;
}

方式2:
var 函数名=function(参数){
函数体;
}

js事件和函数的绑定——2

方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>
方式2:
给元素派发事件

document.getElementById("id值").οnclick=function(参数){....}

document.getElementById("id值").οnclick=函数名——没有参数

注意:
内存中应该存在该元素才可以派发事件

a.将方式2的js代码放在html页面的最下面——解释型语言，要在id定义之后
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var  btn2cli=function(){
alert("244944");
}
</script>
</head>
<body onload="init()">
<input type="button" value="点击试试2" id="btn2">
</body>
<script>
//事件派发——函数名派发
document.getElementById("btn2").onclick=btn2cli;
</script>
</html>
b.在页面加载成功之后在运行方式2的js代码 onload事件.
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function init(){//body 中的事件
//事件派发——函数名派发
document.getElementById("btn2").onclick=btn2cli;
}
var  btn2cli=function(){
alert("244944");
}
</script>
</head>
<body onload="init()">
<input type="button" value="点击试试2" id="btn2">
</body>
</html>

bom（Browser浏览器对象）中window对象的定时器方法

定时器

var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后只执行一次函数

清除定时器:
clearInterval(id);
claerTimeout(id);

String对象

原始类型的String是一个伪对象可以直接调用String类对象的方法
substring(0,endIndex);

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var s="我们的明天更加美好!";//字符串
var i=0;
var divObj;

function init(){
divObj=document.getElementById("divId");

//document.write(s);//写在页面上

setInterval(show,200);//周期定时器
}

//往div中写内容
function show(){
i++;
var s_=s.substring(0,i);
//往div中设置内容
divObj.innerHTML=s_;

//当字符串写完的时候 重新开始
if(i==s.length){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div id="divId"></div>
</body>
</html>

图片轮播案例

[code]			<!--轮播图-->
<div class="lunbo">
<img id="luboid" src="../img/1.jpg"/>
</div>

<script>

var i=1;

function init(){
//创建一个定时器
setInterval(changeImage,1000);
}

//更改图片
//<img id="luboid" src="../img/1.jpg"/>
function changeImage(){
//获取图片元素
var imgObj=document.getElementById("luboid");
i++;
//修改图片元素的src属性
imgObj.src="../img/"+i+".jpg";

//当i>3的时候 重置i
if(i>=3){
i=0;
}
}
</script>

补充

运算符

比较运算符: > 、>= 、< 、<= ——无等号 =

若两边都是数字和java一样
若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>"2"
若一边为数字,另一边为字符串,返回一个false 3>"hello"——无法比较
两边都是字符串的时候,比较ascii

2. 等性运算符 == 、===

== :只判断值是否相同
===:不仅判断值是否相同,还要判断类型是否相同
[code]		<script>
var s=66;
var i="66";

alert(s==i);//true
alert(s===i);//false
</script>

语句

if语句和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)

总结

1.css和html整合
方式3种
2.css中选择器:
id class 元素
属性后代
3.js
js和html整合
方式两种
4.变量定义
5.函数定义
2中格式
6.事件
onclick onload onsubmit
7.事件和函数的绑定
2中方式
8.定时器 2种
9.for while if

附：相关代码和文档

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航