轻装上阵，安卓工程师之路---day02(CSS&JavaScript)

01 CSS选择器

CSS的语法

格式：选择器{ 属性：属性值; }

举例：h2{color : red; }

常见选择器:

标签选择器 h2{ }

类选择器 .a { } <h2 class=“a”> // 不能是数字，提倡

ID选择器 #a{ } <h2 id=“a”> // ID要唯一

组选择器 h1,h2{ }

父类选择器 p a{ } //p标签中的a标签

通用选择器 *{ }

伪类选择器 a:visited {}

---------------------------------------------------------------------------------------------------------------------------------------

02 CSS伪类选择器控制超链接样式

它们允许应用的样式用于文档不存在的结构上，或者是通过当前元素的状态甚至是文档自身的状态而推断的某些东西上。

常用伪类选择器：注意a可以更换为其他标签使用

a:link 指值元素没有被访问过的状态。

a:hover 指鼠标经过元素的状态。

a:active 指鼠标按下激活元素的状态

a:visited 指元素已经访问的状态。

---------------------------------------------------------------------------------------------------------------------------------------

03 CSS样式表属性及各个常用的属性

CSS 背景 background ：background-color,background-image,background-repeat

CSS 文本 Text ：text-align,vertical-align

CSS 字体 Font ：color,font-size,font-family,text-decoration,

CSS 列表 Lists ：list-style,list-style-image,list-style-type

CSS 边框 Borders ：border,border-color,border-style,border-left/right/top/bottom-style……

CSS 外补丁Margins ：padding,padding-left/right/top/bottom

CSS 内补丁Paddings ：margin,margin-left/right/top/bottom

---------------------------------------------------------------------------------------------------------------------------------------

04 CSS盒子模型

主要用于web页面的布局

常需要测定的参数：

padding 文字和边框的间距，内补丁

margin 边框和边框的间距，外补丁

width和height：各个容器的宽和高

Border ：边框

---------------------------------------------------------------------------------------------------------------------------------------

05 相对定位和绝对定位

这里我选择用W3C的解释，不想用老师的解释：

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative { position: relative; left: 30px; top: 20px;}

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative { position: absolute; left: 30px; top: 20px;}

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

---------------------------------------------------------------------------------------------------------------------------------------

06 JavaScript简介

JavaScript程序是由Unicode字符集编写的，每个字符和汉字都是采用2个字节进行编码，是网景公司开发出的一款免费用行于各大浏览器中的脚本语言，JavaScript不能单独运行，必须嵌入到HTML中方可运行，每个浏览器中都内置了JavaScript解析器，即只要你的浏览器中有JavaScript解析器，就能运行JavaScrpt，以下我将会简称JS。

JavaScript是一种基于对象和事件驱动的解释性的脚本弱类型语言，基于对象： JS这个语言中，本身就内置了一些直接可以用的对象，不用程序员创建对象，当然，你觉得这些对象不够用，你也可以创建对象。

事件驱动：程序员编写的代码，通常需要放在一个事件中，当事件引

发后，方可执行其它中的代码

解释性：代码不需要事先编译，而是每次由浏览器从上向下的一行行

解释执行，可以速度会慢

脚本：不能直接运行，必须嵌入到HTML中方可运行

弱类型：使用变量时，可以直接用，不必事先声明；返

之必须先声明后使用的变量的叫强类型，例如：C

JavaScript是基于对象，即其中还有函数的内容

Java是面向对象的

JavaScript通常用在Web编程的客户端

---------------------------------------------------------------------------------------------------------------------------------------

07 JavaScript用途

JavaScript适合于基于客户端的应用，

这时的客户端包含PC浏览器或移动客户端

不适合于大型服务器，且要求速度快的实时应用

即：

做一些小中型应用，且基于internet的开发，成本低效率高：PHP

做一些中大型应用，且基于internet的开发：JavaEE

于底层交互且速度快的应用：C/C++

---------------------------------------------------------------------------------------------------------------------------------------

08 JavaScript嵌入网页的三种方式

一）在HTML标签的事件中直接书写JS脚本

二）在<head>中书写JS脚本

三）将JS脚本放到独立的文本中，通过<script>标签引入，提倡

当<script>中没有内容时，你可以写成<script/>这种形式

注意，若采用第三种模式添加外部JS文件后，该标签内不能在添加js内容，但可以在后面添加一个空白js脚本标签，再添加js内容；

如：错误写法：标签内部inner文本部分内容无效：

<script type="text/javascript" src="itcast.js">

//当用script标签去引入第三方的js文件时，会忽略其中的JS脚本

//var str = "哈哈";

//window.alert(str);

</script>

可以再添加一个js标签：如

<script type="text/javascript">

//书写的都是JS代码

function goBaidu(){

window.alert("做好准备");

window.alert("迎接高薪");

}

</script>

还有一个问题需要注意：

多个JavaScript片段是共享的

<script> </script> 可放在网页任意位置，且一个页面中可放几个<script> </script> ，它们之间不同部分的方法与变量可以共享的。

---------------------------------------------------------------------------------------------------------------------------------------

09 常量与变量

注意：在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的

HTML都是大小写不敏感的

标准的JavaScript语法定义中是区分大小写

JavaScript表示字符串可以用单引号或双引号，若外部有双引号，内部最好用单引号代表字符串，避免报错。

常量就是直接书写的内容，例如：3.14,123,哈哈，

所有字符串常量都采用unicode编码，即2字节

JS中，字符串大小写大多是敏感的

建议代码具有一定的格式，可读性好

JS中字符串可以用单引或双引，定义标签符时，不要用保留字，

尽量做到见名知意

变量分局部和全局变量，在声明时，可以显示和隐藏声明，初学者

建议用显示声明，即先声明后使用

变量与定义方式

局部变量 :函数中定义

全局变量: 函数外定义

Javascript弱类型语言

变量使用前，可不定义（声明）

声明时无需指定数据类型.在执行时，动态确定

也可先声明，定义变量方式

隐式定义: 直接赋值

显式定义: 使用var

---------------------------------------------------------------------------------------------------------------------------------------

标识符

常用于表示函数、变量等的名称

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成

例如：_abc,$abc,abc,abc123是标识符，而1abc不是

JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

---------------------------------------------------------------------------------------------------------------------------------------

10 数据类型

JS类型可分为三大类

一）数值型

Number：可采用8,10,16,科学技术法表示，包含整数与浮点数

String：字符串常量首尾由单引号或双引号括起，必要时要用转义符，浏览器只认<br/>换行，警告框只认\n换行，Unicode的插入方法，可以用Unicode代表中文显示

Boolean：true=1，false=0

二）特殊型

Null：表示变量指定null，Null在程序中代表变量没有值

Undefined：表示变量的值暂不知道，Undefined代表变量的值尚未指定

二种类型不同，比较结果为false；返之为true，含义不同

数值+字符串=字符串

数值+-布尔=数值

布尔+-布尔=数值

字符串+布尔=字符串

NaN(Not A Number)

+这个符号有二层含义：一是数学运算，一是字符串连接

三）复合型 ：明天笔记有

---------------------------------------------------------------------------------------------------------------------------------------

11 运算符

除法，会有小数出现，其他与java相同

位运算替代*和/运算，<相当于*，>相当于/

异或二次相同的数，就是原数

=表示赋值

===比较内容 和 类型。即恒等

!==比较内容 和 类型。即不恒等

with(对象){

对象可以省略

}

---------------------------------------------------------------------------------------------------------------------------------------

12 语句

if-else

if-elseif-elseif-else

switch

for()

while()

do-while()

var arr = [1,2,3,4,5,6,7,8,9,0];

for(var value in arr){

document.write(value+"<br>");

}

---------------------------------------------------------------------------------------------------------------------------------------

重要代码赏析：

伪类选择器代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>伪类选择器控制超链接样式</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

/*未访问超链接的样式*/

a:link{

color:black;

text-decoration:none;

font-size:44px

}

/*鼠标移至到超链接的样式*/

a:hover{

color:red;

text-decoration:underline;

}

/*鼠标移至到超链接按下不动的样式*/

a:active{

color:orange;

text-decoration:underline;

}

/*超链接已经访问过的样式*/

a:visited{

color:#ff33cc;

text-decoration:underline;

}

</style>

</head>

<body>

<a href="#">点点我</a>

</body>

</html>

绝对定位与相对定位的案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>演示相对定位和绝对定位</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">

.first{

border-style:groove;

height:100px;

width:100px;

position:relative;

left:30px;

top:10px

}

.last{

border-style:groove;

height:100px;

width:100px;

position:relative;

left:30px;

top:30px

}

</style>

</head>

<body>

<div class="first">

哈哈

</div>

<div class="last">

呵呵

</div>

</body>

</html>

通过事件改变按钮文字源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>05_js.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function do(inputElement){

//修改按钮的文字

inputElement.value = "关闭";

}

</script>

</head>

<body>

<!-- this表示input标签或元素 -->

<input type="button" value="打开" style="font-size: 111px"

onclick="do(this)" />

</body>

</html>