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