(五)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>标签内注释是用块注释 (/* */) 不能用<!-- -->
- type属性是必须的,且值只能是“text/css” 。 这里影响到这个页面内所有的font标签。
- 外部样式 :写在外部文件里,且注释用的是块注释( /* */),文件后缀名为.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; }
- 注意红色字体的属性。
-
样式的优先级:行内样式>内嵌样式 >外部样式 >用户样式 >浏览器样式
- !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选择器:
- class选择器(最常用)
- ID选择器
注意:如果同时有id和class选择器,则id选择器优先。若class和html选择器同时存在,则class选择器优先。
1.3 常用的样式属性
- position中定位基础
- position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。(可层叠)
(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语法