css的简介
css:层叠式样式表
- 层叠:一层一层的叠加样式
- 样式表:提供更多属性和属性值实现更多样式变化
- css将显示样式和网页内容分离
css和html的四种结合方式
- html标签上都有一个style属性
<div style="background-color:red;color:green;">xxx</div>
<div style="属性名称:属性值;属性名称:属性值;……">xxx</div>
- 使用html的
<style>
标签,写在<head>
里
<style type="text/css">
div {
background-color:red;
color:green;
};
</style>
- 在
<style>
内使用@import语句
<style type="text/css">
@import url(xxx.css);
</style>
- 使用头标签
<link>
,引用外部css文件
<link rel="stylesheet" type="text/css" href="xxx.css" />
第三种方式一般不用,有些浏览器不起作用。主要用第四种。
css的优先级
一般情况:
由上到下,由外到内,优先级由低到高.
后加载的样式优先级高
css的基本选择器
- 标签选择器
使用标签名作为选择器的名称 - class选择器
每个html标签都有一个class属性
// css内
.xxx {
background-color:red;
color:green;
}
// html内
<div class="xxx">aaa</div>
- id选择器
// css内
#xxx {
background-color:red;
color:green;
}
// html内
<div id="xxx">aaa</div>
css基本选择器的优先级
标签内的style属性
> id选择器
> class选择器
> 标签选择器
css的扩展选择器
- 关联选择器
设置div标签里面p标签的样式,嵌套标签里面的样式。
// css内
div p {
background-color:red;
}
// html内
<div>
<p>xxx</p>
</div>
组合选择器
把div和p标签设置成相同的样式,把不同的标签设置成相同的样式。
// css内
div, p {
background-color:red;
}
// html内
<div>xxx</div>
<p>yyy</p>
- 伪元素选择器
css里面提供了一些定义好的样式,可以拿过来使用。
例:
超链接<a>
的状态: 原始状态(:link
),悬停状态(:hover
),点击状态(:active
),点击之后(:visited
)
css的盒子模型
把数据封装到一个区域,分别依次是上、下、左、右。可以统一设置或分别设置。
- 边框
border: 2px solid red; //(粗细|样式|颜色)
- 内边距
padding: 20px; //(粗细)
- 外边距
margin: 20px; //(粗细)
css的布局的漂浮
- float
- 属性
- left:文本流向对象的右边
- right:文本流向对象的左边
- 属性
div {
float: left;
}
css的布局的定位
- position:
- 属性
- absolute:将对象从文档流中拖出
- relative:不会把对象从文档流中拖出
- 都通过用top,bottom,left,right进行定位
- 属性
div {
position: absolute;
top: 50px;
left: 30px;
}
js的简介
基于对象和事件驱动的语言,应用于客户端.
- 基于对象: 提供好了很多对象,可以直接拿过来使用
- 事件驱动: js的动态效果
- 客户端: 专门指浏览器
- 特点
- 交互性:信息的动态交互
- 安全性:js不能访问本地磁盘文件
- 跨平台性:能够支持js的浏览器都可以运行
- 与java的区别
- 不同的开发公司
- js基于对象,java面向对象
- js是弱类型的语言 var m = “10”;
- js通过浏览器解释就能执行
- js的组成
- ECMAScript:ECMA指欧洲计算机协会,由这个组织制定js的语法,语句……
- BOM:(Browser Object Model)浏览器对象模型,对浏览器相关的对象进行操作。
- DOM:(Document Object Model)文档对象模型,对网页里的内容进行操作。
js和html的结合方式
- 使用
<script>
标签
<script type="text/javascript">
...
</script>
- 使用
<script>
标签引入一个外部的js文件
<script type="text/javascrpit" src="xxx.js">
使用第二种方式时,不要再在<scrpit>
标签里写js代码了,浏览器不会再执行里面的代码。
js的原始类型和声明变量
- 定义变量:使用关键字
var
- js的原始类型
- string:字符串
var str = "abc";
- number: 数字类型
var m = 123;
- boolean(true 和 false):
var flag = true;
- null:获取对象的引用,
null
表示引用对象为空,所有对象的引用也是Object,null
也是一个Object。 - undefined:定义一个变量,没有赋值
var aa;
- string:字符串
- typeof():查看当前变量的数据类型
js的语句
- if判断语句
- switch语句:js都支持所有数据类型
- 循环语句:for (var xx=; ;…)、while、do-while……
js的运算符
- js不区分整数和小数
// java
123 / 1000 * 1000 = 0
// js
123 / 1000 * 1000 = 123
- 字符串的相加和相减的操作
- 相加:字符串连接
- 相减:减运算
var str = "456";
alert(str+1); // str = "4561"
alert(str-1); // str = "455"
var str = "abc";
alert(str-1); // str = NaN
- boolean的操作
var flag = true; // true = 1, false = 0
alert(flag+1); // flag= 2
- == 和 === 的区别
==比较的只是值,===比较的是值和类型。
var a = "5";
if (a == 5) { // true
alert(a);
}
- 引用知识
直接向页面输出的语句,可以向页面输出变量,固定值和html代码:
document.write("aaa");
document.write("<hr/>");
js的数组
- 定义数组
// 1.直接指定元素
var arr1 = [1,2,"4",true];
// 2.使用内置对象Array
var arr2 = new Array(5); // 定义一个数组,数组的长度是5
arr2[0] = "1";
// 3.使用内置对象Array
var arr3 = new Array(3,4,5) // 定义一个数组,元素是3,4,5
- 数组有一个length属性:获取数组的长度
var arr = new Array(5);
alert("length:" + arr.length); // 5
js的函数
- 定义函数:参数列表里直接写参数名称
// 1.使用关键字function
function 方法名(参数列表) {
方法体;
返回值(根据实际需要)
}
例:
function test() {
alert("aaa");
}
function add1(a, b) {
var sum = a + b;
alert(sum);
}
function add2(a, b, c) {
var sum = a + b + c;
return sum;
}
// 2.匿名函数
var xxx = function(参数列表) {
方法体和返回值;
}
例:
var add3 = function add3(a, b) {
var sum = a + b;
alert(sum);
}
// 3.使用js的内置对象Function(了解),称为动态函数
var xxx = new Function("参数列表", "方法体和返回值");
例:
var add3 = function add3(a, b) {
var sum = a + b;
alert(sum);
}
js的全局变量和局部变量
- 全局变量:在
<script>
标签里定义一个变量,这个变量在页面的所有js中都可以使用。在方法外部使用,在方法内部使用,在另外一个<script>
标签使用。 - 局部变量:在方法内部定义一个变量,只能在方法内部使用。如果在方法外部调用这个变量,提示出错。
script放的位置
建议把<script>
标签放在</body>
后面,因为html是从上到下解析的。
js的重载
function add1(a, b) {
var sum = a + b;
return sum;
}
function add1(a, b, c) {
var sum = a + b + c;
return sum;
}
function add1(a, b, c, d) {
var sum = a + b + c + d;
return sum;
}
// 调用“所谓”的重载函数
add1(1,2); // NaN,没有出现重载
add1(1,2,3); // NaN,没有出现重载
add1(1,2,3,4); // 10
为何出现此情况?等待下次学习。