第3天(就业班) css样式的引入与选择、css样式、盒子模型、定位、变量、运算符、控制流程语句
2017-01-05 17:06
239 查看
1.css样式的引入与选择器
1.1 css的概念l 引题：
• 网站中的所有页面的标题都是黑色
• 老板需要将页面中的所有的标题改为红色
l 定义：
• Cascade Style Sheet 层叠样式表
l 优势：
• 使得页面的结构和表现分离
1.2填写css代码的方式
编写css代码的方式：
第一种： 在style标签中编写css代码。 只能用于本页面中，复用性不强。
格式 ：
<styletype="text\css">
编写css的代码。
</style>
例子：
<styletype="text\css">
a{
color:#F00;
text-decoration:none;
}
</style>
第二种： 可以引入外部的css文件。 推荐使用。
方式1： 使用link标签。 推荐使用...
格式：
<linkhref="css文件的路径" rel="stylesheet">
例子： <link href="1.css"rel="stylesheet"/>
方式2：使用<style>引入
格式：
<styletype="text/css" >
@import url("css的路径");
</style>
例子：
<styletype="text/css" >
@import url("1.css");
</style>
第三种方式：直接在html标签使用style属性编写。 只能用于本标签中，复用性较差。 不推荐使用。
例子：
<astyle="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>
1.3 css的优先级
• 行内样式 > 内部样式 > 外部样式 就近原则
1.4 Link标签的属性：
rel定义当前文档与目标文档之间的关系。
rev定义目标文档与当前文档之间的关系。
Link和@import的区别：
隶属上的差别
link属于HTML标签，而@import完全是CSS提供的一种方式。
@import次数限制
@import只能引入31次css文件。
加载顺序的不同
当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。
兼容性上的差别
由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题
使用DOM控制样式时的差别
当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
1.5 css选择器
l CSS的语法
• 格式：选择器{ 属性：属性值; }
• 举例：h2{color : #0F0; }
l 常见选择器
选择器： 选择器的作用就是找到对应的数据进行样式化。
1.标签选择器： 就是找到所有指定的标签进行样式化。
格式：
标签名{
样式1；样式2....
}
例子：
div{
color:#F00;
font-size:24px;
}
2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。
格式：
.class的属性值{
样式1；样式2...
}
例子：
.two{
background-color:#0F0;
color:#F00;
font-size:24px;
}
类选择器要注意的事项：
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。
3. ID选择器： 使用ID选择器首先要给html元素添加一个id的属性值。
ID选择器的格式：
#id属性值{
样式1；样式2...
}
id选择器要注意的事项：
1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
2. ID的属性值也是不能以数字开头的。
3. ID的属性值在一个html页面中只能出现一次。
4. 交集选择器： 就是对选择器1中的选择器2里面的数据进行样式化。
选择器1 选择器2{
样式1，样式2....
}
例子：
.two span{
background-color:#999;
font-size:24px;
}
5. 并集选择器： 对指定的选择器进行统一的样式化。
格式：
选择器1,选择器2..{
样式1；样式2...
}
span,a{
border-style:solid;
border-color:#F00;
}
6. 通过选择器:
*{
样式1；样式2...
}
2.常用的css样式
2.1伪类选择器伪类选择器就是对元素处于某种状态下进行样式的。
它们允许应用的样式用于文档不存在的结构上，或者是通过当前元素的状态甚至是文档自身的状态而推断的某些东西上。
• a:link 指值元素没有被访问过的状态。
• a:visited 指元素已经访问的状态。
• a:hover 指鼠标经过元素的状态。
• a:active 指鼠标按下激活元素的状态
伪类选择器的应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >
table{
background-color:#CCC;
border-collapse:collapse;
border:3px;
}
tr:hover{
background-color:#06F;
}
</style>
<body>
<table border="1px" width="400px" height="300px" align="center" >
<tr>
<th>姓名</th>
<th>成绩</th>
<th>人品</th>
</tr>
<tr>
<td>张三</td>
<td>98</td>
<td>差</td>
</tr>
<tr>
<td>李四</td>
<td>50</td>
<td>极好</td>
</tr>
<tr>
<td>综合测评</td>
<td colspan="2">不错</td>
</tr>
</table>
</body>
</html>
2.2 操作背景的属性
body{
/*background-color:#CCC; 设置背景颜色*/
background-image:url(2.jpg);
background-repeat:no-repeat; /* 设置背图片是否要重复 */
background-position:370px 100px; /* 设置背景图片的位置， 第一个参数是左上角的左边距， 第二个参数是左上角的上边距 */
}2.3 操作文本的属性
div{
color:#F00;
font-size:16px;
line-height:40px;
letter-spacing:10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}2.4 操作表格的属性
table{
/*border-collapse:collapse; 合并表格的边框*/
border-spacing:20px; /* 设置单元格的边框与表格的边框距离*/
table-layout:fixed;
}2.5 操作边框的属性
div{
width:100px;
height:100px;
border-style:dotted solid double ; /* 设置边框的样式 上 右 下 左*/
border-color:#F00;
border-bottom-color:#0FF;
border-top-width:100px;
}3.盒子模型
盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。盒子模型主要是用于操作内边距(padding)与外边距（margin）
4.定位
相对定位： 相对定位是相对于元素原本的位置进行移动的。使用方式： position:relative;
#box_relative { position: relative; left: 30px; top: 20px; }
绝对定位： 绝对定位是相对于整个页面而言。
position:absolute;
l #box_relative { position:absolute; left: 30px; top: 20px; }
固定定位：
position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。
top:380px;
left:1000px;
5.JavaScript的历史
Netscape 发明了 JavaScript
JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端，由服务器去检测的。在刚刚普及的电话线调制解调器时代，对用户是一种考验，著名的Netscape Navigator（早期浏览器） 通过引入JavaScript来解决该问题
随着互联网的流行，网页已经不断变得更大和复杂，如果用户想要注册表单，需要直接将表单提交到服务器进行验证，需要和服务器进行多次的往返交互，例如，用户注册一个表单，点击提交按钮，等待30秒服务器返回处理后，返回的是用户名不符合规则。这种用户体验是很不友好的。此时的Netscape（网景）开始着手解决这个问题。
Netscape在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。后来Netscape和Sun公司合作，所以最后Netscape 与 Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用
Java 这个因特网时髦词汇，此后JavaScript 从此变成了因特网的必备组件。
三足鼎立
微软进军微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。
标准化
1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义” 。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。随后，国际标准化组织及国际电工委员会（ISO/IEC）也采纳
ECMAScript 作为标准。
从此，Web 浏览器就开始努力将 ECMAScript 作为 JavaScript 实现的基础。
JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。
注：
javascript运行必须依赖于宿主环境语言，即页面语言HTML。
是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。
浏览器中默认内置了javascript的解释器程序。
常见的脚本语言：
ECMASCRIPT主要进行所有脚本语言的标准制定。
JavaScript
JScript
VBScript
ActionScript
JavaScript是基于对象和事件的脚本语言。
JavaScript的特点
1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）
JavaScript与Java不同
1. javascript是属于网景公司产品， java是sun公司的产品。
2. javascript是基于对象的语言，java是面向对象的语言。
3. javascript是解释型语言，java是解释、编译型语言。
4. javascript是弱类型语言， java 是强类型语言。
6.变量的声明与字符串转数字
java中声明变量 的时候必须要明确该变量的数据类型。
javascript声明变量不需要明确是何种数据类型， 任何的变量都是使用一个关键字var去声明即可。
JavaScript的引入方式与引入设置
向HTML页面插入JavaScript的主要方法，就是使用<script元素>。使用<script>元素的方式有两种：直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。
1. JS代码存放在标签对<script>．．．</script>中。
2. 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签中必须加入type属性。
内部：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在HTML中使用JavaScript</title>
</head>
<body>
<h1>在页面中嵌入JavaScript</h1>
<script type="text/javascript">
window.document.write("hello,world");
</script>
</body>
</html>外部：
格式：
<script src="1.js"type="text/javascript"></script>
注意：
1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了
注意：
1、页面上可以有多个<script>标签
2、<script>标签按顺序执行
3、<script>标签可以出现在任意的页面位置
4、<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。
javascript常用的函数：
alert("显示的内容..") ; 弹出框
document.write("数据") ; //向页面输出数据...
JavaScript的注释
Java： // /* */ /** */
HTML： <!-- -->
CSS： /* */
JavaScript：
ECMAScript注释与 Java语言的注释相同
ECMAScript借用了这些语言的注释语法。
有两种类型的注释：
单行注释以双斜杠开头（//）
多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）
声明变量
格式：
var 变量名 = 数据;
声明变量要注意的事项：
1. 在javascript中声明变量是 使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
4. 声明变量的时候可以省略var关键字，但是不建议省略。
javascript的数据类型：
typeof 查看变量的数据类型。
使用格式：
typeof 变量名
javascript的数据类型：
number 小数与整数
string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
boolean 布尔数据类型，
undefined undefined代表该变量没有定义。
document.write("10数据类型是"+(typeof10)+"<br/>");
document.write("3.14数据类型是"+(typeof3.14)+"<br/>");
document.write("a数据类型是"+(typeof'abc')+"<br/>");
document.write("abc数据类型是"+(typeof "abc")+"<br/>");
document.write("abc数据类型是"+(typeoftrue)+"<br/>");
document.write("a变量数据类型是"+(typeofa)+"<br/>");
将字符串转换成数字
parseInt() 可以把一个字符串转换成整数。
parseFloat() 可以把一个字符串转换成小数。
var a = "12";
a = 12.64;
a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
a = "a123"; // NaN not a number(不是一个数字)
a = "012"; /* 12 如果首位是0，那么就想祛除0再进行转换。*/
a = "0x10"; /* 如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的。 */
var b = parseInt(a);
document.write("结果："+b+"<br/>");
var c= "3.14";
c = "10"; // 如果是一个字符串是整数的，那么使用parseFloat还是转换 成整数 。
c = "100a";
c = "abc123";
c = parseFloat(c);
document.write("结果："+c+"<br/>");
javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
is not a muber 不是一个数字。
不是一个数字返回true，是一个数字返回false.
document.write(isNaN("123")+"<br/>");
document.write(isNaN("abc123"));
7.运算符、控制流程语句
加法运算符
加法运算符由加号（+）表示：
ECMAScript 中的加法也有一些特殊行为：
某个运算数是 NaN，那么结果为 NaN。
字符串拼接
如果两个运算数都是字符串，把第二个字符串连接到第一个上。
如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。
例如：
var result = 5 + 5; //两个数字
alert(result); //输出 "10"
var result2 = 5 + "5"; //一个数字和一个字符串
alert(result); //输出 "55"
注意:
var a = 5;
var b = true;
alert(a + b);//6
注意：变量是布尔类型的时候，true=1, false=0;
var a = 5;
var b = false;
alert(a + b);//5
乘法运算符
乘法运算符由星号（*）表示，用于两数相乘。
ECMAScript 中的乘法语法与 Java语言中的相同：
注释：如果运算数是数字，那么执行常规的乘法运算，即两个正数或两个负数为正数，两个运算数符号不同，结果为负数。
除法运算符
除法运算符由斜杠（/）表示，用第二个运算数除第一个运算数：
var iResult = 88 /11;
注意:
var a = 10;
var b = 3;
alert(a / b); //3.3333333333333335
7比较
比较运算符小于、大于、小于等于和大于等于执行的是两个数的比较运算
var bResult1 = 2 > 1 //true
var bResult2 = 2 < 1 //false
比较数字和字符串
var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个字符串在比较的时候 比较的是两个字符串 对应的字符顺序.
注意： 如果字符串与比较，会把字符串转成数字再进行比较。
如果把某个运算数改为数字，那么结果就不一样了：
var bResult = "25" < 3;
alert(bResult); //输出 "false"
这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。
无论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。
7.1逻辑运算符
&& 与
|| 或
! 非
逻辑 AND 运算符
在 ECMAScript 中，逻辑 AND 运算符用双和号（&&）表示：
var bTrue = true;
var bFalse = false;
var bResult = bTrue && bFalse;
与 Java 中的逻辑 AND 运算相似，ECMAScript 中的逻辑 AND 运算也是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数。对于逻辑 AND 运算来说，如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true。
考虑下面的例子：
var bTrue = true;
var bResult = (bTrue && bUnknown); //发生错误
alert(bResult); //这一行不会执行
这段代码在进行逻辑 AND 运算时将引发错误，因为变量 bUnknown 是未定义的。变量 bTrue 的值为 true，因为逻辑 AND 运算将继续计算变量 bUnknown。这样做就会引发错误，因为 bUnknown 的值是 undefined，不能用于逻辑 AND 运算。
逻辑 OR 运算符
ECMAScript 中的逻辑 OR 运算符与 Java 中的相同，都由双竖线（||）表示
var bTrue = true;
var bFalse = false;
var bResult = bTrue || bFalse;
下面的真值表描述了逻辑 OR 运算符的行为：
运算数 1
运算数 2
结果
true
true
true
true
false
true
false
true
true
false
false
false
与逻辑 AND 运算符一样，逻辑 OR 运算也是简便运算。对于逻辑 OR 运算符来说，如果第一个运算数值为 true，就不再计算第二个运算数。
逻辑 运算符NOT。
在 ECMAScript 中，逻辑 NOT 运算符与Java 中的逻辑 NOT 运算符相同，都由感叹号（!）表示。
通常，该运算符用于控制循环：
var bFound = false;
var i = 0;
while (!bFound) {
if (aValue[i] == vSearchValues) {
bFound = true;
} else {
i++;
}
}
7.2赋值运算符
简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。
例如：
var iNum = 10;
复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号（=）实现的。这些赋值运算符是下列这些常见情况的缩写形式：
var iNum = 10;
iNum = iNum + 10；
可以用一个复合赋值运算符改写第二行代码：
var iNum = 10;
iNum += 10；
每种主要的算术运算以及其他几个运算都有复合赋值运算符：
乘法/赋值（*=）
除法/赋值（/=）
取模/赋值（%=）
加法/赋值（+=）
减法/赋值（-=）
7.3三目
运算符是 ECMAScript 中功能最多的运算符，它的形式与 Java 中的相同。
variable = boolean_expression ? true_value : false_value;
该表达式主要是根据 boolean_expression 的计算结果有条件地为变量赋值。如果 Boolean_expression 为 true，就把 true_value 赋给变量；如果它是 false，就把 false_value 赋给变量。
例如：
var iMax = (iNum1 > iNum2) ? iNum1 : iNum2;
在这里例子中，iMax 将被赋予数字中的最大值。表达式声明如果 iNum1 大于 iNum2，则把 iNum1 赋予 iMax。但如果表达式为 false（即 iNum2 大于或等于 iNum1），则把 iNum2 赋予 iMax。
8.控制流程语句
2.6.1. 判断
判断语句
if 语句的语法：
if (condition) statement1 else statement2
如果条件计算结果为 true，则执行 statement1；如果条件计算结果为 false，则执行 statement2。
注意：
判断的条件会发生自动类型转换：
number：如果非0为true，0为false
string：如果非null或非空为true，否则为false
undefined：false
NaN: false
对象类型：非null为true，否则为false。
2.6.2. 选择
switch 语句的语法：
switch (expression)
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
...
case value: statement;
break;
default: statement;
每个情况（case）都是表示“如果 expression 等于 value，就执行 statement”。
关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。
关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。
ECMAScript 和 Java 中的 switch 语句
ECMAScript 和 Java 中的 switch 语句有两点不同。在 ECMAScript 中，switch 语句可以用于字符串，而且能用不是常量的值说明情况：
1、基本数据类型都可以传递给switch case语句。
2、case语句可以是表达式
function test6() {
var color = "xx";
var value1 = "red", value2 = "green";
switch(color) {
case value1:
alert("红色");
break;
case value2:
alert("绿色");
break;
default:
alert("执行默认default");
}
}
这里，switch 语句用于字符串 sColor，声明 case 使用的是变量 BLUE、RED 和 GREEN，这在 ECMAScript 中是完全有效的。
练习：
switch中传递boolean类型值？
var num = 20;
switch(true) {
case num >= 0 && num <= 10:
alert("大于0小于等于10");
break;
case num>10&&num<=20:
alert("大于10小于等于20");
break;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【JavaScript】（2）标识符与关键字\基本|引用数据类型 \变量 \运算符与表达式\流程控制语句
- 黑马程序员——2.1.基础语法（关键字、常量、进制、变量、类型转换、运算符、流程控制（判断、选择、循环））
- Java基础知识（数据类型、标识符、变量、运算符和流程控制语句）
- Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）
- js变量声明，字符串转数字，运算符，控制流程语句
- Java基础知识（数据类型、标识符、变量、运算符和流程控制语句）
- 04-变量+运算符+流程控制语句
- JavaScript之变量、基本类型、数组、运算符、流程控制语句、函数
- Java基础知识（数据类型、标识符、变量、运算符和流程控制语句）
- JavaScript基础——变量-运算符-流程控制语句
- 基础知识之运算符及流程控制语句
- MSSQL扫盲系列(5)-常量，变量，运算符，流程控制
- 黑马程序员_Java基础_常用基础内容（进制转换、基本数据类型、运算符、流程控制语句等）
- 黑马程序员_Java基础（环境搭建，常量变量，类型转换，运算符，控制语句）
- linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例
- java第一课标识符，运算符，常量变量，条件控制语句。
- linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例
- linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例
- Java基础学习笔记（一）环境变量配置，数据类型，运算符，控制语句，循环语句
- 大三学长带我学习JAVA.作业3.运算符续 Operator cont.） 流程控制语句.Flow.Control.Statement 学长带我学java的作业3