css程序如何工作
CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力,那么你對(duì)CSS了解多少呢?以下是由學(xué)習(xí)啦小編整理關(guān)于什么是css的內(nèi)容,希望大家喜歡!
css的語(yǔ)言特點(diǎn)
CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素。
總體來(lái)說(shuō),CSS具有以下特點(diǎn):
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀,以及設(shè)置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內(nèi)容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁(yè)面效果。
易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個(gè)專門的CSS文件中,以供HTML頁(yè)面引用??傊?,CSS樣式表可以將所有的樣式聲明統(tǒng)一存放,進(jìn)行統(tǒng)一管理。
另外,可以將相同樣式的元素進(jìn)行歸類,使用同一個(gè)樣式進(jìn)行定義,也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中,也可以將一個(gè)CSS樣式指定到某個(gè)頁(yè)面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
多頁(yè)面應(yīng)用
CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中,這樣我們就可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁(yè)面文件,在任何頁(yè)面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁(yè)面風(fēng)格的統(tǒng)一。
層疊
簡(jiǎn)單的說(shuō),層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式,這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁(yè)面使用了同一套CSS樣式表,而某些頁(yè)面中的某些元素想使用其他樣式,就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁(yè)面中。這些后來(lái)定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫,在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
頁(yè)面壓縮
在使用HTML定義頁(yè)面效果的網(wǎng)站中,往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式,這樣做的后果就是會(huì)產(chǎn)生大量的HTML標(biāo)簽,從而使頁(yè)面文件的大小增加。而將樣式的聲明單獨(dú)放到CSS樣式表中,可以大大的減小頁(yè)面的體積,這樣在加載頁(yè)面時(shí)使用的時(shí)間也會(huì)大大的減少。另外,CSS樣式表的復(fù)用更大程序的縮減了頁(yè)面的體積,減少下載的時(shí)間。
css的工作原理
CSS是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,被用于描述網(wǎng)頁(yè)上的信息格式化和現(xiàn)實(shí)的方式。CSS樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件。無(wú)論哪一種方式,樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時(shí),樣式單規(guī)則被放置在一個(gè)帶有文件擴(kuò)展名_css的外部樣式單文檔中。
樣式規(guī)則是可應(yīng)用于網(wǎng)頁(yè)中元素,如文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁(yè)中,外部樣式單保存在獨(dú)立的文檔中,網(wǎng)頁(yè)通過(guò)一個(gè)特殊標(biāo)簽鏈接外部樣式單。
名稱CSS中的“層疊(cascading)”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說(shuō),CSS樣式單中的樣式形成一個(gè)層次結(jié)構(gòu),更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由CSS根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果。
css的語(yǔ)言基礎(chǔ)
屬性
屬性的名字是一個(gè)合法的標(biāo)識(shí)符,它們是CSS語(yǔ)法中的關(guān)鍵字。一種屬性規(guī)定了格式修飾的一個(gè)方面。例如:color是文本的顏色屬性,而text-indent則規(guī)定了段落的縮進(jìn)。
要掌握一個(gè)屬性的用法,有六個(gè)方面需要了解。具體敘述如下:
①該屬性的合法屬性值(legal value)。顯然段落縮進(jìn)屬性text-indent只能賦給一個(gè)表示長(zhǎng)度的值,而表示背景圖案的background.image屬性則應(yīng)該取一個(gè)表示圖片位置鏈接的值或者是關(guān)鍵字none表示不用背景圖案。
?、谠搶傩缘哪J(rèn)值(initial value)。當(dāng)在樣式表單中沒(méi)有規(guī)定該屬性,而且該屬性不能從它的父級(jí)元素那兒繼承的時(shí)候,則瀏覽器將認(rèn)為孩屬性取它的默認(rèn)值。
?、墼搶傩运m用的元素(Applies to)。有的屬性只適用于某些個(gè)別的元素,比如white-space屬性就只適用于塊級(jí)元素。white-space屬性可以取normal、pre和nowrap三個(gè)值。當(dāng)取normal的時(shí)候,瀏覽器將忽略掉連續(xù)的空白字符,而只顯示一個(gè)空白字符。當(dāng)取pre的時(shí)候,則保留連續(xù)的空白字符。而取nowrap的時(shí)候,連續(xù)的空白字符被忽略,而且不自動(dòng)換行。
?、茉搶傩缘闹凳欠癖幌乱患?jí)繼承(inherited)。
?、萑绻搶傩阅苋“俜种?percentage),那么該百分值將如何解釋。也就是百分值所相對(duì)的標(biāo)準(zhǔn)是什么。如margin屬性可以取百分值,它是相對(duì)于margin所存元素的容器的寬度。
⑥該屬性所屬的媒介類型組(media groups)。
屬性值
?、僬麛?shù)和實(shí)數(shù)
這和普通意義上的整數(shù)和實(shí)數(shù)沒(méi)有多大區(qū)別。在CSS中只能使用浮點(diǎn)小數(shù),而不能像其他編程語(yǔ)言那樣使用科學(xué)記數(shù)法表示實(shí)數(shù),即1.2E3在CSS中將是不合法的。下面是幾個(gè)正確的例子,整數(shù):128、-313,實(shí)數(shù):12.20、1415、-12.03。
?、陂L(zhǎng)度量
一個(gè)長(zhǎng)度量由整數(shù)或?qū)崝?shù)加上相應(yīng)的長(zhǎng)度單位組成。長(zhǎng)度量常用來(lái)對(duì)元素定位。而定位分為絕對(duì)定位和相對(duì)定位,因而長(zhǎng)度單位也分為相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位。
相對(duì)長(zhǎng)度單位有:em——當(dāng)前字體的高度,也就是font.size屬性的值;ex——當(dāng)前字體中小寫字母x的高度;Dx——一個(gè)像素的長(zhǎng)度,其實(shí)際的長(zhǎng)度由顯示器的設(shè)置決定,比如在800木600的設(shè)置下,一個(gè)像素的長(zhǎng)度就等于屏幕的寬度除以800。
另一一點(diǎn)值得注意的是,子級(jí)元素不繼承父級(jí)元素的相對(duì)長(zhǎng)度值,只繼承它們的實(shí)際計(jì)算值。
③百分?jǐn)?shù)量(percentages)
百分?jǐn)?shù)量就是數(shù)字加上百分號(hào)。顯然,百分?jǐn)?shù)量總是相對(duì)的,所以和相對(duì)長(zhǎng)度量一樣,百分?jǐn)?shù)量不被子級(jí)元素繼承。
看過(guò)“css程序如何工作”的人還看了: