JAVAWEB 中CSS和JS的基本用法

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那一行,肯定取不到;

發佈留言