js和css的區別
js跟CSS的區別是什麼？js是一種指令碼語言，是用來控制HTML的。而CSS則是直接寫死在頁面上，屬於設定HTML的外觀操作樣式。而js是一個執行的程式，可以動態修改HTMl。而接下來我們來了解下CSS跟js究竟是什麼吧。
CSS是什麼?
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式的能力。
程式設計開發
程式設計工具
記事本：使用Windows系統自帶的記事本可以網頁。只需要在儲存文件時，以.html為字尾名進行儲存即可。]
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只能賦給一個表示長度的值，而表示背景圖案的background.image屬性則應該取一個表示圖片位置連結的值或者是關鍵字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——當前字型的高度，也就是font.size屬性的值;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，包括建立和修改等。
基於Node.js技術進行伺服器端程式設計。
歷史
它最初由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和框架如Node.js的發展，及其事件驅動及非同步IO等特性，JavaScript逐漸被用來編寫伺服器端程式。
【js和css的區別】相關文章：