JAVAWEB-CSS和JS的基本用法
来源:互联网 发布:空间影像数据分析 编辑:程序博客网 时间:2024/06/02 17:12
1.css和html的四种结合方式
(1)在每个html标签上面都有一个属性style,把css和html结合在一起
<div class="" style="background-color:red;color:green;">
(2)使用html的一个标签实现
<style>
标签,写在head里
<style type="text/css">
css代码;
</style>
<style type="text/css">
div{
background-color:blue;
color: red;
}
</style>(3)在style标签里面 使用语句
@import url(css文件的路径);
-第一步:创建一个css文件
-第二部:引入css文件
<style type="text/css">
@import "div.css";
</style>
Warning: faultly
在某些浏览器下不起作用。一般使用第四种方式。(4)使用头标签link,来引入外部文件(css)
-第一步:创建一个css文件
-第二部:引入css文件
在头标签里头写。
<link rel="stylesheet" href="div.css" media="screen" title="no title" charset="utf-8">
CSS优先级:
由上到下,由外到内,优先级由低到高。(后加载的优先级高)
格式:
选择器名称{
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
}
2.css基本选择器
要对哪个标签里面的数据进行操作
(1)标签选择器
*使用标签名作为选择器的名称
div{
background-color: blue;
color: white;
}(2)class选择器
*每个html标签都有一个属性class
<div class="lion">666</div>
div.lion{
background-color: red;
}
如果是 .lion =>无论是什么标签只要class=”lion” 那么都是相同属性(3)id选择器
*每个html标签上面有一个属性 id
-<div id="yinxin"></div>
div#yinxin{
background-color: gray;
}
p#yinxin{
background-color: gray;
}
#yinxin{
background-color: green;
}
id="yinxin"的所有标签 背景颜色都是green.
这三个选择器的优先级
class选择器优先级大于标签选择器
标签style属性 > id > class > 标签(选择器)
<p style="background-color:red;">
3.css的扩展选择器(了解)
(1)关联选择器
*<div><p></p></div>
*设置div标签里面p标签的样式,嵌套标签里面的样式
div p{
background-color: green;
}(2)组合选择器*<div>111</div> <p>222</p>*把div和p标签设置成相同的样式,把不同的标签设置成相同的样式 <style media="screen"> div,p{ background-color: orange; } </style>
(3)伪元素选择器
*CSS里面提供一些定义好的样式,可以拿来使用
*比如 超链接
超链接状态:原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
4.盒子模型(了解)
在进行布局前需要把数据封装到一块一块的区域内(div)
-1.边框 border
-2.内边距
-3.外边距边框 border:统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right border: 2px solid blue; 大小 样式 颜色内边距 文本内容距离div四条边的距离 padding:统一设置 上 padding-top 下 padding-bottom 左 padding-left 右 padding-right 基本语法: padding: length; 外边距 margin:统一设置 上 margin-top 下 margin-bottom 左 margin-left 右 margin-right 基本语法: margin: auto | length;
5.布局的漂浮(了解)
属性值
经测试不好用!
float:
left:文本流向对象的右边
right:文本流向对象的左边
6.布局的定位(了解)
position:
属性值
-absolute 将对象从文档流中拖出
可以是top、bottom等属性进行定位
-relative 对象不可重叠
不会把对象从文档流中拖出
可以使用top、bottom等属性进行定位
7.javascript简介
*javascript是基于对象和事件驱动的脚本语言,应用于客户端。
-基于对象:提供好了很多对象,可以直接拿来用
-事件驱动:html做网站静态,javascript动态效果
-客户端:专门指的是浏览器;
*javascript的特点
-1 交互性
信息的动态交互
-2 安全性
js不能访问本地磁盘的文件
-3 跨平台性
java里面的跨平台性-虚拟机
只有能够支持js的浏览器,都可以允许
*javascript和java的区别
没关系-跟雷锋和雷峰塔一样、、没关系
(1)js是基于对象,java是面向对象
(2)java是强类型语言,js是弱类型语言
js: var a = “123”; var b = 123;
(3)js只需解析即可运行,java要先编译成字节码再执行
*js的组成(三部分组成)
(1)ECMAscript
-ECMA(组织):欧洲计算机协会
它制定js的语法,语句
(2)BOM
-broswer object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型
2.js和html的结合方式
第一种
-使用一个标签
<script type="text/javascript"> js代码; </script>
第二种
-使用script标签,引入一个外部的js文件
**创建一个js文件,写js代码
<script type="text/javascript" src="first.js"> </script>
使用第二种方式的时候,就不要在标签里写其他代码(不会执行的);
8.js的原始声明和声明变量
*java的基本数据类型 byte short int long float double char boolean
*定义变量 都使用关键字 var
*js的原始类型(5个)
-string 字符串
var str = “abc”;
-number 数字类型
var m = 123;
-boolean true和false
var flag = true;
-null
var date = new Date();
表示获取对象的引用,null表示对象引用为空,所有对象的引用也是object
-undefined
定义一个变量,但没有赋值
var a;
typeof运算符,可查看变量类型。
9.js的语句
-java语句
-if
-switch
-for
-while / do while
-js语句
-if判断语句(和java相同)
-switch语句(所有类型都支持)
switch(a) { case 5: break; case 6: break; default: }
-循环语句 for / while / do while
//while循环 var i =5; while (i>1) { alert(i); i--; } // for循环 for(var i = 0; i < 3; i++) alert(i);
*直接向页面输出的语句(可以把内容显示在页面上) document.write("aaa"); document.write("<hr/>"); 可以向页面输出变量,固定值和html代码 document.write里面是双引号,如果设置标签的属性需要使用单引号
10.js的数组
java里面数组的定义 int []arr = {1,2,3};
js数组的定义方式:
(1)var arr = [1,2,3];
var arr = [1,”4”,true];
(2)var arr = new Array(5); //定义一个数组,数组长度是5
arr[0] = “1”;
(3)使用内置对象Array
var arr = new Array(3,4,5);//定义一个数组,数组里面的元素是3,4,5
*数组里有一个属性 length:获取到数组的长度
11.js的函数
*java里面定义方法
public 返回类型 void / int 方法名(参数列表){
方法体;
返回值;
}
public int add(int a,int b)
{
int sum = a + b;
return sum;
}
**js定义函数 -函数参数列表不需要写var,直接写参数名称即可。 (1)使用关键字 function function 方法名(参数列表){ 方法体; //返回值可有可无(根据实际需要) } <script type="text/javascript"> function text() { alert("QQ"); } //调用方法 text(); //定义一个有参数的方法 function add(a,b) { var sum = a + b; alert(sum); } add(2,3); function add1(a,b,c){ var sum = a+b+c; return sum; } alert(add1(1,2,3)); </script> (2)匿名函数 var add = function(参数列表){ 方法体和返回值; } (3)使用js里面内置对象Function(很少用) var 名称 = new Function("参数列表","方法体和返回值"); var add = new Function("x,y","var sum;sum=x+y;return sum;");
12.js的全局变量和局部变量
*全局变量,在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
*局部变量,在方法内部定义一个变量,只能在方法内部使用
13.script放置的位置
建议*把script标签放到</body>
后面
需求:
在js里面需要获取到input里面的值,如果script标签放到head里面会出现问题
html解析是从上到下的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没解析到input那一行,肯定取不到;
- JAVAWEB-CSS和JS的基本用法
- animation基本用法(css方式和原始js方式)
- javaWeb学习_04:js的基本对象
- JS , CSS ,image HTML DOM的加载过程 以及 总结JS的基本用法
- css介绍及css的基本用法
- javaweb项目CSS和JS引入导致缓存问题的部分解决方式.
- WebView的基本用法以及和js交互
- require.js的基本用法
- require.js的基本用法
- JS-Cookie的基本用法
- CSS背景(background)的基本用法
- HTML.CSS.JS的基本操作
- Javaweb的css选择器
- CSS基本用法(一)
- CSS基本用法(二)
- 2016年11月 选择器的基本用法和Css的特性
- JavaWeb-02(CSS和JavaScript)
- jquery.validate.js的基本用法入门
- 如何理解 TCP/IP,SPDY,WebSocket 三者之间的关系
- GK888t打印机设置
- 密码
- 参加ThoughtWorks暑期训练营我学到了什么
- 产品为何总是做不好 (一): 只是因为我们都太聪明了
- JAVAWEB-CSS和JS的基本用法
- 编写程序detab,将输入中的制表符换成适当数目的空格
- 恐怖的机器人
- 风口上的猪---动态规划
- Android include 细节问题
- Scanner和BufferReader difference
- Apollo(MQTT) 简介和源码搭建
- 学习记录:qemu的安装与使用
- Servlet学习笔记---三个域对象的使用时机