添加或更改CSS樣式添加內(nèi)聯(lián)樣式

1、相當(dāng)于向HTML的 style 屬性的添加屬性值。點(diǎn)擊 element.style 頂部附近區(qū)域，輸入新添加的樣式屬性名，按 Tab 鍵，再輸入樣式屬性值，并按 Enter 鍵。這樣就添加了一條內(nèi)聯(lián)樣式。

2、查看效果：

向已有樣式規(guī)則添加聲明

1、單擊要添加聲明的樣式規(guī)則的括號(hào)之間。出現(xiàn)光標(biāo)，輸入屬性名，按 tab 鍵，輸入屬性值，回車。

修改已有樣式規(guī)則的聲明

1、在需要更改的原有樣式上雙擊，修改樣式規(guī)則，并按 Enter 鍵。

給元素添加CSS類

1、在 styles 選項(xiàng)卡中點(diǎn)擊 .cls 。會(huì)顯示一個(gè) Add new class 的輸入框，你可以輸入你想要添加的類名，然后按 Enter 鍵。

2、點(diǎn)擊 title 前方的復(fù)選框可以來(lái)回切換樣式。

添加新樣式規(guī)則

1、單擊 styles 選項(xiàng)卡右上角的加號(hào)1?，DevTools會(huì)在 element.style 規(guī)則下插入一條新規(guī)則。

2、如果想在特定位置添加新樣式規(guī)則，可以鼠標(biāo)懸浮在插入規(guī)則的上一個(gè)樣式規(guī)則處，此時(shí)會(huì)在右下角出現(xiàn)三個(gè)點(diǎn)更多操作的符號(hào)，x懸浮上去就會(huì)出現(xiàn)加號(hào)2?，點(diǎn)擊加號(hào)2就會(huì)在此條樣式的后面新增一條樣式規(guī)則。

3、這里的更多操作還有其他一些功能，從左往右依次是 文字陰影、盒子陰影、文字顏色、背景顏色。

切換樣式聲明

1、點(diǎn)擊樣式聲明前的復(fù)選框就可以切換樣式聲明

更改元素尺寸

1、在 styles 選項(xiàng)卡的框模型圖中，將鼠標(biāo)懸浮在需要編輯的區(qū)域，雙擊，填入需要修改的數(shù)值，回車。盒模型的默認(rèn)單位為像素，輸入百分比也會(huì)轉(zhuǎn)成像素值。

使用鍵盤(pán)快捷鍵更改聲明值

編輯聲明的值時(shí)，可以使用以下鍵盤(pán)快捷鍵將值遞增固定量：

Up 將值更改為1，如果當(dāng)前值介于-1和1之間，則更改0.1。Option Up（Mac）或Alt Up （Windows，Linux）增加0.1。Shift Up增加10。Shift Command Up（Mac）或 Shift Page Up（Windows，Linux）將值增加100。

減量也有效。只需將Up上面提到的每個(gè)實(shí)例替換為Down。

使用Coverage選項(xiàng)卡查看已使用和未使用的CSS

1、按下Command Shift P（Mac）或 Control Shift P（Windows，Linux，Chrome OS），而DevTools則處于焦點(diǎn)以打開(kāi)命令菜單。
2、開(kāi)始輸入coverage并選擇Show Coverage。將顯示 coverage 選項(xiàng)卡。

3、單擊“to reload and start capturing coverage” 開(kāi)始檢測(cè)覆蓋范圍并重新加載頁(yè)面。頁(yè)面重新加載，Coverage選項(xiàng)卡提供瀏覽器加載的每個(gè)文件使用多少CSS（和JavaScript）的概述。綠色代表使用CSS。紅色表示未使用的CSS。

4、單擊一個(gè)CSS文件，查看它使用的CSS的逐行細(xì)分。

拾色器的使用面板說(shuō)明

以下是拾色器的每個(gè)UI元素的說(shuō)明：
1、陰影。
2、吸管。
3、復(fù)制到剪貼板。將顯示值復(fù)制到剪貼板。
4、顯示價(jià)值。RGBA，HSLA或Hex的顏色表示。
5、調(diào)色板。單擊其中一個(gè)方塊可將顏色更改為該方塊。
6、色相。
7、透明度。
8、顯示值切換器。在當(dāng)前顏色的RGBA，HSLA和Hex表示之間切換。
9、調(diào)色板切換器。在“ 材質(zhì)設(shè)計(jì)”調(diào)板，自定義調(diào)色板或頁(yè)面調(diào)色板之間切換。DevTools根據(jù)它在樣式表中找到的顏色生成頁(yè)面調(diào)色板。

使用吸管從頁(yè)面上取樣

打開(kāi)拾色器時(shí)，默認(rèn)情況下吸管 滴管處于打開(kāi)狀態(tài)。要將所選顏色更改為頁(yè)面上的其他顏色：
1、將鼠標(biāo)懸停在視口中的目標(biāo)顏色上。
2、點(diǎn)擊確認(rèn)。

更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問(wèn)題，請(qǐng)?jiān)L問(wèn)西部數(shù)碼官網(wǎng)：m.ps-sw.cn





猜你還會(huì)喜歡下面的內(nèi)容

• 做一個(gè)獨(dú)立站需要多少錢(qián)
• 西部數(shù)碼怎樣搶注域名
• B2C 電子商務(wù)網(wǎng)站如何做推廣和優(yōu)化
• 網(wǎng)站推廣增加外鏈最好的方法
• 新手站長(zhǎng)淺談：如何在線提升產(chǎn)品轉(zhuǎn)化率
• 網(wǎng)站策劃：九大思維理念助你策劃能力提升
• 如何高效輸出移動(dòng)app產(chǎn)品原型？
• 為什么說(shuō)產(chǎn)品思考是進(jìn)行用戶體驗(yàn)設(shè)計(jì)時(shí)所不可或缺的？
• 六套 App：構(gòu)建我的產(chǎn)品設(shè)計(jì)工作流
• 如果Vine模式重來(lái)，大概就是Biu這個(gè)樣子
• 新手入門(mén)：如何做需求分析
• 產(chǎn)品狗的日常：如何更好的去分解功能點(diǎn)
• 簡(jiǎn)單明了丨如何寫(xiě)出好的PRD
• 產(chǎn)品必修課——輕松搞定UML
• 如果你是個(gè)苦逼的App測(cè)試人員，這款產(chǎn)品或許能拯救你
• 手把手教你制作實(shí)用美觀的交互設(shè)計(jì)文檔

熱門(mén)標(biāo)簽

其他問(wèn)題云服務(wù)器問(wèn)題域名及賬戶問(wèn)題企業(yè)郵局市場(chǎng)咨詢云服務(wù)器云建站/云站群/小程序虛擬主機(jī)網(wǎng)絡(luò)知識(shí)企業(yè)郵箱域名注冊(cè)域名備案域名商標(biāo)注冊(cè)云主機(jī)更多標(biāo)簽...

大家感興趣的內(nèi)容