導航:首頁 > 信息技術 > css的技術有哪些

css的技術有哪些

 發布時間：2022-11-28 03:28:38

A. css需要學習都有什麼呢

css的一些基本樣式，盒子的margin,padding這些東西的理解，絕對定位相對定位的應用和關系，浮動元素清浮動方法，盒子邊緣塌陷問題，偽元素的應用，css3動畫transform和@keyform(這個可能拼寫的不對)配合transtion的應用，css3d效果等。

B. css 有哪些技術

CSS有屬性,選擇符,偽類,偽對象,規則,聲明和濾鏡.不知道你所說的技術指的是什麼.

C. 1.CSS指的是什麼在網頁製作中為什麼要使用CSS技術 2.網頁製作中有哪幾種樣式設置方法各有何特點

1.css是網頁表現與內容分離的一種樣式設計語言，就比如每個人都有一雙眼睛、兩只耳朵、兩個鼻孔、一個嘴巴，而長的丑的人只是他的面部樣式不符合大眾的審美觀。
2.網站製作中之所以要使用css，是為了讓頁面布局樣式等更加美觀從而吸引更多閱讀者。就好比一個五官精緻的美女大家都愛看一樣！
3.
①行內樣式。例如：<p style="color:red;">樣式</p>(實際效果是p標簽中的字體為紅色)
②內嵌樣式。列如<p class="test">樣式</p> <style>.test{color:red;}</style>(效果同上)
③外聯樣式。列如把代碼 .test{color:red;} 保存在style.css文件中，然後在頁面中引入<link type="text/css" rel="stylesheet" href="style.css" />(效果同上)
（望採納哦！~~）

D. CSS面試須知，哪些需要掌握得CSS技巧

主要都圍繞知識點的理解與css兼容性問題上，請參考下面的
2.1 link和@import都可以為頁面引入CSS文件，其區別是？
將樣式定義在單獨的.css的文件里，link和@import都可以在html頁面引入css文件。有link和@import兩種方式，導入方式如下：
link方式：<link rel=」stylesheet」 type=」text/css」 href=」aa.css」>
@import方式：<style type=」text/css」>@import 「aa.css」;</style>
link和@import兩種導入css文件的區別：
祖先的差別。Link屬於XHTML標簽，而@import完全是CSS提供的一種方式。Link標簽除了可以載入CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能載入css了。
載入順序的差別。當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢時更為明顯。
兼容性的差別。由於@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
使用DOM控制樣式時的差別。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性？
CSS使用層疊的原則來考慮繼承、層疊次序和優先順序等重要特徵，從而判斷相互沖突的規則中哪個規則應該起作用。
繼承性是指，許多CSS的樣式規則不但影響選擇器所定義的元素，而且會被這些元素的後代繼承。
層疊性是指，當一個web頁面使用多個樣式表，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式沒有沖突的時候，瀏覽器會顯示所有的樣式。
優先順序是指，當發生樣式定義沖突時，瀏覽器首先會按照不同樣式規則的優先順序來應用樣式。CSS樣式的優先順序如下所示（其中數字3擁有最高的優先權）：
1.瀏覽器預設設置；
2.外部樣式表（.css文件）或者內部樣式表（位於<head>元素內部）；
3.內聯樣式（作為某個元素的style屬性的值）。
同等優先順序下，以最後定義的樣式為准，important比內聯高。
2.3 哪些屬性可以繼承？
Css中可以繼承的屬性如下：
文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；
表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；
其他屬性：Cursor、visibility；
2.4 CSS選擇器中，元素選擇器和類選擇器的區別是什麼？
元素選擇器是常見的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
類選擇器用於將樣式規則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時，首先要定義樣式類，其語法為：
.className{ }；
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設置為」className」，則可以將類選擇器的樣式與元素關聯。
在實際使用時，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
2.5 簡要描述CSS中的定位機制
CSS中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。
浮動定位是將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。
相對定位將元素相對於它在普通流中的位置進行定位。
絕對定位是指將元素的內容從普通流中完全移除，並且可以使用偏移屬性來固定該元素的位置。
固定定位是指將元素的內容固定在頁面的某個位置。
2.6 display屬性和 visibility屬性的區別？
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣；
2.如果將display屬性設置為inline，可以讓塊級元素表現得像內聯元素一樣；
3.可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不在顯示，不佔用文檔中的空間。
在DIV設計中，室友display:none屬性後，HTML元素（對象）的寬度。高度等各種
屬性都將」丟失」；而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
2.7 簡述對CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具備內容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個元素都被視為一個框，而每個框都有三個屬性：
border：元素的邊框（可能不可見），用於將框的邊緣與其他框分開；
margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白；
padding：內邊距，表示框內容和邊框之間的空間。
盒子模型的結構如圖所示：

由上圖可以看出，width和height指的是內容區域的寬度和高度。增加內邊距、外邊距和邊框不會影響到內容區域的尺寸，但會增加元素框的總尺寸。
因此，如果在一個具有邊框的元素中放置文本，往往需要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便於閱讀。而外邊距則可以在多個元素框之間創建空白，避免這些框都擠在一起。因此，在設計頁面時，經常會使用padding屬性和margin屬性來設置頁面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設置了元素的邊距以後，會增加元素在頁面布局中所佔的面積。
2.8 簡述CSS3中的偽類選擇器？
CSS3提供了大量偽類選擇器，瀏覽器對於有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：
目標偽類：即 :target，突出顯示活動的HTML錨，用於選取當前活動的目標元素；
元素狀態偽類：比如 :enabled、:disabled、:checked；
結構偽類： 比如 :first-child、:last-child、:empty、:only-child；
否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個元素。
2.9 為什麼建議設置背景圖像的同時還設置背景顏色？
一般建議在使用背景圖片的同時提供background-color屬性，並且將其設置為和圖像主要顏色類似的顏色。這樣，如果正在載入頁面，或者因為各種原因無法顯示背景圖像時，頁面可以使用這種顏色作為背景色。
2.10 如何居中div？如何居中一個浮動元素？
給div設置一個寬度，然後設置元素的左右外邊距為auto，比如，margin:0 auto。則可以實現div居中顯示。
對於浮動元素，設置其左右外邊距為關鍵字auto是無效的。此時，如果需要設置其居中顯示，可以：1.精確計算其左外邊距並進行設置，實現居中顯示。
2.使用一個居中顯示的div元素包含次浮動元素,
代碼如：<div style=」margin:0 auto;」><div style=」float:left;」></div></div>
2.11 在設置文本的字體時，為什麼建議設置替換字體？
可以使用font-family屬性來指定文本的字體，代碼如下所示：font-family:name/inherit;
此時，name為首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。
但是，如果用戶機器上並沒有安裝name所指定的字體，則會顯示默認字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會影響頁面的布局，就可以解決問題了。
我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體替代默認字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器才會使用默認字體顯示頁面。代碼如下所示：
h1{font-family:Georgia,serif;}
此時，如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對<h1>元素使用Times。盡管Times與Georgia並不完全匹配，但至少足夠接近。
因此，我們建議在所有font-family規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶機器無法提供與規則匹配的特定字體時，就可以選擇一個通用字體作為替換。
2.12 內聯元素可以實現浮動嗎？
在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。因此，對於內聯元素，如果設置為浮動，會產生和塊級框相同的效果。
2.13 什麼情況下需要額外設置表格的顯示規則？
默認情況下（不額外設置表格的顯示規則時），表格按照自動表格布局進行顯示，即瀏覽器在顯示表之前查看每一個單元格，然後基於所有格的設置計算表單大小，而列的寬度是由列段元個中沒有折行的最寬的內容設定的。此時，單元格的大小會適應內容的大小。
自動表格布局的演算法在表格復雜時會比較慢，這是由於它需要在確定最終的布局之前訪問表格中多有的內容。在不能提前確定每一列的大小時，這種方式會非常適用。
如果額外設置表格的顯示規則，即設置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決於表格寬度，列寬度，表格邊框寬度，單元格間距，而與單元格的內容無關。瀏覽器將使用某列指定的寬度來計算布局，並使用該寬度計算該列中所有其他單元格的寬度。
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。因為如果指定使用固定表格布局，瀏覽器在接收到第一行後就可以顯示表格。如果表格龐大且已經指定了大小，則會加速表的顯示。
2.14 簡要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用，來插入生成內容，可以在元素之前或之後放置生成的內容。可以插入文本、圖像、引號，並可以結合計數器為頁面元素插入編號。比如，查看如下代碼：
body {counter-reset:chapter;}
h1:before { content:」第」counter(chapter)」章」;}
h1 { counter-increment:chapter;}
使用content屬性，並結合:before選擇器和計數器counter，可以在每個<h1>元素前插入新的內容。
2.15 CSS Sprite是什麼，談談這個技術的優缺點
CSS Sprite是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background-repeat」，」background-position」的組合進行背景定位。
其優點在於：①減少網頁的http請求，提高性能，這也是CSS Sprite最大的優點，
也是其被廣泛傳播和應用的主要原因；
②減少圖片的位元組，多張圖片合並成1張圖片的位元組小於多張圖片的位元組總和；
③較少了命名困擾，只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率；
④更換風格方便。只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便；
但是CSS Sprite也存在一些不可忽視的缺點：
①圖片合成比較麻煩；
②背景設置時，需要得到每一個背景單元的精確位置；
③維護合成圖片時，最好只是向下加圖片，而不是更改已有圖片。
2.16 對CSS3有了解嗎？列舉幾個CSS3的新特性並簡要描述
CSS3作為CSS技術的升級版本，著力於模塊化發展，將規范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄布局、2D/3D轉換、動畫等。
其中，CSS3提供了一些復雜選擇器，用於實現頁面復雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用於為元素設置漸變效果的背景；轉換可以實現元素的變換，比如位移、縮放、旋轉等；過渡可以實現簡單的動畫效果；動畫屬性則可以實現復雜的動畫，可以實現逐幀製作動畫。
2.17 過渡與動畫的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡為最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為復雜的動畫。
2.18 什麼是CSS reset？
CSS reset，又叫做CSS重寫或者CSS重置，用於改寫HTML標簽的默認樣式。
有些HTML標簽在瀏覽器里有默認的樣式，例如p標簽有上下邊距，li標簽有列表標識符號等。這些默認樣式在不同瀏覽器之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。著必然會帶來瀏覽器兼容問題。
因此，在CSS代碼中，可以使用CSS代碼去掉這些默認樣式，即重新定義標簽樣式，從而覆蓋瀏覽器的CSS默認屬性，即CSS reset。
需要注意的是，在進行樣式重寫時，不建議使用 * 選擇器進行重寫，這樣會降低效率，影響性能。
2.19 如何清除浮動元素所帶來的影響？
浮動定位是指將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以元素浮動之後，其原有位置不再保留，其他元素的位置會受到影響。
如果需要清除左側或者右側浮動元素帶來的影響，則可以使用clear屬性來設置。另外，包含框呃逆的子元素浮動後，如果包含框沒有設置具體的高度，則其高度會發生變化，此時，可以使用overflow屬性來清除子元素浮動後帶來的影響。
2.20 談談你對瀏覽器兼容性問題的理解
瀏覽器的類型及版本的不同會造成CSS效果不盡相同，因此需要實現瀏覽器兼容，也可以針對不同的瀏覽器編寫不同的CSS。
目前，各主流瀏覽器的新版本，對應W3C的標准支持很好，因此，首先保證代碼符合W3C的標准，這是解決瀏覽器兼容問題的前提。
其次，對於某些支持受限的屬性，針對不同的瀏覽器添加相應的前綴，比如-webkit-、-o-、-moz-。
第三，對於IE的低版本，可以編寫帶有特定前綴的代碼，實現版本識別。比如：
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#f1ee18\9;/*IE6 7 8識別*/
+background-color:#f1ee18;/*IE6 7識別*/
_background-color:#f1ee18;/*IE6識別*/
}
另外，對於特定的兼容性問題，特殊解決。常見的特殊問題有：
1.使用CSS reset：對於有些HTML標簽，瀏覽器默認的margin和padding不同，可以使用CSS代碼改寫默認的樣式效果，從而實現統一
2.IE低版本中，不能使用auto關鍵字實現塊級元素居中顯示，可以改用設置父元素的text-align；
3.子元素設置上外邊距時，父元素需要設置邊框或者外邊距；
4.外邊距合並問題。

E. css是什麼意思

HTML（超文本標記語言）和CSS（級聯樣式表）是用於構建Web頁面的兩項核心技術。HTML為各種設備提供頁面的結構，為CSS提供（視覺和聽覺的）布局。與圖形和腳本一起，HTML和CSS是構建網頁和Web應用程序的基礎。

HTML稱為超文本標簽語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

超文本是一種組織信息的方式，它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某台計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。

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

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

(5)css的技術有哪些擴展閱讀：

CSS具有以下特點：

1、豐富的樣式定義

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

2、易於使用和修改

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

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

3、多頁面應用

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

F. CSS的優點是什麼

CSS具有以下優點：

豐富的樣式定義

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

易於使用和修改

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

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

多頁面應用

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

層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最後一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。

這些後來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最後面設置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網站中，往往需要大量或重復的表格和font元素形成各種規格的文字樣式，這樣做的後果就是會產生大量的HTML標簽，從而使頁面文件的大小增加。

而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在載入頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。

G. css是什麼

CSS是Cascading Style Sheets（層疊樣式表單）的簡稱。CSS就是一種叫做樣式表（stylesheet）的技術。也有的人稱之為「層疊樣式表」（Cascading Stylesheet）。
CSS主要用來設計網頁的樣式，美化網頁；它不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
在主頁製作時採用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。
在css進入前端語言之前，很多一部分人都把css當做一種前端語言，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對於網頁進行格式化。
工作原理
CSS是一種定義樣式結構如字體、顏色、位置等的語言，被用於描述網頁上的信息格式化和現實的方式。CSS樣式可以直接存儲於HTML網頁或者單獨的樣式單文件。無論哪一種方式，樣式單包含將樣式應用到指定類型的元素的規則。外部使用時，樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。
樣式規則是可應用於網頁中元素，如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中，外部樣式單保存在獨立的文檔中，網頁通過一個特殊標簽鏈接外部樣式單。
名稱CSS中的「層疊（cascading）」表示樣式單規則應用於HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結構，更具體的樣式覆蓋通用樣式。樣式規則的優先順序由CSS根據這個層次結構決定，從而實現級聯效果。

H. 什麼是CSS

CSS
釋義<一>

CSS(Cascading Style Sheets)，即層疊樣式表，與HTML超文本標記語言配合以定義網頁表現的樣式語言。

歷史

當初一幫技術人員想出HTML，主要側重於定義內容，比如<p>表示一個段落，<h1>表示標題，而並沒有過多設計HTML的排版和界面效果。

隨著Internet的迅猛發展，HTML被廣泛應用，上網的人們當然希望網頁做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出來。為了解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML增加很多的屬性結果將代碼變得很臃腫，將文本變成圖片，過多利用Table來排版，用空白的圖片表示白色的空間等。直到CSS出現。

CSS可算是網頁設計的一個突破，它解決了網頁界面排版的難題。可以這么說，HTML的Tag主要是定義網頁的內容(Content)，而CSS決定這些網頁內容如何顯示(Layout)。

CSS與網頁的鏈接方法

內嵌樣式(Inline Style)
內部樣式表(Internal Style Sheet)
外部樣式表(External Style Sheet)

內嵌樣式(Inline Style)
Inline Style是寫在Tag裡面的。內嵌樣式只對所在的Tag有效。

<P style="font-size:20pt; color:red">這個Style定義<p></p>裡面的文字是20pt字體，字體顏色是紅色。</p>
顯示示例

內部樣式表(Internal Style Sheet)
內部樣式表是寫在HTML的<head></head>裡面的。內部樣式表只對所在的網頁有效。

<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 這個標題使用了Style。</H1>
<H1>這個標題沒有使用Style。</H1>
</BODY>
</HTML>
顯示示例

內部樣式表(Internal Sytle Sheet)要用到Style這個Tag，寫法如下：

<STYLE type="text/css">
......
</STYLE>
外部樣式表(External Style Sheet)
如果很多網頁需要用到同樣的樣式(Styles)，用什麼方法呢？

將樣式(Styles)寫在一個以.css為後綴的CSS文件里，然後在每個需要用到這些樣式(Styles)的網頁里引用這個CSS文件。

比如可以用文本編輯器(NotePad)建立一個叫home的文件，文件後綴不要用.txt，改成.css。文件內容如下：

H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然後你建立一個網頁，代碼如下：

<HTML>
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 這個標題使用了Style。</H1>
<H1>這個標題沒有使用Style。</H1>
</BODY>
</HTML>
顯示示例

使用外部(Extenal)樣式表，相對於內嵌(Inline)和內部式(Internal)的，有以下優點：

樣式代碼可以復用。一個外部CSS文件，可以被很多網頁共用。
便於修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網頁。
提高網頁顯示的速度。如果樣式寫在網頁里，會降低網頁顯示的速度，如果網頁引用一個CSS文件，這個CSS文件多半已經在緩存區(其它網頁早已經引用過它)，網頁顯示的速度就比較快。

解決css文件過大的問題

如果頁面內容過多，css文件會很大，同樣會造成很多不便，那麼我們該如何解決這個問題呢？我們可以對每個細節進行css設計，比如對於字體的設置我們可以存入font.css文件，對邊界等的設定我們可以存入lay.css文件，對其他一些版式的規定可以存入other.css文件，然後我們建立一個main.css文件，然後在里邊寫入如下代碼：

@import url(font.css);
@import url(lay.css);
@import url(other.css);

然後只需要在html文件里添上main.css的鏈接即可，這樣子一方面減小了css文件的容量，另一方面似乎也更方便管理，特別是對大型網站。

串聯(Cascading)
CSS第一個字母，是Cascading，意為串聯。它是指不同來源的樣式(Styles)可以合在一起，形成一種樣式。

Cascading的順序是：

瀏覽器預設(browser default)(優先順序最低)
外部樣式表(Extenal Style Sheet)
內部樣式表(Internal Style Sheet)
內嵌樣式表(Inline Style)(優先順序最高)
樣式(Styles)的優先順序依次是內嵌(inline), 內部(internal), 外部(external), 瀏覽器預設(browser default)。假設內嵌(Inline)樣式中有font-size:30pt, 而內部(Internal)樣式中有font-size:12pt，那麼內嵌(Inline)式樣式就會覆蓋內部(Internal)樣式。

I. 什麼是css

參見《CSS 簡介》。

一、CSS是什麼

CSS，指的是Cascading Style Sheet（層疊樣式表），是用來控制網頁外觀的一門技術。我們知道，前端最核心的3個技術是：HTML、CSS、JavaScript，三者的關系如下。

HTML用於控制網頁的結構，CSS用於控制網頁的外觀，JavaScript控制的是網頁的行為。

在互聯網發展早期，網頁都是用HTML來做的，這樣的頁面可想而知單調成什麼樣了。為了改造HTML標簽的默認外觀，使得頁面變得更加美觀，後來就引入了CSS。

二、CSS和CSS3

CSS發展至今，歷經CSS1.0、CSS2.0、CSS2.1以及CSS3.0幾個版本。其中，CSS2.1是CSS2.0的修訂版，CSS3.0是CSS的最新版本。

很多初學者都有一個疑問：「現在都CSS3的時代了，CSS2不是被淘汰了嗎，為什麼還要學CSS2呢？」這個誤區非常嚴重，曾經誤導絕大多數的初學者。其實，我們現在所說的CSS3，一般指的是相對於CSS2「新增加的內容」，並不是說CSS2被淘汰了。准確來說，你要學的CSS其實等於CSS2加上CSS3。本書介紹的是CSS2.1，對於CSS3新增的技術，小夥伴們可以關注「從0到1系列」的《從0到1：HTML5+CSS3修煉之道》這本書。

J. 什麼是css

CSS就是一種叫做樣式表（stylesheet）的技術。也有的人稱之為層疊樣式表（Cascading
Stylesheet）。
在主頁製作時採用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。
它的作用可以達到：
（1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。
（3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。
（4）你可以輕松地控制頁面的布局
。
（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那麼整個站點的所有頁面都會隨之發生變動。
想一想，沒有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標簽來實現，代碼非常煩瑣。
很難想像，如果在一個頁面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長度一定臃腫不堪。
說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這么簡單。
CSS是通過對頁面結構的風格控制的思想，控制整個頁面的風格的。
式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖對一些非常老的瀏覽器，頁不會產生頁面混亂的現象。

閱讀全文

與css的技術有哪些相關的資料

熱點內容
如何鑒定技術工人 瀏覽：138
轎車過戶二手交易費是多少 瀏覽：398
有產品如何推銷 瀏覽：388
開了創業板多久才能交易 瀏覽：452
代理銷售公司需要哪些條件 瀏覽：546
fxt交易平台哪個好用 瀏覽：717
什麼是利基市場兆易創新 瀏覽：48
如何做訴訟代理 瀏覽：476
有什麼小程序可以發布簡單問答 瀏覽：724
為什麼聯通卡有話費接不到信息 瀏覽：718
t3產品數據服務怎麼啟動 瀏覽：866
19日為什麼是非港股通交易日 瀏覽：717
哪裡有學扒輪胎的技術 瀏覽：268
蘋果信息表情包為什麼發不出去 瀏覽：556
為什麼進口冷凍產品好 瀏覽：637
吉林圖釘怎麼代理線上咨詢 瀏覽：678
毒上交易關閉多久退錢 瀏覽：647
大數據處理中會有哪些問題 瀏覽：909
虛擬產品在哪裡交易 瀏覽：925
泰安哪個奇石市場好 瀏覽：480