3.基本语法:
4.基本样式表:
属性名称
含义
取值范围
font-family
使用什么字体
所有的字体
font-style
字体是否斜体
Normal、italic、oblique
font-variant
是否用小体大写
Normal、small-caps
font-weight
字体的粗细
Normal、bold、bolder、lithter等
font-size
字体的大小
Absolute-size、relative-size、length、percentage
属性
含义
取值范围
Color
定义前景色
颜色
Background-color
定义背景色
颜色
Background-image
定义背景图案
路径
Background-repeat
重复方式
Repeat-x、repeat-y、no-repeat
Background-attachmen
设置滚动
Scroll、Fixed
Background-position
初始位置
Percentage、length、top、left、right、bottom等
属性
含义
取值范围
Word-spacing
单词之间的间距
Normal <length>
Letter-spacing
字母之间的间距
Normal <length>
Text-decoration
文字的装饰样式
None|underline|overline|line-through|blink
Vertical-align
垂直方向的位置
Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Text-transform
文本转换
Capitalize|uppercase|lowercase|none
Text-align
对齐方式
Left|right|center|justify
Text-indent
首行的缩进方式
<length>|<percentage>
Line-height
文本的行高
Normal|<number>|<length>|<percentage>
属性
含义
取值范围
Margin-top
外边距顶端边距
Length|percentage|auto
Margin-right
外边距右侧边距
Length|percentage|auto
Margin-bottom
外边距底端边距
Length|percentage|auto
Margin-left
外边距左侧边距
Length|percentage|auto
Padding-top
内边距顶端边距
Length|percentage
Padding-right
内边距右端边距
Length|percentage
Padding-bottom
内边距底端边距
Length|percentage
Padding-left
内边距左端边距
Length|percentage
属性
含义
取值范围
Border-top-width
顶端边框宽度
Thin|medium|thick|length
Border-right-width
右侧边框宽度
Thin|medium|thick|length
Border-bottom-width
底端边框宽度
Thin|medium|thick|length
Border-left-width
左侧边框宽度
Thin|medium|thick|length
Border-width
一次定义宽度
Thin|medium|thick|length
Border-color
设置边框颜色
Color
Border-style
设置边框样式
None|dotted|dash|solid等
Border-top
一次定义顶端
Border-top-width|color等
Border-right
一次定义右侧
Border-top-width|color等
Border-bottom
一次定义底端
Border-top-width|color等
Border-left
一次定义左侧
Border-top-width|color等
属性
含义
取值范围
Width
定义宽度属性
Length|percentage|auto
Height
定义高度属性
Length|auto
Float
文字环绕
Left|right|none
Clear
哪一边环绕
Left|right|none|both
属性
含义
取值范围
Display
定义是否显示
Block、inline、list-item、none
White-space
怎样处理空白
Normal、pre、nowrap
List-style-type
加项目编号
Disc、circle、square等
List-style-image
加图案
<url>|none
List-style-position
第二行起始位置
Inside、outside
List-style
一次定义列表
<keyword>|<position> |<url>
Cursor
鼠标样式
Auto、Crosshair 、efault、Hand、Move、e-resize、Ne-resize 、Nw-resize、n-resize、Se-resize、Sw-resize、s-resize、w-resize、Text、Wait、Help
三、div+css+javascript
1、定义:可以自定义的切换效果,通过不同的事件监听来改变style属性
2.javascript编写规范:分为外部js和内部js
内部js编写格式:<script type="text/javascript">alert(1);</script>
外部js文件编写格式:<script type="text/javascript src="js文件路径"></script>
3.javascript基本语法:
定义变量的基本格式:var 变量名 = 字面量(定义字面量类型全部都用var关键字声明)
注释的基本格式:单行注释以双斜杠开头://
多行注释以单斜杠星号开头,以星号单斜杠结尾: /*......*/ 函数的基本定义格式:function 函数名(参数列表){函数体} var 变量名 = function(参数列表){函数体} var 变量名 = new function(参数1,参数2,函数体); javascript数据类型:原始数据类型和引用数据类型 五个原始数据类型:undefined、null、boolean、number、string 一个复杂数据类型:object,也属于原始数据类型 自定义类引用类型 typeof和instanceof判断 typeof判断变量的具体类型,返回类型仅有如下几种:number,boolean,string,function,object,undefined(所有引用类型通过type校验都属object) instanceof比typeof更精确到具体复杂类型 javascript核心对象: 数组对象(Array):用于存储一类型的数据 (定义数组var 变量名 = new Array() var 变量名 = [值,值,值......]) Boolean对象:Boolean对象表示true或者false( 注意:值为0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false ) 日期对象(Data):可以获取当前日期时间 数学运算对象(Math):可以用于执行数学运算任务 数学对象(Number):可以是整数、小数或者科学计数 字符串对象(String):可以用单引号可以或者双引号引起来 全局函数对象(Function):包括顶层函数和顶层属性用于提供调用 时间对象(Event):时间通常与函数配合使用,这样可以通过事件来驱动函数执行 获取窗体宽度:document.documentElement.clientWidth 获取窗体高度:document.documentElement.clientHeight 循环调用方法:setInterval 停止循环调用:clearInterval •获取键盘事件:document.οnkeydοwn=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
var code = e.keyCode;
}
•鼠标事件document.onmousemove =function(event){
e= event|| window.event;
var x = e.pageX || e.clientX;
var y = e.pageY || e.clientY;
};
dom对象 节点对象属性: fristChild 指向childNode列表中的第一个节点 lastChid 指向最后一个 parentNode 返回给定一个父节点 childNodes 返回所有的子节点的列表 innerHTML 向节点中插入文本内容 节点对象方法: createElement("tagname") 创建一个元素节点 createTextNode("text") 创建一个文本节点 appendChild(node) 将node添加到childNodes末尾 removeChild(node) 从childNodes中删除 replaceChild(newnode,oldnode) 在childNodes中的oldnode替换成newnode insertBefore(newnode,refnode) 在childNodes中的refnode之前插入newnode document对象方法: getElementById() 根据节点对象的id属性来获取当前节点的对象 getElementsByName 根据节点对象的name属性来获取当前节点的对象 getElementsByTagName()根据节点对象的标签名来获取当前节点对象 write() 往html文档中写入html代码 事件添加: 行内模式:οnclick=函数名() 事件绑定模式:window.οnlοad=function(){ obj.οnclick=function(){函数体} }