26 個常見的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>或<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方面,則針對優化情況而定。
問題 20:如何在CSS中定義一個偽類?它們是用來幹什麼的
CSS偽類是用來新增一些選擇器的特殊效果。偽類的語法
selector:pseudo-class{property:value;}
問題 21:CSS和SCSS有什麼區別?
CSS和SCSS之間的區別如下:
- CSS是一種用於設計web頁面的樣式語言,而SCSS用於為瀏覽器組合CSS樣式表。
- SCSS 提供了一些變數,可以使用這些變數來縮短程式碼,這是與 CSS 相比的一大優勢。
問題 22:嵌入式樣式表的優缺點是什麼?
嵌入式樣式表的優點:
- 可以在一個文件中建立多種標籤型別。
- 在複雜情況下,可以使用選擇器和分組方法來應用樣式。
- 無需額外下載。
嵌入式樣式表的缺點:
無法控制多個文件。
電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
問題 23:列出使用的各種媒體型別。
不同的介質不區分大小寫,因此它們具有不同的屬性。 他們是:
- aural - 用於語音和音訊合成器
- print - 用於印表機
- projection - 用於方案展示,比如幻燈片
- handheld - 用於小的手持的裝置
- screen - 用於電腦顯示器
問題 24:font 的屬性有哪些?
- Font-style
- Font-variant
- Font-weight
- Font-size/line-weight
- Font-family
問題 25:“規則集”是什麼意思?
該指令告訴瀏覽器如何在HTML頁面上渲染特定元素。 它由一個選擇器和一個遵循規則集的宣告塊組成。 選擇器可以附加到其他選擇器,以通過規則集進行標識。
問題 26:什麼是 CSS 框架?
CSS 框架是一個庫,它允許使用CSS語言進行更輕鬆,更符合標準的Web設計。 這些框架中的大多數至少包含一個網格以及更多功能和其他基於Javascript的功能。 一些著名的CSS框架有:ACSS,Bulma,YAML,Foundation等。