样式表作用按照就近原则使用:
样式表分类:1.行内样式表(设置开始标签的style属性)优先于内嵌样式表,当属性发生冲突时
2.内嵌样式表(head内使用style标签
2.id选择器
在标签内部设置一个id属性在标签内部id属性前加上一个#号,在head中进行设置
#id_name{
属性值设置
}
3.类选择器
.类选择器名{ 属性值设置}
4.伪类选择器常用于设置超链接first-line 如p:first-line{伪类选择器一般有冒号,首行与其他行产生不一样的效果}
超链接伪类选择器:a:link,a:hover,a:active,a:visited
3.外部样式表.css文件 1.使用标签进行引用加载页面时没有加载样式表,当使用到样式表才去寻找制定的样式
2.@import url(url)与页面一起加载到缓存当中,占用资源,不建议使用该种方式,了解即可。
@import url(“styles/style.css”);
层:div 默认是上下排列使用float属性可使层排列在一行当中;
或者在样式表的body中设置text-align:center;
滤镜:
Javascript脚本
(netscape生产出的livescript 与java语法类似所以更改为javascript)
1.基于对象和事件驱动
2.弱类型语言java属于强类型语言
3.数据类型:整型、浮点型、字符、布尔、null、NaN(isNaN(参数))、undefined
4.../上层目录./根目录变量区分大小写
5.Script标签可以放在页面的任何位置,一般情况下放在,head标签中
6.定义变量不在任何函数中的变量称之为全局变量------在脚本中定义的任何函数中都可
以使用这些全局变量
7.函数定义有和没有返回值的函数
8.使用关键字function定义javascript函数(注意不能在参数中使用var)
9.常用javascript内置函数
A.alert
B.confirm 例如:关闭当前窗口var b=confirm(“确定关闭当前窗口”); if(b) window.opner=null;
close();
C.prompt(“输入数字”,100);
输入一个数字,输入运算符,输入令一个数字,弹出结果
D.eval(算数表达式) 将算术表达式直接运算出结果,返回
E.document.write();将参数显示到页面上,将页面上的内容覆盖掉,用量不是很大
10.事件当发生该事件时,执行方法中的内容
----方法一
Document.getElementByid(“tt”).onclick=testClick;
Function testClick(){
Alert(“执行该函数”);
}
方法二
Document.getElementById(“tt”).onclick=function(){方法体内容}
11.使用js获取表单当中的文本中的值
//var user=https://www.doczj.com/doc/9911878848.html,er.value; //通过document的表单的user的值
var user=document.forms[0].user.value;
alert(user);
12.With(document.form){
alert(user.value); //默认在此大括号范围内隐含的包含着一个document.form
alert(pass.value);
}
13.innerText与innerHtml的使用
if(){
div.style.display=”block”;
div.innerText=””
}
14.定时器setTimeOut()
15.历史对象history.forward; go(1)
History.back; go(-1)
使用脚本实现前进后退a→b→c 在b页面当中设置两个按钮控制前进和后退
16.位置对象实现页面跳转(实现类似于超链接在js控制当用户名密码都成立时,控制
跳转到下一个页面)
Js脚本书写方式如下:通过脚本实现页面的跳转
function userLocation(){
location.href=”c.html”;
}
17.屏幕对象的属性和方法
设置层居中,获取窗口高度和宽度的一半减去层高度和宽度的一半
18.窗口对象和方法
设置状态栏信息使用body标签的onload事件
19.表单对象
function openNew(){
window.open(“页面地址如c.html”,”打开新窗口的名字”,”规定新打开窗口的规格(窗口属性等状态栏长宽高等信息)”); 第三参数可以这样填写(”width=300,height=260,menubar=no,top=500”)
}
20.form对象
主要涉及到的知识点包括获取数据、判断空值、是否相等
对单选按钮的操作
For(var i=0;i<单选对象.length;i++){
If(单选对象[i].checked){
alert();
}
}
对于复选框的操作也单选按钮的操作同
onsubmit函数在调用的函数当中需要有return值,如果为false不提交,true提交
21.JSON对象
22.AJAX
23.ChangeImage
Function changeImage(){
Var ops=form.mySelect.options;
Var second=0;
For(var i=0;i If(ops[i].selected){ Second=sps[i].value; } } changeOperation(second); } Function changeOperation(s){ Var i=Math.round(Math.random(s)*8)+1;//设置图片的名称 Document.getElementById(“img”).src=”img/”+i+”.jpg”;//拼装src setTimeout(“change)Operation()”,s); } 24.function update(obj){ if(confirm(“确定删除本条记录?”)){ location.href=”servlet?empno=obj”; } } 25.onclick=”javascript:history.go(-1)”; 26.js脚本控制实现全选/不全选 onclick=”chooseAllOrNot();” 27.脚本实现function chooseAllOrNot(){ Var boxes=document.getElementById(“复选框id”); for(int i=0;i Boxed[i].checked?boxes[i].checked=false:boxes[i].checked=true; } } 常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown 【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit ( 父组件决定) hidden (隐藏) visible ( 显示) visibili ty:hidde n width 宽度 auto (自动决定) 数字 width:13 5 height 高度 auto (自动决定) 数字 height:1 00 z-index Z 轴高度(立体,是否在 另一个组件之上) auto (自动决定) 数字 z-index: 135 position 定位方式 absolute (绝对寻址-依窗口坐标,原点为父窗口左上角 ) relative (相对定位-以一般网页排列[后再根据坐标定位, 原点为定位后的位置) static (静态定位-以一般网页排列) position :absolut e top (对象的position 属 性须为absolute 或 relative ) 对象的Y 坐标(原点根 据postion 属性有所不 同) 数字 left (对象的 position 属性须为absolute 或 relative ) 对象的X 坐标(原点根 据postion 属性有所不 同) 数字 CSS选择器笔记 阮一峰整理 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.doczj.com/doc/9911878848.html, { background:#ff0; } https://www.doczj.com/doc/9911878848.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器 实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素 一、选择题 1.CSS是()的缩写。 A.C olorful S tyle S heets B.C omputer S tyle S heets C.C ascading S tyle S heets D.C reative S tyle S heets 2.引用外部样式表的格式是()。 A. 常用CSS样式属性CSS样式表
CSS选择器笔记
《CSS样式》习题