字體樣式：<!DOCTYPE html>HTML5#xu{border:1px solid#ccc;}varcanvas = document.getElementById("xu");varxx = canvas.getContext("2d"); xx.lineWidth =5; xx.strokeStyle ="blue";varflag =false;//當(dāng)鼠標(biāo)按下時(shí)$("#xu").mousedown(function(e){alert("aa");varmouseX = e.pageX -this.offsetLeft;//獲得當(dāng)前頁(yè)面的x坐標(biāo)varmouseY = e.pageY -this.offsetTop;//yflag =true; xx.moveTo(mouseX,mouseY);//起始位置});//當(dāng)鼠標(biāo)抬起時(shí)$("#xu").mouseup(function(e){flag =false; });//當(dāng)鼠標(biāo)移動(dòng)時(shí)$("#xu").mousemove(function(e){varmouseX = e.pageX -this.offsetLeft;//獲得當(dāng)前頁(yè)面的x坐標(biāo)varmouseY = e.pageY -this.offsetTop;//yif(flag){ xx.lineTo(mouseX,mouseY);//終止位置xx.stroke();//結(jié)束圖形} });}
字體的分類：FontSquirrel網(wǎng)站提供了我們所用字體的各種格式，已經(jīng)能很好的滿足我們的需求
1、定義字體
1
2
3
4
5
6
7
8
@font-face{
????/*定義你要用的字體家族*/
????font-family:'GarogierRegular';
????/*將需要的各種格式的字體下載下來(lái)放到stylesheets/fonts文件夾中*/
????/*.eof文件的?#iefix前綴用于修復(fù)IE8中的一個(gè)嚴(yán)重的語(yǔ)法解析Bug,忽略該前綴將導(dǎo)致IE8在解析剩余規(guī)則時(shí)產(chǎn)生404錯(cuò)誤,問(wèn)號(hào)的作用是將讓IE8把eot之后的內(nèi)容作為查詢參數(shù)*/
????????/*字體的鏈接位置是相對(duì)于樣式表而不是HTMLd頁(yè)面*/
????src:url('fonts/garogier_unhinted-wetbot.eot?#iefix') format('embedded-opentype'),
????????????url('fonts/garogier_unhinted-wetfont.woff') format('woff'),
1
2
3
4
5
????????????url('fonts/garogier_unhinted-wetfont.ttf') format('ttf'),
????????????url('fonts/garogier_unhinted-webfont.svg#garogierregular') format('svb');
????font-weight:normal;
????font-style:normal;?
}
2、應(yīng)用字體
1
2
3
body{
????font-family:"GarogierRegular";
}
/*也可能存在瀏覽器不支持我們的字體的時(shí)候.因此要準(zhǔn)備多個(gè)備用字體上面的代碼可改為*/
1?
1CSS中分為兩種字體:通用字體系列和特殊字體系列
1CSS提供了5種通用字體系列
1
2
3
4
5
6
????Serif?字體
????Sans-serif?字體
????Monospace?字體
????Cursive 字體
????Fantasy 字體
因此我們一般都會(huì)在特殊字體系列最后加上一個(gè)通用字體。
行間距：文字行間距屬性：
line-height:18px;
文字間距屬性：
letter-spacing:1px;
文本的樣式：輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠標(biāo)劃過(guò)輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?：
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)：
<style>
#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自動(dòng)橫向廷伸的輸入框：
<input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">
自動(dòng)向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個(gè)回車試試</textarea>
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
軟件序列號(hào)式的輸入框：
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">
軟件序列號(hào)式的輸入框(完整版)：
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">
盒模型
邊框：邊框的樣式：
solid 實(shí)線 dotted 點(diǎn)線 dashed 虛線 double 雙線 inset 三維立體效果
邊框有3個(gè)元素，用法是 border-top:10px soild red;
border-top:上邊
border-bottom:下邊
border-left:左邊
border-right:右邊
內(nèi)邊距：先將每個(gè)封裝的頁(yè)面設(shè)置邊框，設(shè)置較鮮明的顏色，設(shè)置邊框的像素，使其顯眼，然后去判斷是外邊距，還是內(nèi)邊距
外邊距是指邊框與邊框之間的距離
內(nèi)邊框是指邊框與內(nèi)容之間的距離
如果是外邊距，可用margin：0px 除去四個(gè)方向的邊距
如果是內(nèi)邊距，可用padding：0px除去四個(gè)方向的邊距。
外邊距重疊：
邊界重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒(méi)有任何非空內(nèi)容、補(bǔ)白、邊框)重合在一起而形成一個(gè)單一邊界。
兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒(méi)有正邊界，則從零中減去絕對(duì)值最大的負(fù)邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。
但是邊界的重疊也有例外情況：
1、水平邊距永遠(yuǎn)不會(huì)重合。
2、在規(guī)范文檔中，2個(gè)或以上的塊級(jí)盒模型相鄰的垂直margin會(huì)重疊。最終的margin值計(jì)算方法如下：
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對(duì)值，然后用正值減去最大值；
c、沒(méi)有正值，則都取絕對(duì)值，然后用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動(dòng)態(tài)產(chǎn)生并沒(méi)有相鄰或繼承關(guān)系。
3、相鄰的盒模型中，如果其中的一個(gè)是浮動(dòng)的（float），垂直margin不會(huì)重疊，并且浮動(dòng)的盒模型和它的子元素之間也是這樣。
4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。
5、設(shè)置了絕對(duì)定位（position:absolute）的盒模型，垂直margin不會(huì)被重疊，并且和他們的子元素之間也是一樣。
6、設(shè)置了display:inline-block的元素，垂直margin不會(huì)重疊，甚至和他們的子元素之間也是一樣。
7、如果一個(gè)盒模型的上下margin相鄰，這時(shí)它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。
a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。
b、另外，任意元素的父元素不參與margin的重疊，或者說(shuō)只有父元素的margin-bottom是參與計(jì)算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來(lái)一樣。
一個(gè)應(yīng)用了清除操作的元素的margin-top絕不會(huì)和它的塊級(jí)父元素的margin-bottom重疊。
注意，那些已經(jīng)被重疊覆蓋的元素的位置對(duì)其他已經(jīng)重疊的元素的位置沒(méi)有任何影響；只有在對(duì)這些元素的子元素定位時(shí)，border-top邊界位置才是必需的。
8、根元素的垂直margin不會(huì)被重疊。
外邊距(margin)重疊示例
外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。
圖示：
另一個(gè)重疊現(xiàn)象是當(dāng)一個(gè)元素包含在另一個(gè)元素之中時(shí)，子元素與父元素之間也會(huì)產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中最大者：
同理，如果一個(gè)無(wú)內(nèi)容的空元素，其自身上下邊距也會(huì)產(chǎn)生重疊。
瀏覽器的默認(rèn)樣式：邊界重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒(méi)有任何非空內(nèi)容、補(bǔ)白、邊框)重合在一起而形成一個(gè)單一邊界。
兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒(méi)有正邊界，則從零中減去絕對(duì)值最大的負(fù)邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。
但是邊界的重疊也有例外情況：
1、水平邊距永遠(yuǎn)不會(huì)重合。
2、在規(guī)范文檔中，2個(gè)或以上的塊級(jí)盒模型相鄰的垂直margin會(huì)重疊。最終的margin值計(jì)算方法如下：
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對(duì)值，然后用正值減去最大值；
c、沒(méi)有正值，則都取絕對(duì)值，然后用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動(dòng)態(tài)產(chǎn)生并沒(méi)有相鄰或繼承關(guān)系。
3、相鄰的盒模型中，如果其中的一個(gè)是浮動(dòng)的（float），垂直margin不會(huì)重疊，并且浮動(dòng)的盒模型和它的子元素之間也是這樣。
4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。
5、設(shè)置了絕對(duì)定位（position:absolute）的盒模型，垂直margin不會(huì)被重疊，并且和他們的子元素之間也是一樣。
6、設(shè)置了display:inline-block的元素，垂直margin不會(huì)重疊，甚至和他們的子元素之間也是一樣。
7、如果一個(gè)盒模型的上下margin相鄰，這時(shí)它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。
a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。
b、另外，任意元素的父元素不參與margin的重疊，或者說(shuō)只有父元素的margin-bottom是參與計(jì)算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來(lái)一樣。
一個(gè)應(yīng)用了清除操作的元素的margin-top絕不會(huì)和它的塊級(jí)父元素的margin-bottom重疊。
注意，那些已經(jīng)被重疊覆蓋的元素的位置對(duì)其他已經(jīng)重疊的元素的位置沒(méi)有任何影響；只有在對(duì)這些元素的子元素定位時(shí)，border-top邊界位置才是必需的。
8、根元素的垂直margin不會(huì)被重疊。
外邊距(margin)重疊示例
外邊距重疊是指兩個(gè)垂直相鄰的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，起外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。
圖示：
另一個(gè)重疊現(xiàn)象是當(dāng)一個(gè)元素包含在另一個(gè)元素之中時(shí)，子元素與父元素之間也會(huì)產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中最大者：
同理，如果一個(gè)無(wú)內(nèi)容的空元素，其自身上下邊距也會(huì)產(chǎn)生重疊。
