整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS樣式覆蓋規(guī)則
很多情況都會(huì)導(dǎo)致一個(gè)元素被運(yùn)用上多種樣式，樣式覆蓋的規(guī)則也需要根據(jù)不同的情況來定，具體規(guī)則如下。規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝。CSS的繼承機(jī)制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：
<html>
<head>
<title>rule1</title>
<style>
body {color:black;} p {color:blue;}
</style>
</head>
<body>
<p>welcome to <strong>加粗</strong></p>
</body>
</html>strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍(lán)色。
規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝。在上面的例子中，假如還指定了strong元素的樣式，如：
strong {color:red;}那么根據(jù)規(guī)則二，strong中的文字最終顯示為紅色。
規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝。樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。CSS選擇器 權(quán)值標(biāo)簽選擇器 1偽元素(:first-child等) 1類選擇器 10ID選擇器 100內(nèi)聯(lián)樣式 1000偽類(:link等) 10可以看到，內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標(biāo)簽選擇器，除此以外，后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和，比如"#nav .current a"的權(quán)值為100 + 10 + 1 = 111。
規(guī)則四：樣式權(quán)值相同時(shí)，后者獲勝。考慮下面這種情況
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"與"p .email"都直接指定了上面的a元素，且權(quán)值都為11，根據(jù)規(guī)則四，最終顯示藍(lán)色。由于樣式表可以是外部的，也可以是內(nèi)部的，規(guī)則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內(nèi)部樣式表的出現(xiàn)位置。一般來說，內(nèi)部樣式表出現(xiàn)在所有外部樣式表的引入之后，一般是在</head>之前。
規(guī)則五：!important的樣式屬性不被覆蓋。!important可以看做是萬不得已的時(shí)候，打破上述四個(gè)規(guī)則的"金手指"。如果你一定要采用某個(gè)樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規(guī)則四的例子為例，
.byline a {color:red !important;}
可以強(qiáng)行使鏈接顯示紅色。大多數(shù)情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。
個(gè)是我用htmlcssrScrip寫出來的東西，它包括兩個(gè)部分，一個(gè)是上面的轉(zhuǎn)盤，一個(gè)是下面的計(jì)時(shí)器。
·點(diǎn)擊spin旋轉(zhuǎn)，它就轉(zhuǎn)，stop停止，停止以后就會(huì)反饋，就是獲得了什么，學(xué)習(xí)兩個(gè)小時(shí)。獲得這個(gè)以后就可以start timer，開始學(xué)習(xí)。
·這個(gè)是重置，重置timer，計(jì)時(shí)器。如果學(xué)完了兩個(gè)小時(shí)再轉(zhuǎn)一次，轉(zhuǎn)完以后又是學(xué)習(xí)兩個(gè)小時(shí)，再開計(jì)時(shí)器，學(xué)完又重置一遍，再轉(zhuǎn)一下，學(xué)習(xí)30分鐘，再去學(xué)30分鐘，再開，再關(guān)。
這么一個(gè)東西要怎么做？等一下我教你們?cè)趺醋觥?/p>
·首先先在桌面新建一個(gè)文本文檔，給它命名成learning，learning，will，叫什么？學(xué)習(xí)的轉(zhuǎn)盤，帶有WIS，WIS什么timer，計(jì)時(shí)timer，計(jì)時(shí)器。
·把它的后綴改一下，改成html覆蓋，保存。
·保存完了以后用vs code打開，打開完以后就是一個(gè)空白的頁(yè)面。
·接下來敲代碼的時(shí)間，寫一個(gè)前端代碼，實(shí)現(xiàn)剛剛那個(gè)小東西。
·首先把框架給卸了，然后是Id doctyper，html，這個(gè)好像是瀏覽器之類的問題的，管它HML后，這是language的縮寫，它就等于English的縮寫。
·下面是made，chaset，這是設(shè)置一個(gè)字符編碼的UTF-8，name，這是一個(gè)4口屬性。
·內(nèi)容是content，content的寬度是等于設(shè)備的寬度。
·它的initial SCA，SCA就是它的初始規(guī)模，是等于1.0，就是跟網(wǎng)頁(yè)的大小是一樣的。
·接下來是一個(gè)title，就是標(biāo)題，標(biāo)題就是learning，learning，will學(xué)習(xí)的，轉(zhuǎn)盤帶有time，就是帶有計(jì)時(shí)器的一個(gè)學(xué)習(xí)的轉(zhuǎn)盤。
·下面是CS的內(nèi)容，就是style樣式，這是CSS的內(nèi)容。
·接下來就是到波底，接下來就是body的內(nèi)容，body，head還沒結(jié)束是吧？不對(duì)，我的head去哪了？問題好大，這里有一個(gè)head，我是覺得是先寫大皇家是比較好的，就是the head。
·head里面包括幾個(gè)部分，就是title，標(biāo)題還有style，就是CSS，body，body里面，波波底下面是h，是HGL結(jié)束了。
·body里面包含兩個(gè)東西，兩個(gè)div就是兩個(gè)塊，這塊一個(gè)是用來做抽獎(jiǎng)的轉(zhuǎn)盤的，一個(gè)是用來做timer，就是計(jì)時(shí)器。
·記下來是叫script東西，就是script，screw script。
·這就是整個(gè)的框架，就是這里是CSS的地方，這里是title，它的標(biāo)題就是網(wǎng)頁(yè)上它給出的標(biāo)題，就是地址欄那里的標(biāo)題。
·這里是兩個(gè)div，就是兩個(gè)塊，到時(shí)候就是用兩個(gè)容器來裝抽獎(jiǎng)的轉(zhuǎn)盤和計(jì)時(shí)器。
·這里是加入script的代碼。
大概就講到這里。
在前兩篇文章中，我們有講過前端開發(fā)過程中需要注意到的HTML和Javascript規(guī)范問題，如果還沒看過的，可以去看一下這兩篇文章。今天這篇文章我們繼續(xù)學(xué)習(xí)一下關(guān)于CSS的規(guī)范問題。
前端開發(fā)中的Javascript規(guī)范，來學(xué)習(xí)一下吧
前端開發(fā)過程中的HTML規(guī)范，來學(xué)習(xí)一下吧
CSS
ID作為網(wǎng)頁(yè)上唯一標(biāo)識(shí)一個(gè)元素的屬性，在CSS中不推薦被使用，而應(yīng)該使用Class來代替。
因此，我們不推薦下面采用id的寫法。
不推薦寫法
我們推薦下面采用class的寫法。
推薦寫法
而且，CSS的選擇器具有不同的權(quán)重，大致可以表示成這樣。
選擇器權(quán)重
通過上面的權(quán)重圖可以看出，一個(gè)ID選擇器的權(quán)重是class選擇器權(quán)重的10倍，因此如果使用ID選擇器來定義CSS樣式，很容易就會(huì)覆蓋后面定義的Class選擇器，而且還不容易發(fā)現(xiàn)。
通過下面一段代碼，就能說明問題。
代碼
在編寫CSS時(shí)，應(yīng)該盡量使用具有語義化的class選擇器，而不應(yīng)該直接使用標(biāo)簽名，這樣可以使得CSS樣式更加容易維護(hù)。
我們可以考慮這樣一種情況，如果頁(yè)面上的標(biāo)簽需要更換，而我們使用了標(biāo)簽名去定義樣式，這樣就會(huì)修改CSS文件中的內(nèi)容；而如果我們只采用了Class去定義樣式，那么頁(yè)面上標(biāo)簽的修改并不會(huì)影響到CSS文件中的內(nèi)容。
因此我們不推薦下面這種寫法。
不推薦寫法
我們推薦下面這種寫法。
推薦寫法
在CSS中提供了很多例如margin, padding一樣的縮寫屬性，在編寫CSS樣式時(shí)，應(yīng)當(dāng)盡可能的使用縮寫屬性，不僅可以提高代碼的可讀性，而且還會(huì)提高代碼執(zhí)行效率。
因此，我們不推薦下面這種寫法。
不推薦寫法
我們推薦以下使用縮寫屬性的寫法。
推薦寫法
在屬性值為0時(shí)，可以省略掉后面的單位。
因此我們不推薦下面這種寫法。
不推薦
我們推薦下面的寫法。
推薦寫法
為了保證書寫CSS樣式的一致性，屬性名后緊跟冒號(hào)，冒號(hào)和屬性值之間有一個(gè)空格。而且每個(gè)選擇器和屬性聲明都應(yīng)該另起一行。
因此，我們不推薦以下寫法。
不推薦寫法
我們推薦以下寫法。
推薦寫法
在需要使用到引號(hào)的地方，推薦使用雙引號(hào)("")，而不是單引號(hào)('')，在需要使用到url時(shí)，不應(yīng)該使用引號(hào)。
因此我們不推薦下面的方式。
不推薦寫法
我們推薦使用下面寫法。
推薦寫法
今天這篇文章講解的是前端開發(fā)中的應(yīng)該遵循的CSS規(guī)范，內(nèi)容可能不是很全面，大家可以自行補(bǔ)充。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
