day02_css与javascript

css

• css是什么

CSS 指层叠样式表 (Cascading Style Sheets)

1. 样式定义如何显示 HTML 元素
2. 样式通常存储在样式表中
3. 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
4. 外部样式表可以极大提高工作效率
5. 外部样式表通常存储在 CSS 文件中
6. 多个样式定义可层叠为一

• css作用

1. 样式表解决了html的内容与表现分离
2. 使用样式表极大的提高了工作效率。

• css书写规则

Css规则主要由两部分组成

1.选择器

2.一条或多条声明

选择器主要作用是为了确定需要改变样式的HTML元素

每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开

1. 如果值为若干单词，则要给值加引号
2. 多个声明之间使用分号(;)分开
3. css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感

导入css 

内联样式表<div style=”border:1px solid black”>这是一个DIV</div>

内部样式表<style type="text/css">css代码</style>

外部样式表<link rel="stylesheet" type="text/css" href="mystyle.css">

@import导入

关于@import与引用外部样式表的区别:

1. @import这种方式只有firefox支持，而ie不支持。

2.@import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。

3.@import不支持通过javascript修改样式，而link支持。

优先级问题

    内联样式表>内部样式表>外部样式表

css选择器

       css选择器主要是用于选择需要添加样式的html元素。

       对于css来说，它的选择器有很多，我们主要介绍以下几种:

id选择器

#Id选择器使用#引入，它引用的是id属性中的值。

类选择器

.class类选择器使用时,需要在类名前加一个点号(.)

元素选择器

这是最常见的选择器，简单说，文档中的元素就是选择器

div{

}

属性选择器

如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器

 input[type="text"]{

}

伪类

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。

在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。

css属性

• 字体

Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)

常用属性:

1. font:简写属性，作用是把所有针对字体的属性设置在一个声明中。
2. font-family:定义字体系列
3. font-size:定义字体的尺寸
4. font-style:定义字体风格

• 文本

CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

常用属性

1. color:定义文本颜色
2. text-align:定义文本对齐方式
3. letter-spacing:定义字符间隔
4. word-spacing:定义字间隔

• 背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。

常用属性:

1. background:简写属性，作用是将背景属性设置在一个声明中
2. background-color:定义背景颜色
3. background-image:定义背景图片
4. background-position:定义背景图片的起始位置
5. background-repeat:定义背景图片是否及如何重复。

• 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

常用属性:

1. width:设置元素的宽度
2. height:设置元素的高度

• 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

常用属性:

1. list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
2. list-style-image:定义列表项标志为图象
3. list-style-position:定义列表项标志的位置
4. list-style-type:定义列表项标志的类型。

• 表格

CSS 表格属性可以帮助您极大地改善表格的外观

         常用属性:

1. border-collapse:定义是否把表格边框合并为单一的边框。
2. border-spacing:定义分隔单元格边框的距离
3. caption-side:定义表格标题的位置

• 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

常用属性:

1. outline:在一个声明中设置所有的轮廓属性
2. outline-color:定义轮廓的颜色
3. outline-style:定义轮廓的样式
4. outline-width:定义轮廓的宽度

• 定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

常用属性:

1. position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
2. top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
3. right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
4. left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
5. bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

• 分类

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

常用属性

1. clear:设置一个元素的侧面是否允许其它的浮动元素
2. float:定义元素在哪个方向浮动
3. cursor:当指向某元素之上时显示的指针类型
4. display:定义是否及如何显示元素
5. visibility:定义元素是否可见或不可见。

CSS框模型

 boeder：

常用属性:

1. border:简写属性，用于把针对于四个边的属性设置在一个声明。
2. border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。
3. border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。
4. border-width:简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度
5. border-top:简写属性，用于把上边框的所有属性设置到一个声明中
6. border-right:简写属性，用于把右边框所有属性设置到一个声明中
7. border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中
8. border-left:简写属性，用于把左边框的所有属性设置到一个声明中。

margin：

常用属性:

1. margin:简写属性，在一个声明中设置所有外边距属性
2. margin-top:定义元素的上外边距
3. margin-right:定义元素的右外边距
4. margin-bottom:定义元素的下外边距

margin-left定义元素的左外边距

padding：

常用属性:

1. padding:简写属性，作用是在一个声明中设置元素的所有内边距属性
2. padding-top:定义元素的上内边距
3. padding-right:定义元素的右内边距
4. padding-bottom:定义元素的下内边距
5. padding-left:定义元素的左内边距。

javascript

javascript是什么

javaScript 是因特网上最流行的脚本语言，它存在于全世界所有Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。

脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译

1. JavaScript 是可插入 HTML 页面的编程代码。
2. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 与 Java 是两种完全不同的语言

javascript作用

我们通过javascript可以改变html内容,改变html样式,进行验证输入等。

javascript组成      

javascript的核心ECMAScript描述了语言的语法和基本对象。

一个完整的javaScript实现是由下面三个不同部分组成的。

导入js方式

直接插入：<script></script>

外部引入：<script src=".../xxx.js"></script>

Javascript基础语法-变量声明

在javascript中使用用 var 运算符（variable 的缩写）加变量名定义的

JavaScript 变量名称的规则：

•  大小写敏感
•  变量必须以字母或下划线开始

Javascript基础语法-数据类型

原始类型

原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如: 10  “abc”

• ECMAScript有五种原始类型

1. String  在javascript中字符串字符串字面值，可以使用单引号或双引号声明。
2. Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
3. Boolean 它有两个值true和false.
4. Undefined:该类型只有一个值undefined.表示的是未初始化的变量
5. Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.

 

• 对变量或值调用 typeof 运算符将返回下列值之一：

1. undefined - 如果变量是 Undefined 类型的
2. boolean - 如果变量是 Boolean 类型的
3. number - 如果变量是 Number 类型的
4. string - 如果变量是 String 类型的
5. object - 如果变量是一种引用类型或 Null 类型的

注意：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

引用类型

引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象。

从传统意义上来说，ECMAScript 并不真正具有类。

ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的

var obj=new Object();

Object对象自身用处不大，但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.

可以使用instanceof运算符来判断对象的类型。

Javascript基础语法-类型转换

转换成字符串  toString()方法.

转换成数字  parseInt() 和 parseFloat()

• 强制类型转换

使用强制类型转换可以访问特定的值。

ECMAScript 中提供了三种强制类型转换：

1. 把给定的值转换成Boolean类型
2. 把给定的值转换成数字
3. 把给定的值转换成字符串