溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css基礎(chǔ)面試題及答案有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css基礎(chǔ)面試題及答案有哪些”吧！
CSS是層疊樣式表（ Cascading Style Sheets ）的縮寫(xiě)，是一種樣式表語(yǔ)言，用于描述以 HTML 之類(lèi)的標(biāo)記語(yǔ)言編寫(xiě)的文檔的布局。 它是用于設(shè)計(jì)Web頁(yè)面的三劍客之一，另外兩位浩客是HTML和Javascript。
CSS 的設(shè)計(jì)目的是使樣式和內(nèi)容分離，包括布局、顏色和字體。這種分離可以提高內(nèi)容的可訪問(wèn)性，在樣式特征的規(guī)范中提供更多的靈活性和控制，通過(guò)在一個(gè)單獨(dú)的. .css 文件中指定相關(guān)的 CSS，使多個(gè) web 頁(yè)面能夠共享格式，并減少結(jié)構(gòu)內(nèi)容中的復(fù)雜性和重復(fù)。它具有簡(jiǎn)單的語(yǔ)法，并使用大量的英文關(guān)鍵字來(lái)指定各種樣式屬性的名稱(chēng)。
CSS（層疊樣式表）是一種樣式語(yǔ)言，對(duì)于 HTML 元素來(lái)說(shuō)足夠簡(jiǎn)單。 它在網(wǎng)頁(yè)設(shè)計(jì)中非常流行，其應(yīng)用在XHTML中也很常見(jiàn)。
CSS是在1997年開(kāi)發(fā)的，作為一種web開(kāi)發(fā)人員設(shè)計(jì)他們正在創(chuàng)建的web頁(yè)面布局的方法。它的目的是讓開(kāi)發(fā)者將網(wǎng)站代碼的內(nèi)容和結(jié)構(gòu)從視覺(jué)設(shè)計(jì)中分離出來(lái)。
這種結(jié)構(gòu)和設(shè)計(jì)的分離允許HTML執(zhí)行比原來(lái)更多的功能。
CSS的不同版本：
CSS1
CSS2
CSS2.1
CSS3
一個(gè)樣式規(guī)則由三部分組成：
選擇器–選擇器是 HTML 標(biāo)記，用于選擇要設(shè)置樣式的內(nèi)容。 它根據(jù)其ID，類(lèi)和名稱(chēng)選擇 HTML元素。
屬性–屬性是 HTML 標(biāo)簽的一種屬性。 簡(jiǎn)而言之，所有 HTML 屬性都轉(zhuǎn)換為 CSS 屬性。
值– CSS中的值定義CSS屬性的一組有效值。
CSS 可以集成為三種方式
內(nèi)聯(lián)：直接在HTML元素上使用
<p style=”colour:skyblue;”>hello world</p>
外部:在工作空間中創(chuàng)建單獨(dú)的CSS文件，然后在創(chuàng)建的每個(gè)web頁(yè)面中鏈接它們
<head> <link rel="text/css" href="your_CSS_file_location"/> </head>
內(nèi)部: web 頁(yè)面的 head 元素在其中實(shí)現(xiàn)了內(nèi)部 CSS。
<head>
<style>
P{
color : lime;
background-color:black;
}
</style>
</head>萬(wàn)維網(wǎng)協(xié)會(huì)維護(hù) CSS規(guī)范。
偽元素是添加到選擇器的關(guān)鍵字，它允許一種樣式，即所選元素的特定部分。CSS用于在HTML標(biāo)記中應(yīng)用樣式，它允許在不影響實(shí)際文檔的情況下對(duì)文檔進(jìn)行額外標(biāo)記。它可以用來(lái)：
為第一個(gè)字母、行或元素設(shè)置樣式。
插入內(nèi)容
語(yǔ)法：
Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}CSS的優(yōu)點(diǎn)是:
一致性 – CSS有助于構(gòu)建一致的框架，設(shè)計(jì)人員可以使用該框架來(lái)構(gòu)建其他站點(diǎn)。 因此，網(wǎng)頁(yè)設(shè)計(jì)師的效率也提高了。
易于使用 – CSS 是非常容易學(xué)習(xí)和簡(jiǎn)化網(wǎng)站開(kāi)發(fā)。所有代碼都放在一個(gè)頁(yè)面上，這意味著對(duì)代碼行進(jìn)行改進(jìn)或編輯不需要重復(fù)修改多個(gè)頁(yè)面.
*網(wǎng)站速度 *– 通常，一個(gè)網(wǎng)站使用的代碼最多可以達(dá)到 2 頁(yè)或更多。但是對(duì)于CSS，這不是問(wèn)題。它只需要2-3行代碼，因此，網(wǎng)站數(shù)據(jù)庫(kù)保持整潔，消除任何網(wǎng)站加載問(wèn)題。
設(shè)備兼容性 – 由于人們使用不同類(lèi)型的智能設(shè)備訪問(wèn)互聯(lián)網(wǎng)，因此需要響應(yīng)式web設(shè)計(jì)。CSS 在這里的作用是使 web 頁(yè)面的響應(yīng)性更好，這樣它們就可以在所有設(shè)備中以相同的方式顯示。
多瀏覽器支持 – CSS享有多瀏覽器的支持，它與所有主要的互聯(lián)網(wǎng)瀏覽器兼容。
重新定位 – CSS允許您定義頁(yè)面上 web 元素位置的變化。通過(guò)它的實(shí)現(xiàn)，開(kāi)發(fā)人員可以將 HTML 元素放置在他們喜歡的位置，以便與頁(yè)面的美學(xué)吸引力或其他考慮因素保持一致。
漸變是指我們?cè)趦煞鶊D像之間創(chuàng)建中間幀，以獲得第一幅圖像的外觀，然后發(fā)展成第二幅圖像的過(guò)程，它主要用于創(chuàng)建動(dòng)畫(huà)。
CSS 特定性是一個(gè)分?jǐn)?shù)或等級(jí)，它決定了元素必須使用哪種樣式聲明。 CSS 中有四類(lèi)可以授權(quán)選擇器的特異性級(jí)別：
內(nèi)聯(lián)樣式
ID
類(lèi)，屬性和偽類(lèi)
元素和偽元素
CSS的缺點(diǎn)有:
版本太多 – 與HTML或Javascript等其他參數(shù)相比，CSS有很多版本-CSS1，CSS2，CSS2.1，CSS3。 因此，CSS變得非?；靵y，尤其是對(duì)于初學(xué)者。
缺乏安全性 - 由于CSS是基于開(kāi)放文本的系統(tǒng)，因此它沒(méi)有內(nèi)置的安全系統(tǒng)來(lái)防止其被覆蓋。 通過(guò)對(duì)其讀/寫(xiě)操作的訪問(wèn)，任何人都可以更改 CSS 文件并更改鏈接。
Fragmentation - 使用 CSS，可能無(wú)法在一個(gè)瀏覽器上使用另一瀏覽器。 因此，在網(wǎng)站上線之前，Web 開(kāi)發(fā)人員必須通過(guò)在多個(gè)瀏覽器上運(yùn)行程序來(lái)測(cè)試兼容性。
復(fù)雜性–使用 Microsoft FrontPage 等第三方軟件會(huì)使CSS變得復(fù)雜。
RWD（響應(yīng)式Web設(shè)計(jì)）技術(shù)用于在每種屏幕尺寸以及移動(dòng)，平板電腦，臺(tái)式機(jī)和筆記本電腦等設(shè)備上完美顯示設(shè)計(jì)頁(yè)面，讓我們無(wú)需為每個(gè)設(shè)備創(chuàng)建不同的頁(yè)面。
CSS精靈的好處有：
通過(guò)將各種小圖像組合成一個(gè)圖像，減少了web頁(yè)面的加載時(shí)間。
減少HTTP請(qǐng)求，從而減少加載時(shí)間。
上下文選擇器，嚴(yán)格來(lái)講，叫后代組合式選擇器，就是一組以空格分隔的標(biāo)簽名。用于選擇作為指定祖先元素后代的標(biāo)簽。只要有標(biāo)簽在它的層次結(jié)構(gòu)“上游”存在這么一個(gè)祖先，那么就會(huì)選中該標(biāo)簽。無(wú)論從該標(biāo)簽到作為祖先的上下文之間隔著多少層次都沒(méi)有關(guān)系。
漸進(jìn)增強(qiáng)的概念是指從最基本的可用性出發(fā)，在保證站點(diǎn)頁(yè)面在低級(jí)瀏覽器中 的可用性和可訪問(wèn)性的基礎(chǔ)上，逐步增加功能及提高用戶體驗(yàn)。本質(zhì)上講，我們?nèi)粘５囊恍╅_(kāi)發(fā)習(xí)慣，例如首先使用標(biāo)記語(yǔ)言編寫(xiě)頁(yè)面，然后通過(guò)樣式表來(lái)控制頁(yè)面 樣式等，都屬于漸進(jìn)增強(qiáng)的概念；其他更為明顯的行為包括使用HTML5、CSS3等新技術(shù)，針對(duì)高級(jí)瀏覽器為頁(yè)面提高用戶體驗(yàn)的豐富程度。
平穩(wěn)退化的概念是指首先使用最新的技術(shù)面向高級(jí)瀏覽器構(gòu)建最強(qiáng)的功能及用戶體驗(yàn)，然后針對(duì)低級(jí)瀏覽器的限制，逐步衰減那些無(wú)法被支持的功能及體驗(yàn)；在我們?nèi)粘５拈_(kāi) 發(fā)中，一個(gè)典型的平穩(wěn)退化的例子就是首先針對(duì)Chrome編寫(xiě)頁(yè)面代碼，然后修復(fù)IE中的異?；蜥槍?duì)IE去除那些無(wú)法被實(shí)現(xiàn)的功能特色.
所以， 這兩個(gè)概念方法其實(shí)早已并存在我們的日常開(kāi)發(fā)工作中了，只是“漸進(jìn)增強(qiáng)”與“平穩(wěn)退化”這樣的措辭是近些年才開(kāi)始被普及。在我們眼下的HTML5與 CSS3實(shí)戰(zhàn)用，這兩個(gè)概念就尤其重要了，怎樣保證使用不斷變化的新技術(shù)來(lái)構(gòu)建在主流瀏覽器下都具有基本可用性的站點(diǎn)，并針對(duì)高級(jí)瀏覽器進(jìn)行體驗(yàn)提升，這 些是我們?cè)陂_(kāi)發(fā)過(guò)程中需要明確的思路。
我們可以使用諸如font-awesome或者阿里的 iconfont 之類(lèi)的圖標(biāo)庫(kù)將圖標(biāo)添加到HTML網(wǎng)頁(yè)。 我們必須將給定圖標(biāo)類(lèi)的名稱(chēng)添加到任何內(nèi)聯(lián)HTML元素中。 （<i>或<span>）。 圖標(biāo)庫(kù)中的圖標(biāo)是可縮放的矢量，可以使用CSS進(jìn)行自定義。
border-width指定邊框的寬度。
物理標(biāo)簽被稱(chēng)為表示標(biāo)記，而邏輯標(biāo)簽對(duì)于外觀是無(wú)用的。物理標(biāo)簽是較新的版本，而邏輯標(biāo)簽是舊的并且專(zhuān)注于內(nèi)容。
如題，我們的標(biāo)簽元素寫(xiě)上后，瀏覽器就會(huì)渲染出結(jié)果，但不僅僅是這么簡(jiǎn)單
//物理元素 <b>我想用b標(biāo)簽加粗</b> //邏輯元素 <strong>我想用strong標(biāo)簽加粗</strong> //兩段文字都加粗了，而且視覺(jué)效果完全一樣
確實(shí)，文字加粗了，兩者都達(dá)到了我們想要的目的，但是我們忽略了一個(gè)問(wèn)題，既然b標(biāo)簽可以加粗，那么strong這個(gè)標(biāo)簽同樣是加粗，存在的 意義又是什么呢？既然W3C定義了兩個(gè)，它們之間的不同點(diǎn)是什么呢？它們之間的相同點(diǎn)又是什么呢？
物理元素
物理元素，又叫實(shí)體標(biāo)簽，它所做的是一種物理行為，比如上面我把一段文字用b標(biāo)簽加粗了，它所傳達(dá)的給瀏覽器，告訴瀏覽器 我要加粗這段文字，從單詞Bold中也可以看出來(lái)，英文中僅僅是加粗的意思，并沒(méi)有其他作用?？偨Y(jié)來(lái)說(shuō)就是一句話： 物理元素就是告訴瀏覽器該怎么顯示出來(lái)。
邏輯元素
邏輯元素，從英文字面上Strong就可以看出它是強(qiáng)調(diào)的意思，所以我們用這個(gè)邏輯元素(如上strong)來(lái)向?yàn)g覽器傳達(dá) 一個(gè)強(qiáng)調(diào)某段文字重要性的消息，說(shuō)明此文字較為重要，也有利于搜索引擎收錄。
Web標(biāo)準(zhǔn)主張XHTML不涉及具體的表現(xiàn)形式，“強(qiáng)調(diào)”可以用加粗來(lái)強(qiáng)調(diào)，也可以用別的方式強(qiáng)調(diào)，也可以通過(guò)css來(lái)改變strong的具體表現(xiàn) ，還有就是并不是有了strong邏輯標(biāo)簽，就不用b標(biāo)簽來(lái)表示字體加粗了，b標(biāo)簽和strong標(biāo)簽?zāi)J(rèn)情況下強(qiáng)調(diào)的效果一致，strong完全可以定義成別的樣式，用來(lái)強(qiáng)調(diào) 效果，但是最好符合W3C標(biāo)準(zhǔn)，它更提倡內(nèi)容與樣式分離，所以單純?yōu)榱诉_(dá)到加粗而使用b標(biāo)簽不建議這樣做， 從XHTML文檔有意義性及用戶體驗(yàn)角度來(lái)說(shuō)，strong邏輯標(biāo)簽更加合適，而SEO方面，則針對(duì)優(yōu)化情況而定。
CSS偽類(lèi)是用來(lái)添加一些選擇器的特殊效果。偽類(lèi)的語(yǔ)法
selector:pseudo-class{property:value;}CSS 和 SCSS 之間的區(qū)別如下：
CSS是一種用于設(shè)計(jì)web頁(yè)面的樣式語(yǔ)言，而SCSS用于為瀏覽器組合CSS樣式表。
SCSS 提供了一些變量，可以使用這些變量來(lái)縮短代碼，這是與 CSS 相比的一大優(yōu)勢(shì)。
嵌入式樣式表的優(yōu)點(diǎn):
可以在一個(gè)文檔中創(chuàng)建多種標(biāo)簽類(lèi)型。
在復(fù)雜情況下，可以使用選擇器和分組方法來(lái)應(yīng)用樣式。
無(wú)需額外下載。
嵌入式樣式表的缺點(diǎn)：
無(wú)法控制多個(gè)文檔。
不同的介質(zhì)不區(qū)分大小寫(xiě)，因此它們具有不同的屬性。 他們是：
aural - 用于語(yǔ)音和音頻合成器
print - 用于打印機(jī)
projection - 用于方案展示，比如幻燈片
handheld - 用于小的手持的設(shè)備
screen - 用于電腦顯示器
Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family
該指令告訴瀏覽器如何在HTML頁(yè)面上渲染特定元素。 它由一個(gè)選擇器和一個(gè)遵循規(guī)則集的聲明塊組成。 選擇器可以附加到其他選擇器，以通過(guò)規(guī)則集進(jìn)行標(biāo)識(shí)。
CSS 框架是一個(gè)庫(kù)，它允許使用CSS語(yǔ)言進(jìn)行更輕松，更符合標(biāo)準(zhǔn)的Web設(shè)計(jì)。 這些框架中的大多數(shù)至少包含一個(gè)網(wǎng)格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，F(xiàn)oundation等。
感謝各位的閱讀，以上就是“css基礎(chǔ)面試題及答案有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css基礎(chǔ)面試題及答案有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼