css/javaScript基础

css中 元素的分类
块级元素:div p ul ol  table ......
占一整行
行内元素:span  a ......

有换行的就是块级元素.没有换行的就是行内元素.

1 CSS的概念
Cascading Style Sheets 层叠样式表
调节样式相关的
位置
大小
颜色
风格
css中都是键值对出现的.
2 Css与网页的结合方式
css在网页内:
结合方式1: 在标签上加入style属性.在属性值中填写css代码
结合方式2: 在head标签中 加入style标签(type="text/css") , 在style标签中书写css代码
css在外部:
结合方式3: 引入.在style标签中 加入引入代码. @import url(css路径)   (属于css代码)
结合方式4: 引入.使用link标签 <link rel="stylesheet" type="text/css"  href="css路径">  (html代码)
优先级:
下面的覆盖上面的. @import url(div.css) 引入时,引入的值出现在style的最上端.
标签里面的覆盖外面的.
3 css 中的选择器 
1 标签选择器  元素名称 {属性的键:属性的值;}
2 ID选择器    #id的值  {属性的键:属性的值;}
3 类选择器    .类名 {属性的键:属性的值;}
4 伪类选择器(了解)    a:link 没有点过的状态  a:hover 鼠标指向时的状态  a:active 点中没有松开时的状态  a:visited 访问过的状态
4 css 基本语法
1选择器 {属性的键:属性的值;属性的键:属性的值;}
2注释: /* */ 
3 在元素中 style="键:值;键:值;";
4 复合属性:值1 值2 值3....;
5 css 中常用属性
font:italic 900 50px 黑体;  复合属性:值1 值2 值3....; 顺序要按照文档中给出的顺序.
    /*
    font-size: 30px;  大小
    font-family: 宋体; 字体
    font-weight: 900; 加重(加粗)
    font-style: italic; 风格(斜体)
    */
    color:red; 文字的颜色
6 盒子模型
margin: 50px; 外边距  不能影响外面盒子的大小
50px; 只指定一个值 上下左右全都是50px;
50px; 80px ; 第一个参数决定上下, 第二参数决定左右;
30px 80px 120px; 第一个参数决定上 ,第二个参数决定左右  ,第三个参数决定 下,
30px 80px 120px 150px; 顺时针顺序 上右下左
padding: 内边距 影响盒子的大小
50px; 只指定一个值 上下左右全都是50px;
50px; 80px ; 第一个参数决定上下, 第二参数决定左右;
30px 80px 120px; 第一个参数决定上 ,第二个参数决定左右  ,第三个参数决定 下,
30px 80px 120px 150px; 顺时针顺序 上右下左
7其他属性
background  背景的复合属性
background-image: url(001.jpg);  背景图片
    background-repeat: no-repeat;    背景图片是否重复
background-color: green; 背景颜色
opacity透明度调整 取值是0~1;
width 宽

height 高

1.JS历史(掌握)
1 c-- => ScriptEase
2 liveScript ==> javaScript
3 JScript
4 ECMAScript规范
 
2.JS的体系
ECMAScript: 定义基础的语法,变量,语句,格式...........
DOM : 让js和html和css结合.
BOM : 让js和浏览器结合.(js控制浏览器一些行为)


3.JS的基本语法
js与页面结合:
方式1:在 页面的script标签中书写js代码 (script标签的位置可以在页面的任意位置)
<script type="text/javascript">
alert('aaa'); //弹出一个警告框
</script>
方式2:引入外部js文件.注意:如果script标签已经作为引入使用了.那么不要在标签体中书写js代码
<script type="text/javascript" src="demo.js" ></script>
// 1.var 变量名称 = 变量值;  js中变量时弱类型的.也就是变量可以接受任意类型的值
// 2.每行代码写完了,注意要分号结束.如果没有分号,那么将会使用换行符作为一句的结束.
// 3.js中区分字母大小写.
// 4.变量不能以数字开头.可以使用字母,_,$.
// 5.变量如果声明的名称一样.那么下面的将会覆盖上面的.
// 6.变量的作用域: 在方法中声明的变量,作用域就是在方法内.
// 7.如果声明变量时不是用var,那么该变量的作用域将会扩大到方法外.(不推荐使用)
// 8.js中封装代码也是用{}
// 9.注释分为单行(//)和多行(/* */)两种. 
// 10.一行中可以定义 多个变量  例如:var a=10,b=20,c="abc";
4.JS的变量类型
java中 
基本数据类型
byte short int long
float double
char
boolean
引用数据类型
类 数组

js中 
原始数据类型
string ,   字符串  没有char类型所以, 使用双引号或单引号包裹都是string类型.
number  ,  数字类型. 因为不区分整数和浮点数. 声明整数或浮点数直接写即可. var a= 10; var b = 3.14;
boolean ,  取值有两个 true false
undefined, 取值只有一个 undefined. var a;  这个时候a的值就是undefined. 所以undefined代表没有初始化的变量值.
null ,     取值只有一个 null. 他是未初始化的引用数据类型的占位符.js不会主动为变量赋值为null.都是用户赋值.
为了表示在该变量中要装一个引用数据类型.
typeof 判断数据类型. 注意:null的类型判断返回结果是 object. 
引用数据类型
5.JS语句
js中的语句基本上借鉴了java中的语句.
if语句 
for循环
while语句
switch语句
do while语句
6.JS运算符
+,-运算符. ==> +对正数没有任何影响.但是如果是字符串的话,会将字符串转换为number.  如果转换失败将会返回NaN.
布尔型运算符 ==> ! 取反,&& 有一个为false就都为false , ||   有一个为true 即为true.
  string   向boolean型转换 : 只有在字符串为空时,才是false;其他情况都是true;
  number   向boolean型转换 : 除了+0,-0,和NaN 其他数字都转换为true;
  null     向boolean型转换 : false
  undefined向boolean型转换: false
  Object   向boolean型转换: 非空对象转换成boolean型时,都是true.
关系运算符:  <, > , >= , <= , == , ===
// 两个字符串在比较大小时, 回取出第一位进行比较.得到比较结果.如果相等取出第2位进行比较.
// 当一个字符串和一个数字比较时,将字符串转换成数字.
== 和 ===区别:
===在比较时包括比较类型. 也就是说,不会进行类型转换.