Html,Css,JS

內容總結: 

css和html的四種結合方式javascript

一、   在每一個html標籤上都有一個屬性style,把css和html結合在一塊兒css

<div style=」background-color:red;color:green;」>html

二、   使用html的一個標籤實現<style>標籤,寫在head裏面java

<style type=」text/css」>   css代碼;</stype>數組

例如:<style type=」text/css」>  div{    background-color:red;  color:red;}  </stype>瀏覽器

三、在style標籤裏面  適用語句(在某些瀏覽器不能用)安全

@import url(css文件路徑);dom

第一步   建立一個css文件 ide

<style type=」text/css」>     @import url(div.css);  </style>函數

四、使用頭標籤   link  引入外部css文件

第一步   建立一個  css文件

<link rel=」stylesheet」 type=」text/css」 href=」css」文件的路徑/>

 

第三種結合方式  缺點:在某些瀏覽器下不起做用

優先級(通常狀況下)

                  由上到下,由外到內,優先級由高到低

                  後加載優先級高

格式:選擇器名稱{屬性名:屬性值;屬性名:屬性值;…}

 

Css的基本選擇器:

標籤選擇器  div{css 代碼;}

Class選擇器(類選擇器)    .名稱{}

Id選擇器   #名稱{}

Css的擴展選擇器(瞭解)

關聯選擇器:嵌套標籤的樣式的設置

組合選擇器:不一樣標籤設置的相一樣式

僞元素選擇器:   a標籤的狀態

Css裏面提供了一些定義好的樣式,能夠直接拿過來用

例如超連接狀態

原始狀態        鼠標放上去的狀態    點擊        點擊後

:link                :hover            :active       :visited

   記憶方法:     lv  ha

 

Css的盒子模型

*邊框:border   上下左右              

*內邊距:padding   上下左右

*外邊距:margin   上下左右

漂浮:float:left   right       定位:position:absolute     relative

 

Javascript

          *****什麼是javascript   基於對象和事件驅動的語言,應用與客戶端。

特色:交互性    安全性   跨平臺性   

Javascript  和java區別

組成(三部分)

*EAScript

*bom

*dom

 

**Js和html的結合方式(兩種)

第一種:<script  type=」text/javascript」>js代碼</script>

第二種:<script  type=」text/javascript」 src=」js的路徑」>

**Js數據類型

*五種原始類型   string  number    boolean   null   undefined

*定義變量的使用:var

**Js語句  *if    *switch     *for  while   do-while

**Js的運算符   字符穿的操做:   *相加:鏈接   *相減:執行相減運算

*Boolean類型相加:true:1     false:0     *==和===的區別  ==判斷值 ; ===判斷值和類型

**Js的數組:    三種的定義方式  ** var  arr = {1,2,」3」};   **var arr = new Array(9);//長度9

**var arr = new Array{1,2,3};   //元素是1,2,3     屬性:length:數組的長度

** js的函數    

**  function add(z,b){方法體和返回值;};

**  var add = function(m,n){方法體和返回值;}

** var add = new Function(「a,b」,」方法體和返回值」);        ******不要忘記調用,否則不起做用

**js的全局變量和局部變量

**script標籤的位置

**重載

 

JS事件20181127

鼠標移入的事件onmouseover  =」alter(‘aaaa’)」;

鼠標移出的事件  onmouseout = 「」;     相似

Id  在  JS  有更普遍的做用

Onmouseout = 「div1 .style.display = ‘none’」      .點至關於中文的」的」   最簡單的js效果

 

兼容寫法

document.getElementById

onmouseover = 「document.get.ElementById(‘div1’).style.display = ‘block’」   經過id獲取元素

 

function  函數名(){

}

變量的使用   別名

定義和調用

script type="text/javascript">

         function show() {  //定義

                  alert("hello");

         }

         show();  //調用

</script>

  任何標籤均可以加ID 包括link

任何標籤的任何屬性,也均可以修改

HTML怎麼寫   JS就怎麼寫  Class除外  是JS的關鍵字        需寫成className例外

 

 

<script type="text/javascript">

         function setText(){

                  var oTxt =        document.getElementById('txt1');

                  oTxt.value = '馬總好';

                  oTxt.title = '馬總好';  //提示文字

         }

</script>

If

 

<script type="text/javascript">

         function showHide(){

                  var oDiv = document.getElementById('div1');

                  if(oDiv.style.display=='block'){

                          oDiv.style.display = 'none';

                  }else{

                          oDiv.style.display = 'block';

                  }

         }

</script>

 

<input type="button" name="" value="顯示隱藏" onclick="showHide()">

             <div id="div1"></div>

 

爲超連接加JS   <a href="javascript:alert('hello')">連接</a>    //儘可能別放在a標籤裏

 

函數傳參

相關文章
相關標籤/搜索