js和css的區別

js跟CSS的區別是什麼？js是一種腳本語言，是用來控制HTML的。而CSS則是直接寫死在頁面上，屬於設置HTML的外觀操作樣式。而js是一個運行的程序，可以動態修改HTMl。而接下來我們來了解下CSS跟js究竟是什麼吧。

CSS是什麼?

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式的能力。

編程開發

編程工具

記事本：使用Windows系統自帶的記事本可以網頁。只需要在保存文檔時，以為後綴名進行保存即可。]

Dreamweaver：它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁器，它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具，利用它可以輕而易舉地製作出充滿動感的網頁。

語言特點

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來説，CSS具有以下特點：

豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力;允許為任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

易於使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。

另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標籤中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進行修改。

多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

層疊

簡單的説，層疊就是對一個元素多次設置同一個樣式，這將使用最後一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最後面設置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網站中，往往需要大量或重複的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標籤，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的複用更大程序的縮減了頁面的體積，減少下載的時間。

工作原理

CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用於描述網頁上的信息格式化和現實的方式。CSS樣式可以直接存儲於HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。

樣式規則是可應用於網頁中元素，如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中，外部樣式單保存在獨立的文檔中，網頁通過一個特殊標籤鏈接外部樣式單。

名稱CSS中的“層疊(cascading)”表示樣式單規則應用於HTML文檔元素的方式。具體地説，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先級由CSS根據這個層次結構決定，從而實現級聯效果。

語言基礎

屬性和屬性值

屬性

屬性的名字是一個合法的標識符，它們是CSS語法中的關鍵字。一種屬性規定了格式修飾的一個方面。例如：color是文本的顏色屬性，而text-indent則規定了段落的縮進。

要掌握一個屬性的用法，有六個方面需要了解。具體敍述如下：

①該屬性的合法屬性值(legal value)。顯然段落縮進屬性text-indent只能賦給一個表示長度的值，而表示背景圖案的e屬性則應該取一個表示圖片位置鏈接的值或者是關鍵字none表示不用背景圖案。

②該屬性的默認值(initial value)。當在樣式表單中沒有規定該屬性，而且該屬性不能從它的父級元素那兒繼承的時候，則瀏覽器將認為孩屬性取它的默認值。

③該屬性所適用的元素(Applies to)。有的屬性只適用於某些個別的元素，比如white-space屬性就只適用於塊級元素。white-space屬性可以取normal、pre和nowrap三個值。當取normal的時候，瀏覽器將忽略掉連續的空白字符，而只顯示一個空白字符。當取pre的時候，則保留連續的空白字符。而取nowrap的時候，連續的空白字符被忽略，而且不自動換行。

④該屬性的值是否被下一級繼承(inherited)。

⑤如果該屬性能取百分值(percentage)，那麼該百分值將如何解釋。也就是百分值所相對的標準是什麼。如margin屬性可以取百分值，它是相對於margin所存元素的容器的寬度。

⑥該屬性所屬的媒介類型組(media groups)。

屬性值

①整數和實數

這和普通意義上的整數和實數沒有多大區別。在CSS中只能使用浮點小數，而不能像其他編程語言那樣使用科學記數法表示實數，即1.2E3在CSS中將是不合法的。下面是幾個正確的例子，整數：128、-313，實數：12.20、1415、-12.03。

②長度量

一個長度量由整數或實數加上相應的長度單位組成。長度量常用來對元素定位。而定位分為絕對定位和相對定位，因而長度單位也分為相對長度單位和絕對長度單位。

相對長度單位有：em——當前字體的高度，也就是屬性的值;ex——當前字體中小寫字母x的高度;Dx——一個像素的長度，其實際的長度由顯示器的設置決定，比如在800木600的設置下，一個像素的長度就等於屏幕的寬度除以800。

另一一點值得注意的是，子級元素不繼承父級元素的相對長度值，只繼承它們的實際計算值。

③百分數量(percentages)

百分數量就是數字加上百分號。顯然，百分數量總是相對的，所以和相對長度量一樣，百分數量不被子級元素繼承。

選擇器

類型選擇器

CSS中的一種選擇器是元素類型的名稱。使用這種選擇器(稱為類型選擇器)，可以向這種元素類型的每個實例上應用聲明。例如，以下簡單規則的選擇器是H1，因此規則作用於文檔中所有的H1元素：

1

H1 {color:red}

簡單屬性選擇器

CLASS屬性

CLASS屬性允許向一組在CLASS屬性上具有相同值的元素應用聲明。BODY內的所有元素都有CLASS屬性。從本質上講，可以使用CLASS屬性來分類元素，在樣式表中創建規則來引用CLASS屬性的值，然後瀏覽器自動將這些屬性應用到該組元素。

類選擇器以標誌符(句點)開頭，用於指示後面是哪種類型的選擇器。對於類選擇器，之所以選擇句點是因為在很多編程語言中它與術語“類”相關聯。翻譯成英語，標誌符表示“帶有類名的元素”。

ID屬性

ID屬性的操作類似於CLASS屬性，但有一點重要的不同之處：ID屬性的值在整篇文檔中必須是唯一的.。這使得ID屬性可用於設置單個元素的樣式規則。包含ID屬性的選擇器稱為ID選擇器。

需要注意的是，ID選擇器的標誌符是散列符號(#)。標誌符用來提醒瀏覽器接下來出現的是ID值。

STYLE屬性

儘管在選擇器中可以使用CLASS和ID屬性值，STYLE屬性實際上可以替代整個選擇器機制。不是隻具有一個能夠在選擇器中引用的值(這正是ID和CLASS具有的值)，STYLE屬性的值實際上是一個或多個CSS聲明。

通常情況下，使用CSS，設計者將把所有的樣式規則置於一個樣式表中，該樣式表位於文檔頂部的STYLE元素內(或在外部進行鏈接)。但是，使用STYLE屬性能夠繞過樣式表將聲明直接放置到文檔的開始標記中。

組合選擇器類型

可以將類型選擇器、ID選擇器和類選擇器組合成不同的選擇器類型來構成更復雜的選擇器。通過組合選擇器，可以更加精確地處理希望賦予某種表示的元素。例如，要組合類型選擇器和類選擇器，一個元素必須滿足兩個要求：它必須是正確的類型和正確的類以便使樣式規則可以作用於它。

外部信息：偽類和偽元素

在CSS1中，樣式通常是基於在HTML源代碼中出現的標記和屬性。對於很多設計情景而言這種做法完全可行，但是它無法實現設計者希望獲得的一些常見的設計效果。

設計偽類和偽元素可以實現其中的一些效果。這兩種機制擴充了CSS的表現能力。在CSS1中，使用偽類可以根據一些情況改變文檔中鏈接的樣式，如根據鏈接是否被訪問，何時被訪問以及用户和文檔的交互方式來應用改變。藉助於偽元素，可以更改元素的第一個字母和第一行的樣式，或者添加源文檔中沒有出現過的元素。

偽類和偽元素都不存在於HTML;也就是説，它們在HTML代碼中是不可見的。這兩種機制都得到了精心設計以便能夠在CSS以後的版本中做進一步地擴充;也就是説實現更多的效果。[11]

語言標準

在CSS 2.1規範中，識別符(包括選擇符中的元素名、類、ID)只能包含A～Z、a～z、0～9等字符，加上連字符“-”、下劃線“_”。識別符不能以數字開頭，以連字符和下劃線開頭也是不允許的。只有屬性、屬性值、單位、偽類、偽元素和“@”規則可以由連字符“-”開頭。同時，其他元素名稱、類和ID標識符也不允許用連字符開頭。

CSS的識別符也需要用反斜槓“”規避特殊字符，這些規避字符遵循IS010646規範。特殊字符的規避方法有兩種：第一種方法是遇到特殊字符則在這些字符前直接添加反斜槓，例如，“AT&T”變為“AT&T”;另一種方法為用反斜槓和Unicode或IS010646等值的十六進制數值一起，規避特殊字符，例如，“AT&T”變為“AT26T”。[12]

技術應用

網站

在HTML文件里加一個超級鏈接, 引入外部的 CSS 文檔。這個方法最方便管理整個網站的網頁風格, 它讓網頁的文字內容與版面設計分開。只要在一個CSS文檔內(擴展名為 CSS) 定義好網頁的風格,然後在網頁中加一個超級鏈接連接到該文檔,那麼網頁就會按照在CSS文檔內定義好的風格顯示出來。[13]

語言評價

層疊樣式表(Cascading Style Sheet，CSS)有助於實現負責任的Web設計。CSS對開發者構建Web站點的影響很大，並且這種影響可能是無止境的。將網頁的大部分甚至是全部的表示信息從(X)HTML文件中移出，並將它們保留在一個樣式表中有諸多優點，如降低文件大小、節省網絡帶寬以及易於維護等。此外，站點的表現信息和核心內容相分離，使得站點的設計人員能夠在短暫的時間內對整個網站進行各種各樣的修改。[14]

CSS簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存裏，加快了下載顯示的速度，也減少了需要上傳的代碼數量(因為重複設置的格式將被只保存一次)。只要修改保存着網站格式的CSs樣式表文件就町以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。這就避免了一個個網頁的修改，大大減少了工作量。

js是什麼?

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客户端的腳本語言，最早是在HTML(標準通用標記語言下的一個應用)網頁上使用，用來給HTML網頁增加動態功能。

在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。[1]

為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。為了統一規格，因為JavaScript兼容於ECMA標準，因此也稱為ECMAScript。

組成部分

ECMAScript，描述了該語

言的語法和基本對象。

文檔對象模型(DOM)，描述處理網頁內容的方法和接口。

瀏覽器對象模型(BOM)，描述與瀏覽器進行交互的方法和接口。

基本特點

JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用户提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

是一種解釋性腳本語言(代碼不進行預編譯)。

主要用來向HTML(標準通用標記語言下的一個應用)頁面添加交互行為。

可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。

跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行(如Windows、Linux、Mac、Android、iOS等)。

Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較複雜的信息處理。[5]

日常用途

嵌入動態文本於HTML頁面。

對瀏覽器事件做出響應。

讀寫HTML元素。

在數據被提交到服務器之前驗證數據。

檢測訪客的瀏覽器信息。

控制cookies，包括創建和修改等。

基於技術進行服務器端編程。

歷史

它最初由Netscape的Brendan Eich設計。JavaScript是甲骨文公司的註冊商標。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用於其他場合，如服務器端編程。完整的JavaScript實現包含三個部分：ECMAScript，文檔對象模型，瀏覽器對象模型。

Netscape在最初將其腳本語言命名為LiveScript，後來Netscape在與Sun合作之後將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規範也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。為了取得技術優勢，微軟推出了JScript來迎戰JavaScript的腳本語言。為了互用性，Ecma國際(前身為歐洲計算機制造商協會)創建了ECMA-262標準(ECMAScript)。兩者都屬於ECMAScript的實現。儘管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。[8]

發展初期，JavaScript的標準並未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA(歐洲計算機制造商協會)的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。

特性

JavaScript腳本語言具有以下特點:

(1)腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程中逐行進行解釋。

(2)基於對象。JavaScript是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。

(3)簡單。JavaScript語言中採用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。

(4)動態性。JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web服務器就可以對用户的輸入做出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。

(5)跨平台性。JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。

不同於服務器端腳本語言，例如PHP與ASP，JavaScript主要被作為客户端腳本語言在用户的瀏覽器上運行，不需要服務器的支持。所以在早期程序員比較青睞於JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。

而隨着服務器的強壯，雖然程序員更喜歡運行於服務端的腳本以保證安全，但JavaScript仍然以其跨平台、容易上手等優勢大行其道。同時，有些特殊功能(如AJAX)必須依賴Javascript在客户端進行支持。隨着引擎如V8和框架如的發展，及其事件驅動及異步IO等特性，JavaScript逐漸被用來編寫服務器端程序。