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標籤的位置
**重載
鼠標移入的事件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>
<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標籤裏