(五)CSS和JavaScript基础

DHTML ：制作动态HTML页面的技术

  • DHTML=HTML+层叠样式表CSS+脚本语言javascript

一、CSS

　1.1 CSS样式的分类：

  • 行内样式：只影响一行，其他相同标签也不影响。如下：
<font style="color: red;font-size: 55px;">我是font标签</font>

　　

  • 内嵌样式： 影响一个页面内的指定标签。如下：
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	font{
		color:grey;
		font-size:25px;
	}
</style>
</head>
<body>
	<font >我是font标签</font><br/>
	<font>我也是一个font标签</font>
</body>
    •  type属性是必须的，且值只能是“text/css” 。 这里影响到这个页面内所有的font标签。
      　　<style>标签内注释是用块注释 (/* */) 不能用<!-- -->
  • 外部样式 ：写在外部文件里，且注释用的是块注释( /* */)，文件后缀名为.css . 如下： cssTest.html
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./fontCss.css">
</head>
<body>
	<font >我是font标签</font><br/>
	<font>我也是一个font标签</font>
</body>

 fontCss.css如下：

font{
	border:1px solid blue;

}
  •  注意红色字体的属性。

  • 样式的优先级：行内样式>内嵌样式 >外部样式 >用户样式 >浏览器样式

浏览器先从行内中寻找css属性值，如果没有再从内嵌样式中寻找 ，如果没有再从外部样式（link）中寻找，若无再从用户样式中寻找，否则就用浏览器默认样式。
 
  • ！important : 用 !important 将属性值标记为重要，被标记的属性值浏览器会优先显示。
    <style type="text/css" >
            p{
                color:blue !important;
            }
        </style>
    </head>
    <body>
        <p style="color:red">hello!!</p>
    </body>
结果：




 解析：原本优先显示行内样式red， 但是加了!important 之后会优先显示。





1.2 CSS选择器


    

  •  HTML选择器： 
    • 



p,font {


color:red;


}


// 如果有很多个标签，那么在花括号前就要写很多个标签名


    

  • class选择器（最常用）
    • 





    

  • ID选择器
    • 



 


　　　　注意：如果同时有id和class选择器，则id选择器优先。若class和html选择器同时存在，则class选择器优先。



1.3 常用的样式属性





    

  •  position中定位基础
    • 



    

  1. position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。（可层叠）
    2. 



  （1）没有父级，参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位。


　　（2）有父级 ： （1） 在没有设定TRBL，默认依据父级的做标原始点为原始点。






<style type="text/css">
		  font.htop{
		 	
		  }
		font.hs{
				position:absolute;
			}
		</style>
	</head>
	<body>
		<font class="htop"> 我是顶层
			<font  class="hs">我是子层</font>
		</font>
	</body>





 结果：






 解析： 父层不管有没有设置position，absolute定位的子层都是以父层的坐标原始点为原始点的。


　　　　　　　　（2）如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。




<style type="text/css">
		  font.htop{ 	
		  }
		font.hs{
			position: absolute;
				top:20px;
				left:20px;
			}
		</style>
	</head>
	<body>
		<font class="htop"> 我是顶层
			<font  class="hs">我是子层</font>
		</font>
	</body>





 结果：




解析： 如果父层没有设置position，则子类以浏览器左上角为坐标原始点。



2. position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。




<style type="text/css">
  font.htop{
   position:relative;
   top:20px;
   left:0px;
  }
</style>
</head>
<body>
<font class="htop"> 我是顶层
</font>

</body>





结果：


 解析： 无父级则以BODY的原始点为原始点，配合TRBL进行定位。





<style type="text/css">
		  font.htop{		  }
		  font.hs{
		  	position:relative;
		  	top:10px;
		  	left:0px;
		  }
		</style>
	</head>
	<body>
		<font class="htop"> 我是顶层
			<font  class="hs">我是子层</font>  
		</font>
	</body>






 结果：


解析： 子级以父级坐标原始点为原始点。




 　　　　　　　




二、JavaScript


    

  • 区分大小写，Date.getHours() 中 写成Date.gethours()； 就是错的
    • 



    

  • 在网页上使用javaScript ，如下：
    • 



　　　　1. 第一种：




<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	alert("你好");
</script>
</head>





 　　2.第二种：




<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script lang="javascript" src="./fontJs.js"></script>
</head>
<body>
	<font >我是font标签</font><br/>
	<font>我也是一个font标签</font>
</body>





 fontJs.js:




alert("hello!!");






　　2.2 变量


    

  • 变量名必须以字母（a~z）或者下划线(_)开头。
    • 

  • 变量可以包括字母、数字，且字母分大小写，A不等于a。
    • 



　　2.3 转义字符


　　



 2.4 函数的定义与调用


 函数的定义与调用有以下几种形式：


    

  • 1. function func1([参数]){/*函数体*/}
    • 





<!doctype html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<title>JavaScript测试</title>
		<script type="text/javascript" src="../js/JsTest.js"></script>         // 注意导入方式
		<script>
				function f2(){
					alert("lalala");
				}
				f1();   //f1()是在上面链接的JsTest.js文件里定义的函数
				f2();	//函数调用。
		</script>
	</head>
	<body>
		hello!!
	</body>
</html>





 解析： javascript脚本文件的导入和css文件的导入方法不一样，js导入用<script>标签导入，而css用<link>导入。如果外部的js文件和html文件定义了同一个名字（无论是否重载即参数列表不相同即重载）都调用的是本文件定义的函数。



    

  • 2. var func2=function([参数]){/*函数体*/}; //第二种是将一匿名函数赋给一个变量，调用方法： func2([函数]);
    • 





<script type="text/javascript" src="../js/JsTest.js"></script>
		<script>
		var f2=function(){               //f2后不能加括号
			alert("我是第二种定义方法");
		}
				f1();
				f2();
		</script>






    

  • 3. var func3=function func4([参数]){/*函数体*/}; //是将func4赋给变量func3，调用方法：func3([参数数])
    • 






<script type="text/javascript" src="../js/JsTest.js"></script>
		<script>
		var f3=function f4(){
			alert("我是定义的第三种方法");
		}
		f1();
		f3();
		</script>





 解析： var f3=function f4(){ alert("我是定义的第三种方法"); } 只能调用f3()方法，不能调用f4(）方法。


    

  •  var func5=new Function(); //声明func5为一个对象。 具体请查看（六）javascriptJS中定义对象的几种方式
    • 





<script>
			var a=new Function();
			a.aaa=function(){
				alert("nihao");
			}	
			a.aaa();
		</script>





 解析： js与java不同的是， js不能在var a=new Function()｛｝花括号里直接定义方法并调用。 如果写成如下就是错的：




<script>
			var a=new Function(){
				var aaa=function(){
				alert("nihao");
			}}
			a.aaa();
		</script>






 2.5 javaScript语法







 




















        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/shyroke/p/6430877.html