day02 css+js
CSS：
Cascading Style Sheets 层叠样式表
作用：1、加强html
2、将显示与修饰进行分离
CSS的加强：
内联样式表：
<div style="font-size:200px"> helloworld! </div>
内部样式表：head标签中有子标签
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
div{
font-size:100px;
}
</style>
</head>
<body>
<div>
helloworld!
</div>
</body>
</html>
外部样式表：单独的、、、、
div{
font-size:50px;
}
<!DOCTYPE html> <html> <head> <title>demo.html</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div> helloworld! </div> </body> </html>
.：指的是当前目录
..：向上一个目录
样式表的优先级：就近原则
外部导入（了解）
<style type="text/css"> @import "demo.css" </style>
为什么只是了解
(1)好多浏览器不支持
(2)先加载文本信息，最后加载样式，客户体验度不好
(3)js不能操作import导入进来的样式
选择器：
id选择器（加#号）
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
#myid{
color:red;
}
</style>
</head>
<body>
<div id="myid">
helloworld!
</div>
</body>
</html>
class选择器（加.）
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
.myclass{
color:blue;
}
</style>
</head>
<body>
<div class="myclass">
helloworld!
</div>
</body>
</html>
标签（元素）选择器
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
div{
color:yellow;
}
</style>
</head>
<body>
<div>
helloworld!
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
input[type="text"]{
border:1px solid red;
}
input[type="password"]{
border:1px solid blue;
}
</style>
</head>
<body>
<input type="text"><br/>
<input type="password">
</body>
</html>
伪类：
在原有的修饰上在添加新的修饰。//只能是a标签（超链接标签）。
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
a:link{color:red} <!--没有任何操作的样式-->
a:visited{color:blue} <!--点击以后的样式-->
a:hover{color:yellow} <!--鼠标放上去的样式-->
a:active{color:green} <!--按住鼠标的样式-->
</style>
</head>
<body>
<a href="#">click me!</a>
</body>
</html>
字体属性
font-style: italic; /*斜体 */
font-family: "宋体";
文本属性：
border:文本框框
letter-spacing: 字符与字符间距
word-spacing: 词与词之间的距离
背景：
background-color：背景颜色
background-image：url(1.gif)背景图片
background-repeat:repeat-x;repeat-y;no-repeat; ：重复
background-size:cover 拉伸
列表：
ul li{
list-style-type:none;//square;//列表项的符号
list-style-image:url(1.gif); //列表项的符号用图片显示
}
表格：
border-collapse：collapse 合并内边框和外边框
border-spacing：5px 50px 如果一个值，两个都是
两个值，一个水平，一个垂直（x，y）
轮廓：
outline-color:
outline-width:
outline-style:
了解：
浮动：
float:right;
清除浮动：
clear
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
#mydiv{
border:1px solid red;
width:200px;
height:200px;
float:left;
}
#mydi{
border:1px solid blue;
width:400px;
height:200px;
clear:left;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<div id="mydi"></div>
</body>
</html>
小手的效果
style="cursor:pointer "
定位：
position定位
相对定位：relative 相对于自己 （看自己和边边的距离）
绝对定位：absolute 相对于父标签（看和父标签的相对位置）
.mycl{
border:1px solid blue;
width:250px;
height:250px;
position: absolute;
top:50px;
盒子模型
内边距（padding）
padding-left:左变大（气球打气）
padding:100px;上右下左 内边距的距离
外边距(保护的光圈,你必须离我多远，超过这个距离，我就离你远一点)
margin-left:
边框
border
border-top
border-top-style ： double（两条线） solid（实线）
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
javascript（js）:
一种脚本语言（不用编译）。
插入到html中的脚本语言，浏览器可以直接解析解释。
作用：
1、表单验证
2、可以操作html的属性或者css的样式。
3、可以操作html标签
js的核心组成：
ECMAScript：核心语法
BOM：Browser Object Model（浏览器对象模型）提供了一些操作浏览器的方法
DOM：Document Object Model（文档对象模型）
js如何插入html
一、（在javaScript标签中写js代码，可以写在html文件中的任意位置）
(1)
<script type="text/javascript"> alert(2); </script>
(2)
<script> alert(1); </script>
(3)
<script language="text/javascript"> alert(31); </script>
二、引入js文件（相当于css的外联式）
<type="text/javascript" src="demo.js"></script>
三、写在要用的js代码中，相当于css的内联式
<input type="button" value="点击我 " onclick="javascript:alert(5)">
注释（写在javascript中的js代码）：
//
/* */
执行顺序：从上到下
问题：
（1）<script>标签写在html文件任意位置
（2）如果<script>标签用src从外部引入js代码，那么我们就不能在<script>开始标签和结束标签中间写js代码。
js的变量（js是一种弱类型语言）
var 变量的类型取决于变量的值
js的数据类型：
原始数据类型
number boolean string null undefined
引用数据类型
Number String Boolean Array Math Date RegExp
instanceof
（判断引用数据类型的类型 如果是返回 true 如果不是返回false）
<script type="text/javascript">
var str = new String("ss");
alert(str instanceof String);
</script>
数据类型转换
伪对象：number boolean string 是伪对象，可以调用相应对象的属性和方法。
String （number boolean 可以直接调用 toString();）
<script type="text/javascript"> var nu = 23; var str = nu.toString(); alert(str); </script>
Number转换
parseInt()
parseFloat()
强制类型转换（了解）
转换的时候 类数字字符串 转换成数字， 否则转换成NaN(not a number);
<script type="text/javascript"> var nu = true; var str = Number(true); alert(str); var nu = "123"; alert(parseInt(nu)); var num = "123.9"; alert(parseFloat(num)); </script>
强制类型转换
<script type="text/javascript"> var s = 100; alert(Boolean(s)); alert(Number(s)); alert(String(s)); </script>
总结： Boolean： "" null undefined 0 NaN转换成false 其余的是true。
Number：undefined 非类数字字符串 new Object（） 转换成NaN .
String：可以把所有的类型转换成字符串。
基础语法：
void ：防止一些不该返回的值返回。
<a href="javascript: window.open('demo1.html','new')">点击</a> 错误写法
<a href="javascript:void window.open('demo1.html','new')"> 点击</a> 正确的写法
加：减号不是字符串拼接（会把双引号中的字符串类的数字自动转换成Number,然后进行加减运算）
<script type="text/javascript"> var s = 100; var m = "29"; alert(s-m); </script>
最后输出71
等号：
== != 只判断值
=== !== 不仅判断值，还判断类型