- 相關(guān)推薦
js和css的區別
js跟CSS的區別是什么？js是一種腳本語(yǔ)言，是用來(lái)控制HTML的。而CSS則是直接寫(xiě)死在頁(yè)面上，屬于設置HTML的外觀(guān)操作樣式。而js是一個(gè)運行的程序，可以動(dòng)態(tài)修改HTMl。而接下來(lái)我們來(lái)了解下CSS跟js究竟是什么吧。
CSS是什么?
層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現HTML(標準通用標記語(yǔ)言的一個(gè)應用)或XML(標準通用標記語(yǔ)言的一個(gè)子集)等文件樣式的計算機語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠對網(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁(yè)對象和模型樣式的能力。
編程開(kāi)發(fā)
編程工具
記事本：使用Windows系統自帶的記事本可以網(wǎng)頁(yè)。只需要在保存文檔時(shí)，以.html為后綴名進(jìn)行保存即可。]
Dreamweaver：它與Flash、Fireworks并稱(chēng)網(wǎng)頁(yè)三劍客。Dreamweaver是集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)器，它是第一套針對專(zhuān)業(yè)網(wǎng)頁(yè)設計師特別開(kāi)發(fā)的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)。
語(yǔ)言特點(diǎn)
CSS為HTML標記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領(lǐng)域是一個(gè)突破。利用它可以實(shí)現修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素。
總體來(lái)說(shuō)，CSS具有以下特點(diǎn)：
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀(guān)，以及設置文本和背景屬性的能力;允許為任何元素創(chuàng )建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫(xiě)方式、修飾方式以及其他頁(yè)面效果。
易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的CSS文件中，以供HTML頁(yè)面引用�？傊�，CSS樣式表可以將所有的樣式聲明統一存放，進(jìn)行統一管理。
另外，可以將相同樣式的元素進(jìn)行歸類(lèi)，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應用到所有同名的HTML標簽中，也可以將一個(gè)CSS樣式指定到某個(gè)頁(yè)面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進(jìn)行修改。
多頁(yè)面應用
CSS樣式表可以單獨存放在一個(gè)CSS文件中，這樣我們就可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁(yè)面文件，在任何頁(yè)面文件中都可以將其引用。這樣就可以實(shí)現多個(gè)頁(yè)面風(fēng)格的統一。
層疊
簡(jiǎn)單的說(shuō)，層疊就是對一個(gè)元素多次設置同一個(gè)樣式，這將使用最后一次設置的屬性值。例如對一個(gè)站點(diǎn)中的多個(gè)頁(yè)面使用了同一套CSS樣式表，而某些頁(yè)面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個(gè)樣式表應用到頁(yè)面中。這些后來(lái)定義的樣式將對前面的樣式設置進(jìn)行重寫(xiě)，在瀏覽器中看到的將是最后面設置的樣式效果。
頁(yè)面壓縮
在使用HTML定義頁(yè)面效果的網(wǎng)站中，往往需要大量或重復的表格和font元素形成各種規格的文字樣式，這樣做的后果就是會(huì )產(chǎn)生大量的HTML標簽，從而使頁(yè)面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁(yè)面的體積，這樣在加載頁(yè)面時(shí)使用的時(shí)間也會(huì )大大的減少。另外，CSS樣式表的復用更大程序的縮減了頁(yè)面的體積，減少下載的時(shí)間。
工作原理
CSS是一種定義樣式結構如字體、顏色、位置等的語(yǔ)言，被用于描述網(wǎng)頁(yè)上的信息格式化和現實(shí)的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁(yè)或者單獨的樣式單文件。無(wú)論哪一種方式，樣式單包含將樣式應用到指定類(lèi)型的元素的規則。外部使用時(shí)，樣式單規則被放置在一個(gè)帶有文件擴展名_css的外部樣式單文檔中。
樣式規則是可應用于網(wǎng)頁(yè)中元素，如文本段落或鏈接的格式化指令。樣式規則由一個(gè)或多個(gè)樣式屬性及其值組成。內部樣式單直接放在網(wǎng)頁(yè)中，外部樣式單保存在獨立的文檔中，網(wǎng)頁(yè)通過(guò)一個(gè)特殊標簽鏈接外部樣式單。
名稱(chēng)CSS中的“層疊(cascading)”表示樣式單規則應用于HTML文檔元素的方式。具體地說(shuō)，CSS樣式單中的樣式形成一個(gè)層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優(yōu)先級由CSS根據這個(gè)層次結構決定，從而實(shí)現級聯(lián)效果。
語(yǔ)言基礎
屬性和屬性值
屬性
屬性的名字是一個(gè)合法的標識符，它們是CSS語(yǔ)法中的關(guān)鍵字。一種屬性規定了格式修飾的一個(gè)方面。例如：color是文本的顏色屬性，而text-indent則規定了段落的縮進(jìn)。
要掌握一個(gè)屬性的用法，有六個(gè)方面需要了解。具體敘述如下：
①該屬性的合法屬性值(legal value)。顯然段落縮進(jìn)屬性text-indent只能賦給一個(gè)表示長(cháng)度的值，而表示背景圖案的background.image屬性則應該取一個(gè)表示圖片位置鏈接的值或者是關(guān)鍵字none表示不用背景圖案。
②該屬性的默認值(initial value)。當在樣式表單中沒(méi)有規定該屬性，而且該屬性不能從它的父級元素那兒繼承的時(shí)候，則瀏覽器將認為孩屬性取它的默認值。
③該屬性所適用的元素(Applies to)。有的屬性只適用于某些個(gè)別的元素，比如white-space屬性就只適用于塊級元素。white-space屬性可以取normal、pre和nowrap三個(gè)值。當取normal的時(shí)候，瀏覽器將忽略掉連續的空白字符，而只顯示一個(gè)空白字符。當取pre的時(shí)候，則保留連續的空白字符。而取nowrap的時(shí)候，連續的空白字符被忽略，而且不自動(dòng)換行。
④該屬性的值是否被下一級繼承(inherited)。
⑤如果該屬性能取百分值(percentage)，那么該百分值將如何解釋。也就是百分值所相對的標準是什么。如margin屬性可以取百分值，它是相對于margin所存元素的容器的寬度。
⑥該屬性所屬的媒介類(lèi)型組(media groups)。
屬性值
①整數和實(shí)數
這和普通意義上的整數和實(shí)數沒(méi)有多大區別。在CSS中只能使用浮點(diǎn)小數，而不能像其他編程語(yǔ)言那樣使用科學(xué)記數法表示實(shí)數，即1.2E3在CSS中將是不合法的。下面是幾個(gè)正確的例子，整數：128、-313，實(shí)數：12.20、1415、-12.03。
②長(cháng)度量
一個(gè)長(cháng)度量由整數或實(shí)數加上相應的長(cháng)度單位組成。長(cháng)度量常用來(lái)對元素定位。而定位分為絕對定位和相對定位，因而長(cháng)度單位也分為相對長(cháng)度單位和絕對長(cháng)度單位。
相對長(cháng)度單位有：em——當前字體的高度，也就是font.size屬性的值;ex——當前字體中小寫(xiě)字母x的高度;Dx——一個(gè)像素的長(cháng)度，其實(shí)際的長(cháng)度由顯示器的設置決定，比如在800木600的設置下，一個(gè)像素的長(cháng)度就等于屏幕的寬度除以800。
另一一點(diǎn)值得注意的是，子級元素不繼承父級元素的相對長(cháng)度值，只繼承它們的實(shí)際計算值。
③百分數量(percentages)
百分數量就是數字加上百分號。顯然，百分數量總是相對的，所以和相對長(cháng)度量一樣，百分數量不被子級元素繼承。
選擇器
類(lèi)型選擇器
CSS中的一種選擇器是元素類(lèi)型的名稱(chēng)。使用這種選擇器(稱(chēng)為類(lèi)型選擇器)，可以向這種元素類(lèi)型的每個(gè)實(shí)例上應用聲明。例如，以下簡(jiǎn)單規則的選擇器是H1，因此規則作用于文檔中所有的H1元素：
1
H1 {color:red}
簡(jiǎn)單屬性選擇器
CLASS屬性
CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。從本質(zhì)上講，可以使用CLASS屬性來(lái)分類(lèi)元素，在樣式表中創(chuàng )建規則來(lái)引用CLASS屬性的值，然后瀏覽器自動(dòng)將這些屬性應用到該組元素。
類(lèi)選擇器以標志符(句點(diǎn))開(kāi)頭，用于指示后面是哪種類(lèi)型的選擇器。對于類(lèi)選擇器，之所以選擇句點(diǎn)是因為在很多編程語(yǔ)言中它與術(shù)語(yǔ)“類(lèi)”相關(guān)聯(lián)。翻譯成英語(yǔ)，標志符表示“帶有類(lèi)名的元素”。
ID屬性
ID屬性的操作類(lèi)似于CLASS屬性，但有一點(diǎn)重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的。這使得ID屬性可用于設置單個(gè)元素的樣式規則。包含ID屬性的選擇器稱(chēng)為ID選擇器。
需要注意的是，ID選擇器的標志符是散列符號(#)。標志符用來(lái)提醒瀏覽器接下來(lái)出現的是ID值。
STYLE屬性
盡管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實(shí)際上可以替代整個(gè)選擇器機制。不是只具有一個(gè)能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實(shí)際上是一個(gè)或多個(gè)CSS聲明。
通常情況下，使用CSS，設計者將把所有的樣式規則置于一個(gè)樣式表中，該樣式表位于文檔頂部的STYLE元素內(或在外部進(jìn)行鏈接)。但是，使用STYLE屬性能夠繞過(guò)樣式表將聲明直接放置到文檔的開(kāi)始標記中。
組合選擇器類(lèi)型
可以將類(lèi)型選擇器、ID選擇器和類(lèi)選擇器組合成不同的選擇器類(lèi)型來(lái)構成更復雜的選擇器。通過(guò)組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類(lèi)型選擇器和類(lèi)選擇器，一個(gè)元素必須滿(mǎn)足兩個(gè)要求：它必須是正確的類(lèi)型和正確的類(lèi)以便使樣式規則可以作用于它。
外部信息：偽類(lèi)和偽元素
在CSS1中，樣式通常是基于在HTML源代碼中出現的標記和屬性。對于很多設計情景而言這種做法完全可行，但是它無(wú)法實(shí)現設計者希望獲得的一些常見(jiàn)的設計效果。
設計偽類(lèi)和偽元素可以實(shí)現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中，使用偽類(lèi)可以根據一些情況改變文檔中鏈接的樣式，如根據鏈接是否被訪(fǎng)問(wèn)，何時(shí)被訪(fǎng)問(wèn)以及用戶(hù)和文檔的交互方式來(lái)應用改變。借助于偽元素，可以更改元素的第一個(gè)字母和第一行的樣式，或者添加源文檔中沒(méi)有出現過(guò)的元素。
偽類(lèi)和偽元素都不存在于HTML;也就是說(shuō)，它們在HTML代碼中是不可見(jiàn)的。這兩種機制都得到了精心設計以便能夠在CSS以后的版本中做進(jìn)一步地擴充;也就是說(shuō)實(shí)現更多的效果。[11]
語(yǔ)言標準
在CSS 2.1規范中，識別符(包括選擇符中的元素名、類(lèi)、ID)只能包含A～Z、a～z、0～9等字符，加上連字符“-”、下劃線(xiàn)“_”。識別符不能以數字開(kāi)頭，以連字符和下劃線(xiàn)開(kāi)頭也是不允許的。只有屬性、屬性值、單位、偽類(lèi)、偽元素和“@”規則可以由連字符“-”開(kāi)頭。同時(shí)，其他元素名稱(chēng)、類(lèi)和ID標識符也不允許用連字符開(kāi)頭。
CSS的識別符也需要用反斜杠“”規避特殊字符，這些規避字符遵循IS010646規范。特殊字符的規避方法有兩種：第一種方法是遇到特殊字符則在這些字符前直接添加反斜杠，例如，“AT&T”變?yōu)椤癆T&T”;另一種方法為用反斜杠和Unicode或IS010646等值的十六進(jìn)制數值一起，規避特殊字符，例如，“AT&T”變?yōu)椤癆T26T”。[12]
技術(shù)應用
網(wǎng)站
在HTML文件里加一個(gè)超級鏈接, 引入外部的 CSS 文檔。這個(gè)方法最方便管理整個(gè)網(wǎng)站的網(wǎng)頁(yè)風(fēng)格, 它讓網(wǎng)頁(yè)的文字內容與版面設計分開(kāi)。只要在一個(gè)CSS文檔內(擴展名為 CSS) 定義好網(wǎng)頁(yè)的風(fēng)格,然后在網(wǎng)頁(yè)中加一個(gè)超級鏈接連接到該文檔,那么網(wǎng)頁(yè)就會(huì )按照在CSS文檔內定義好的風(fēng)格顯示出來(lái)。[13]
語(yǔ)言評價(jià)
層疊樣式表(Cascading Style Sheet，CSS)有助于實(shí)現負責任的Web設計。CSS對開(kāi)發(fā)者構建Web站點(diǎn)的影響很大，并且這種影響可能是無(wú)止境的。將網(wǎng)頁(yè)的大部分甚至是全部的表示信息從(X)HTML文件中移出，并將它們保留在一個(gè)樣式表中有諸多優(yōu)點(diǎn)，如降低文件大小、節省網(wǎng)絡(luò )帶寬以及易于維護等。此外，站點(diǎn)的表現信息和核心內容相分離，使得站點(diǎn)的設計人員能夠在短暫的時(shí)間內對整個(gè)網(wǎng)站進(jìn)行各種各樣的修改。[14]
CSS簡(jiǎn)化了網(wǎng)頁(yè)的格式代碼，外部的樣式表還會(huì )被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量(因為重復設置的格式將被只保存一次)。只要修改保存著(zhù)網(wǎng)站格式的CSs樣式表文件就町以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁(yè)面數量龐大的站點(diǎn)時(shí)，顯得格外有用。這就避免了一個(gè)個(gè)網(wǎng)頁(yè)的修改，大大減少了工作量。
js是什么?
JavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言，內置支持類(lèi)型。它的解釋器被稱(chēng)為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶(hù)端的腳本語(yǔ)言，最早是在HTML(標準通用標記語(yǔ)言下的一個(gè)應用)網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
在1995年時(shí)，由Netscape公司的Brendan Eich，在網(wǎng)景導航者瀏覽器上首次設計實(shí)現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀(guān)看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。[1]
為了取得技術(shù)優(yōu)勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。為了統一規格，因為JavaScript兼容于ECMA標準，因此也稱(chēng)為ECMAScript。
組成部分
ECMAScript，描述了該語(yǔ)
言的語(yǔ)法和基本對象。
文檔對象模型(DOM)，描述處理網(wǎng)頁(yè)內容的方法和接口。
瀏覽器對象模型(BOM)，描述與瀏覽器進(jìn)行交互的方法和接口。
基本特點(diǎn)
JavaScript是一種屬于網(wǎng)絡(luò )的腳本語(yǔ)言,已經(jīng)被廣泛用于Web應用開(kāi)發(fā),常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶(hù)提供更流暢美觀(guān)的瀏覽效果。通常JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現自身的功能的。
是一種解釋性腳本語(yǔ)言(代碼不進(jìn)行預編譯)。
主要用來(lái)向HTML(標準通用標記語(yǔ)言下的一個(gè)應用)頁(yè)面添加交互行為。
可以直接嵌入HTML頁(yè)面，但寫(xiě)成單獨的js文件有利于結構和行為的分離。
跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等)。
Javascript腳本語(yǔ)言同其他語(yǔ)言一樣，有它自身的基本數據類(lèi)型，表達式和算術(shù)運算符及程序的基本程序框架。Javascript提供了四種基本的數據類(lèi)型和兩種特殊數據類(lèi)型用來(lái)處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。[5]
日常用途
嵌入動(dòng)態(tài)文本于HTML頁(yè)面。
對瀏覽器事件做出響應。
讀寫(xiě)HTML元素。
在數據被提交到服務(wù)器之前驗證數據。
檢測訪(fǎng)客的瀏覽器信息。
控制cookies，包括創(chuàng )建和修改等。
基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
歷史
它最初由Netscape的Brendan Eich設計。JavaScript是甲骨文公司的注冊商標。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的JavaScript實(shí)現包含三個(gè)部分：ECMAScript，文檔對象模型，瀏覽器對象模型。
Netscape在最初將其腳本語(yǔ)言命名為L(cháng)iveScript，后來(lái)Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開(kāi)始設計的，目的之一就是“看上去像Java”，因此語(yǔ)法上有類(lèi)似之處，一些名稱(chēng)和命名規范也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱(chēng)上的近似，是當時(shí)Netscape為了營(yíng)銷(xiāo)考慮與Sun微系統達成協(xié)議的結果。為了取得技術(shù)優(yōu)勢，微軟推出了JScript來(lái)迎戰JavaScript的腳本語(yǔ)言。為了互用性，Ecma國際(前身為歐洲計算機制造商協(xié)會(huì ))創(chuàng )建了ECMA-262標準(ECMAScript)。兩者都屬于ECMAScript的實(shí)現。盡管JavaScript作為給非程序人員的腳本語(yǔ)言，而非作為給程序人員的腳本語(yǔ)言來(lái)推廣和宣傳，但是JavaScript具有非常豐富的特性。[8]
發(fā)展初期，JavaScript的標準并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA(歐洲計算機制造商協(xié)會(huì ))的協(xié)調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
特性
JavaScript腳本語(yǔ)言具有以下特點(diǎn):
(1)腳本語(yǔ)言。JavaScript是一種解釋型的腳本語(yǔ)言,C、C++等語(yǔ)言先編譯后執行,而JavaScript是在程序的運行過(guò)程中逐行進(jìn)行解釋。
(2)基于對象。JavaScript是一種基于對象的腳本語(yǔ)言,它不僅可以創(chuàng )建對象,也能使用現有的對象。
(3)簡(jiǎn)單。JavaScript語(yǔ)言中采用的是弱類(lèi)型的變量類(lèi)型,對使用的數據類(lèi)型未做出嚴格的要求,是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,其設計簡(jiǎn)單緊湊。
(4)動(dòng)態(tài)性。JavaScript是一種采用事件驅動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對用戶(hù)的輸入做出響應。在訪(fǎng)問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標在網(wǎng)頁(yè)中進(jìn)行鼠標點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對這些事件給出相應的響應。
(5)跨平臺性。JavaScript腳本語(yǔ)言不依賴(lài)于操作系統,僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫(xiě)后可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語(yǔ)言,目前JavaScript已被大多數的瀏覽器所支持。
不同于服務(wù)器端腳本語(yǔ)言，例如PHP與ASP，JavaScript主要被作為客戶(hù)端腳本語(yǔ)言在用戶(hù)的瀏覽器上運行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務(wù)器的負擔，而與此同時(shí)也帶來(lái)另一個(gè)問(wèn)題：安全性。
而隨著(zhù)服務(wù)器的強壯，雖然程序員更喜歡運行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優(yōu)勢大行其道。同時(shí)，有些特殊功能(如AJAX)必須依賴(lài)Javascript在客戶(hù)端進(jìn)行支持。隨著(zhù)引擎如V8和框架如Node.js的發(fā)展，及其事件驅動(dòng)及異步IO等特性，JavaScript逐漸被用來(lái)編寫(xiě)服務(wù)器端程序。
【js和css的區別】相關(guān)文章：
為什么頁(yè)面填充大量的 CSS 和 JS 代碼而不做成外置文件07-10
端午節js07-01
JS繼承設計模式06-28
js函數遞歸問(wèn)題?07-09
css發(fā)展歷史06-25
春分和立春的區別07-03
大寒和冬至的區別06-29