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  

 等号:

     ==  != 只判断值

     ===    !==  不仅判断值,还判断类型


捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。