css視頻教程之css選擇器,CSS的類選擇器和id選擇器各有什么優(yōu)勢?
ID用于標(biāo)識頁面上的特定元素(比如站點(diǎn)導(dǎo)航),而且必須是唯一的。 ID也可以用來標(biāo)識持久的結(jié)構(gòu)性元素,例如主導(dǎo)航或內(nèi)容區(qū)域。ID還可以用來標(biāo)識一次性元素,例如某個鏈接或表單元素。一個ID只能應(yīng)用于頁面上的一個元素。
class同一個類名可以應(yīng)用于頁面上任意多個元素,因此類的功能強(qiáng)大的多。類非常適合表示內(nèi)容的類型或其他相似的條目。
在實際開發(fā)中,要根據(jù)實際使用情況來決定是使用哪種樣式。對于單一元素的在單一界面的展示樣式可以推薦是用id來定位。多余多個界面公用,或者同一界面多個元素風(fēng)格一致,樣式統(tǒng)一使用class類要方便的多。
下面就是最簡單的一個小例子:
展示效果:
為什么看到有的前端工程師將css每個選擇器里的內(nèi)容寫成一行?
應(yīng)該是個老程序猿,之前css壓縮沒有實現(xiàn)的時候,通過縮短選擇器嵌套,人工進(jìn)行壓縮就出現(xiàn)了這個。而且沒有l(wèi)ess,scss開發(fā)的時候這種情況更甚,不過有了這些便捷的開發(fā)方式也希望去注意一點(diǎn)嵌套層數(shù)。
推薦項目工程呢還是用less,scss開發(fā)比較好,css文件開發(fā)期就是被編譯的壓不壓縮無所謂了。
推薦樓主使用 vs code 這個編輯器 非常好用的東西。如果你要發(fā)展全棧或者學(xué)習(xí)node,這個玩意兒繞不開1
css選擇器中可以匹配所有標(biāo)簽的是?
答案是星星選擇標(biāo)簽。
因為星號選擇器的定義是用于選擇html中的所有標(biāo)簽,在一個頁面中我們都會選擇去掉html所有標(biāo)簽的默認(rèn)樣式,然后根據(jù)自己的需求添加樣式,這個時候就需要使用*選擇標(biāo)簽。
另外一個*選擇標(biāo)簽也可以搭配到其他的標(biāo)簽進(jìn)行使用,用來選擇表示某個父元素下面的所有子元素標(biāo)簽。
CSS屬性與值的定義?
cascading style sheet 層疊樣式表
CSS基本語法
css的定義方法是:
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁面元素關(guān)聯(lián)起來的名稱,屬性是希望設(shè)置的樣式屬性每個屬性有一個或多個值,如果一個屬性有多個值,中間用空格隔開
代碼示例:
div{ width:100px; height:100px; color:red }
用處:設(shè)置網(wǎng)頁的顯示效果(設(shè)置樣式)
css將網(wǎng)頁的顯示效果和內(nèi)容分離(降低了耦合性)