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