频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
JAVAWEB 中CSS和JS的基本用法
2018-04-17 03:43:39         来源:YinXin的博客  
收藏   我要投稿
1.css和html的四种结合方式

(1)在每个html标签上面都有一个属性style,把css和html结合在一起

(2)使用html的一个标签实现

(3)在style标签里面 使用语句

@import url(css文件的路径);

-第一步:创建一个css文件

-第二部:引入css文件

Warning: faultly

在某些浏览器下不起作用。一般使用第四种方式。

(4)使用头标签link,来引入外部文件(css)

-第一步:创建一个css文件

-第二部:引入css文件

在头标签里头写。

CSS优先级:

由上到下,由外到内,优先级由低到高。(后加载的优先级高)

格式:

选择器名称{

属性名1:属性值;

属性名2:属性值;

属性名3:属性值;

}

2.css基本选择器

要对哪个标签里面的数据进行操作

要对哪个标签里面的数据进行操作

(1)标签选择器

*使用标签名作为选择器的名称

p{

background-color: blue;

color: white;

}

(2)class选择器

*每个html标签都有一个属性class

666

p.lion{

background-color: red;

}

如果是 .lion =>无论是什么标签只要class=”lion” 那么都是相同属性

(3)id选择器

*每个html标签上面有一个属性 id

-

p#yinxin{

background-color: gray;

}

p#yinxin{

background-color: gray;

}

#yinxin{

background-color: green;

}

id="yinxin"的所有标签 背景颜色都是green.

这三个选择器的优先级

class选择器优先级大于标签选择器

标签style属性 > id > class > 标签(选择器)

3.css的扩展选择器(了解)

(1)关联选择器

*

*设置p标签里面p标签的样式,嵌套标签里面的样式

p p{

background-color: green;

}

(2)组合选择器

*

111

222

*把p和p标签设置成相同的样式,把不同的标签设置成相同的样式

(3)伪元素选择器

*CSS里面提供一些定义好的样式,可以拿来使用

*比如 超链接

超链接状态:原始状态 鼠标放上去状态 点击 点击之后

:link :hover :active :visited

4.盒子模型(了解)

在进行布局前需要把数据封装到一块一块的区域内(p)

-1.边框 border

-2.内边距

-3.外边距

边框

border:统一设置

上 border-top

下 border-bottom

左 border-left

右 border-right

border: 2px solid blue; 大小 样式 颜色

内边距

文本内容距离p四条边的距离

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标签,引入一个外部的js文件

**创建一个js文件,写js代码

使用第二种方式的时候,就不要在标签里写其他代码(不会执行的);

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("

"); 可以向页面输出变量,固定值和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 方法名(参数列表){

方法体;

//返回值可有可无(根据实际需要)

}

(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标签放到后面

需求:

在js里面需要获取到input里面的值,如果script标签放到head里面会出现问题

html解析是从上到下的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没解析到input那一行,肯定取不到;

点击复制链接 与好友分享!回本站首页
相关TAG标签 JAVAWEB CSS 用法
上一篇:angular.js学习一
下一篇:Node.jsBuffer(缓冲区)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站