值得收藏的26個css面試題，增強你的CSS基礎！-css教學-PHP中文網

首頁

web前端

css教學

值得收藏的26個css面試題，增強你的CSS基礎！

青灯夜游

Jul 06, 2021 am 10:19 AM

css面試題

CSS在網頁設計中非常流行，可以減少結構內容中的複雜性和重複。本篇文章給大家分享26個基於css的面試題，可以增強你的CSS基礎，快來學習吧。

值得收藏的26個css面試題，增強你的CSS基礎！

（學習影片分享：css影片教學）

CSS是層疊樣式表（ Cascading Style Sheets ）的縮寫，是一種樣式表語言，用於描述以HTML 之類的標記語言編寫的文檔的佈局。它是用於設計Web頁面的三劍客之一，另外兩位浩客是HTML和Javascript。

CSS 的設計目的是使樣式和內容分離，包括佈局、顏色和字體。這種分離可以提高內容的可訪問性，在樣式特徵的規範中提供更多的靈活性和控制，透過在一個單獨的. .css 文件中指定相關的CSS，使多個web 頁面能夠共享格式，並減少結構內容中的複雜性和重複。

它有簡單的語法，並使用大量的英文關鍵字來指定各種樣式屬性的名稱。

既然我們已經討論了CSS的基礎知識，讓我們來觀察一下基於CSS的重要面試問題。

問題1：什麼是 CSS？

CSS（層疊樣式表）是一種樣式語言，對於 HTML 元素來說夠簡單。它在網頁設計中非常流行，其應用在XHTML中也很常見。

問題2：為什麼要開發CSS？

CSS是在1997年開發的，作為一種web開發人員設計他們正在創建的web頁面佈局的方法。它的目的是讓開發者將網站程式碼的內容和結構從視覺設計中分離出來。

這種結構和設計的分離允許HTML執行比原來更多的功能。

問題3：CSS的主要版本有哪些？

CSS的不同版本：

CSS1
CSS2
CSS2.1
CSS3

#問題4：CSS樣式的組成部分是什麼？

一個樣式規則由三個部分組成：

#選擇器–選擇器是HTML 標記，用於選擇要設定樣式的內容。它根據其ID，類別和名稱選擇 HTML元素。
屬性–屬性是 HTML 標籤的屬性。簡而言之，所有 HTML 屬性都會轉換為 CSS 屬性。
值– CSS中的值定義CSS屬性的一組有效值。

問題5：有多少種方法可以將CSS 集成為web 頁面

CSS 可以集成為三種方式

內聯：直接在HTML元素上使用

<p style=”colour:skyblue;”>hello world</p>

外部:在工作空間中建立單獨的CSS文件，然後在建立的每個web頁面中連結它們

<head>

<link rel="text/css" href="your_CSS_file_location"/>

</head>

內部: web 頁面的head 元素在其中實作了內部CSS。

<head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

問題 6：誰在維護 CSS 規格？

萬維網協會維護 CSS規格。

問題 7：偽元素是什麼意思？

偽元素是新增到選擇器的關鍵字，它允許一種樣式，即所選元素的特定部分。 CSS用於在HTML標記中套用樣式，它允許在不影響實際文件的情況下對文件進行額外標記。它可以用來：

為第一個字母、行或元素設定樣式。
插入內容

語法：

Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}

問題 8：CSS有什麼優點？

CSS的優點是:

一致性 – CSS有助於建立一致的框架，設計人員可以使用該框架來建立其他站點。因此，網頁設計師的效率也提高了。
容易使用 – CSS 是非常容易學習和簡化網站開發。所有程式碼都放在一個頁面上，這意味著對程式碼行進行改進或編輯不需要重複修改多個頁面.
*網站速度 *–通常，一個網站使用的程式碼最多可以達到2 頁或更多。但是對於CSS，這不是問題。它只需要2-3行程式碼，因此，網站資料庫保持整潔，消除任何網站載入問題。
裝置相容性 – 由於人們使用不同類型的智慧型裝置存取互聯網，因此需要響應式web設計。 CSS 在這裡的作用是使 web 頁面的響應性更好，這樣它們就可以在所有裝置中以相同的方式顯示。
多重瀏覽器支援 – CSS享有多瀏覽器的支持，它與所有主要的網路瀏覽器相容。
重新定位 – CSS可讓您定義頁面上 web 元素位置的變更。透過它的實現，開發人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁面的美學吸引力或其他考慮因素保持一致。

問題9：CSS 漸層是什麼？

漸層是指我們在兩個圖像之間創建中間幀，以獲得第一個圖像的外觀，然後發展成第二個圖像的過程，它主要用於創建動畫。

問題10：什麼是 CSS 特異性？

CSS 特定性是一個分數或等級，它決定了元素必須使用哪種樣式宣告。 CSS 中有四類可以授權選擇器的特異性等級：

內嵌樣式
ID
類，屬性與偽類
元素與偽元素

#問題12：CSS有什麼缺點

CSS的缺點有:

版本太多 – 與HTML或Javascript等其他參數相比，CSS有許多版本-CSS1 ，CSS2，CSS2.1，CSS3。因此，CSS變得非常混亂，尤其是對於初學者。
缺乏安全性 - 由於CSS是基於開放文字的系統，因此它沒有內建的安全系統來防止其被覆蓋。透過對其讀取/寫入操作的訪問，任何人都可以更改 CSS 文件並更改連結。
Fragmentation - 使用 CSS，可能無法在一個瀏覽器上使用另一個瀏覽器。因此，在網站上線之前，Web 開發人員必須透過在多個瀏覽器上執行程式來測試相容性。
複雜性–使用 Microsoft FrontPage 等第三方軟體會使CSS變得複雜。

問題13：什麼是RWD (Responsive Web Design)?

RWD（響應式Web設計）技術用於在每個螢幕尺寸以及移動，平板電腦，桌上型電腦和筆記型電腦等裝置上完美顯示設計頁面，讓我們無需為每個裝置創建不同的頁面。

問題14：CSS 精靈有什麼好處?

CSS精靈的好處有：

透過將各種小圖像組合成一個圖像，減少了web頁面的載入時間。
減少HTTP請求，進而減少載入時間。

問題 15：什麼是 CSS 上下文選擇器？

上下文選擇器，嚴格來講，叫後位組合式選擇器，就是一組以空格分隔的標籤名。用於選擇作為指定祖先元素後代的標籤。只要有標籤在它的層次結構「上游」存在這麼一個祖先，那麼就會選取該標籤。無論從該標籤到作為祖先的上下文之間隔著多少層次都沒有關係。

問題16：什麼是漸進增強和平穩退化?

#漸進增強的概念是指從最基本的可用性出發，在保證網站頁面在低階瀏覽器中的可用性和可訪問性的基礎上，逐步增加功能及提高使用者體驗。本質上講，我們日常的一些開發習慣，例如首先使用標記語言編寫頁面，然後透過樣式表來控制頁面樣式等，都屬於漸進增強的概念；其他更為明顯的行為包括使用HTML5、CSS3等新技術，針對進階瀏覽器為頁面提高使用者體驗的豐富程度。

平穩退化的概念是指首先使用最新的技術面向高級瀏覽器建立最強的功能及用戶體驗，然後針對低階瀏覽器的限制，逐步衰減那些無法被支持的功能及體驗；在我們日常的開發中，一個典型的平穩退化的例子就是首先針對Chrome編寫頁面代碼，然後修復IE中的異常或針對IE去除那些無法被實現的功能特色.

所以，這兩個概念方法其實早已並存在我們的日常開發工作中了，只是「漸進增強」與「平穩退化」這樣的措辭是近些年才開始被普及。在我們眼下的HTML5與CSS3實戰用，這兩個概念就尤其重要了，怎樣保證使用不斷變化的新技術來構建在主流瀏覽器下都具有基本可用性的站點，並針對高級瀏覽器進行體驗提升，這些都是我們在開發過程中需要明確的思路。

問題 17：我們如何在網頁上新增圖示？

我們可以使用諸如font-awesome或阿里的 iconfont 之類的圖示庫將圖示新增至HTML網頁。我們必須將給定圖標類別的名稱新增到任何內聯HTML元素中。（<i></i>或<span></span>）。圖示庫中的圖示是可縮放的向量，可以使用CSS進行自訂。

問題 18：哪個屬性指定邊框的寬度？

border-width指定邊框的寬度。

问题 19：如何区分物理标签和逻辑标签?

物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。

如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单

//物理元素
<b>我想用b标签加粗</b>
 
//逻辑元素
<strong>我想用strong标签加粗</strong>
 
//两段文字都加粗了，而且视觉效果完全一样

确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？

物理元素

物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话：物理元素就是告诉浏览器该怎么显示出来。

逻辑元素

逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。

Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做，从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。