博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
(五)CSS和JavaScript基础
阅读量:6541 次
发布时间:2019-06-24

本文共 2498 字,大约阅读时间需要 8 分钟。

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

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

 

一、CSS

 1.1 CSS样式的分类:

  • 行内样式:只影响一行,其他相同标签也不影响。如下:
我是font标签

  

  • 内嵌样式: 影响一个页面内的指定标签。如下:
Insert title here 我是font标签
我也是一个font标签
    •  type属性是必须的,且值只能是“text/css” 。 这里影响到这个页面内所有的font标签。
        <style>标签内注释是用块注释 (/* */) 不能用<!-- -->

 

  • 外部样式 :写在外部文件里,且注释用的是块注释( /* */),文件后缀名为.css . 如下: cssTest.html
Insert title here
我是font标签
我也是一个font标签

 fontCss.css如下:

font{	border:1px solid blue;}
  •  注意红色字体的属性。
  • 样式的优先级:行内样式>内嵌样式 >外部样式 >用户样式 >浏览器样式

浏览器先从行内中寻找css属性值,如果没有再从内嵌样式中寻找 ,如果没有再从外部样式(link)中寻找,若无再从用户样式中寻找,否则就用浏览器默认样式。
 
  • !important : 用 !important 将属性值标记为重要,被标记的属性值浏览器会优先显示。
                

hello!!

结果:
 

 解析:原本优先显示行内样式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,默认依据父级的做标原始点为原始点。可层叠

  (1)没有父级,参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT进行定位

  (2)有父级 1) 在没有设定TRBL,默认依据父级的做标原始点为原始点。

				 我是顶层			我是子层			

 结果:

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

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

				 我是顶层			我是子层			

 结果:

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

 

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

 我是顶层

结果:

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

 

				 我是顶层			我是子层  			

 

 结果:

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

 

 

        





二、JavaScript

  • 区分大小写,Date.getHours() 中 写成Date.gethours(); 就是错的
  • 在网页上使用javaScript ,如下:

    1. 第一种:

Insert title here

   2.第二种:

Insert title here 我是font标签
我也是一个font标签

 fontJs.js:

alert("hello!!");

 

  2.2 变量

  • 变量名必须以字母(a~z)或者下划线(_)开头。
  • 变量可以包括字母、数字,且字母分大小写,A不等于a。

  2.3 转义字符

  

 

 2.4 函数的定义与调用

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

  • 1. function func1([参数]){/*函数体*/}
			
JavaScript测试 // 注意导入方式 hello!!

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

 

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

 

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

 

		

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

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

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

 

 2.5 javaScript语法

 

 

 

 

 

 



 

 

 

转载于:https://www.cnblogs.com/shyroke/p/6430877.html

你可能感兴趣的文章
55、Android网络图片 加载缓存处理库的使用
查看>>
【转载】千万级规模高性能、高并发的网络架构经验分享
查看>>
OC基础--OC中的类方法和对象方法
查看>>
ubuntu samba服务器多用户配置【转】
查看>>
母线的种类与作用是什么(转)
查看>>
【Xamarin 挖墙脚系列:IOS 开发界面的3种方式】
查看>>
Atitit.工作流系统的本质是dsl 图形化的dsl 4gl
查看>>
I.MX6 Android USB Touch eGTouchA.ini文件存放
查看>>
4-5-创建索引表-串-第4章-《数据结构》课本源码-严蔚敏吴伟民版
查看>>
java 操作 RabbitMQ 发送、接受消息
查看>>
go run main.go undefined? golang main包那点事
查看>>
从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
查看>>
Volley(二)—— 基本Request对象 & RequestQueue&请求取消
查看>>
2017中国系统架构师大会“盛装”来袭
查看>>
中国最强的人工智能学术会议来了
查看>>
Metasploit的射频收发器功能 | Metasploit’s RF Transceiver Capabilities
查看>>
主库 归档 删除策略
查看>>
《Linux从入门到精通(第2版)》——导读
查看>>
路过下载攻击利用旧版 Android 漏洞安装勒索软件
查看>>
ThinkSNS 六大子版本体验及源码下载
查看>>