亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 54
粉絲 6
評論 31
訪問量 124033
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS基本概念、層疊規(guī)則和查看技巧
吾逍遙
原創(chuàng)
1441人瀏覽過

一、CSS 學(xué)習(xí)的幾點(diǎn)新認(rèn)識

昨晚老師開始講 CSS 入門了，雖然是入門，但是打牢基礎(chǔ)才能更好理解 CSS，從而應(yīng)用 CSS，我從中學(xué)到的幾點(diǎn)新認(rèn)識:

  1. chrome 的開發(fā)者工具查看 CSS 技巧。 以前我也會用 chrome 開發(fā)者工具查看樣式，但經(jīng)過老師演示后，更加理解每項(xiàng)的含義了，而且在老師基礎(chǔ)上更深入學(xué)習(xí)了 Elements 面板下 Styles 和 Computed，算是比較徹底理解這兩項(xiàng)作用了，后面有更詳細(xì)介紹。
  2. 選擇器的優(yōu)先級規(guī)則。 上課前對優(yōu)先級認(rèn)識還是停留在權(quán)重計(jì)算方式上，我看到博客有同學(xué)發(fā)表的 CSS 就是這種計(jì)算方式http://ipnx.cn/blog/detail/24384.html，即 tag 權(quán)重為 1,class 為 10，id 為 100，行內(nèi)為 1000，！important 為最高，通過老師授課和我實(shí)踐得出更加明確的優(yōu)先級規(guī)則。
  3. 繼承相關(guān)的 2 個(gè)關(guān)鍵字。 inherit(繼承)和 initial(初值)，以前知道也在實(shí)際應(yīng)用中繼承，但沒深入理解。通過老師授課才知道，如 color、font-size 等文本可以繼承，而盒模型、表格等則不行。

二、CSS 的基本概念和層疊規(guī)則

  • 聲明： 由屬性和值組成，中間用冒號 : 隔開，用分號 ; 結(jié)尾。如 color:red;
  • 聲明塊: 由一個(gè)或多個(gè)聲明組成，包裹在大括號 {} 中。
  • 選擇器: 寫在聲明塊前面的一個(gè)標(biāo)識符(有時(shí)也稱選擇符)，用來選擇頁面中一個(gè)或多個(gè)元素。如#page-title,.title 或 h1
  • 規(guī)則集: 選擇器和聲明塊組成
  • CSS 本質(zhì): 樣式復(fù)用，我理解有兩層意思，一是針對當(dāng)前網(wǎng)頁來說，就是可以通過 CSS 給不同元素通過類復(fù)用統(tǒng)一樣式。二就是可以復(fù)用優(yōu)秀的 CSS 美化網(wǎng)頁，從而彌補(bǔ)自己不足，正如老師所說，都用 CSS 十來年了，仍然感覺 CSS 定義界面不夠漂亮，何況是我們這些小新。

2.1 樣式表來源

樣式表來源主要分為默認(rèn)和自定義兩大類，前者是瀏覽器默認(rèn)定義的，每個(gè)瀏覽器定義可能不相同，后者包括行內(nèi)樣式、內(nèi)部樣式和外部樣式三種，是我們可以自定義的。行內(nèi)樣式是指元素的style 屬性定義的樣式，內(nèi)部樣式指網(wǎng)頁中style 元素包裹的樣式，而外部樣式指由link 元素引入或@import 導(dǎo)入的 css 文件。

  1. <!-- 外部樣式 -->
  2. <link rel="stylesheet" href="style1.css" />
  3. <!-- <style>@import url("style1.css");</style> -->
  4. <!-- 內(nèi)部樣式 -->
  5. <style>
  6.   #page-title { color: seagreen; }
  7.   .title { color: slateblue; }
  8.   h1 { color: steelblue; }
  9. </style>
  10. <body>
  11.   <header class="header">
  12.     <h1 id="page-title" class="title" style="color:teal;">Hello World!</h1>
  13.   </header>
  14.   <footer class="footer">
  15.     <a class="page-a" href="#">&copy;ipnx.cn</a>
  16.   </footer>
  17. </body>

樣式表來源

2.2 樣式?jīng)_突及處理規(guī)則

從樣式來源不難看出對于一個(gè)元素的樣式，首先瀏覽器對其進(jìn)行了默認(rèn)定義，然后就是我們用戶自定義的，一旦重復(fù)定義了樣式就是所謂的沖突，這時(shí)必須有個(gè)處理規(guī)則決定哪個(gè)生效。

  • 規(guī)則處理的兩種結(jié)果：疊加或覆蓋，即元素的相同聲明進(jìn)行覆蓋，不同聲明進(jìn)行疊加。
  • 處理的兩個(gè)規(guī)則：源碼順序和選擇器優(yōu)先級，對整個(gè)網(wǎng)頁來說是按源碼順序組成的總樣式(虛擬的)，對某個(gè)元素來說要按優(yōu)先級來確定最終樣式。
  • 我自己以前錯(cuò)誤的認(rèn)識：外部樣式 < 內(nèi)部樣式 < 行內(nèi)樣式，從上面源代碼中可以看出，外部樣式和內(nèi)部樣式區(qū)別只是定義形式不同，沒有優(yōu)先級之分。而行內(nèi)樣式相對外部樣式或內(nèi)部樣式則有優(yōu)先原則。

下面是chrome開發(fā)者工具中Elements面板的Styles的對應(yīng)圖。

樣式表查看

從上面 Elements面板的Styles的對應(yīng)圖的右側(cè)部分 可以看到源碼順序，就是默認(rèn)源碼+外部或內(nèi)部(按先后順序)+行內(nèi)樣式拼接成了總樣式表，這點(diǎn)上課時(shí)老師沒提到。然后就是老師主要講的左側(cè)部分選擇器優(yōu)先級。并給出優(yōu)先級計(jì)算方法(我感覺比常見的權(quán)重計(jì)算更好)。

案例 id class tag 標(biāo)識
html body header h1 0 0 4 0, 0, 4
body header.page-header h1 0 1 3 0, 1, 3
.page-header .title 0 2 0 0, 2, 0
#page-title 1 0 0 1, 0, 0 
  1.   <style>
  2.     /* 0, 0, 4 */
  3.     html body header h1 { color: red; }
  5.     /* 0, 0, 3 */
  6.     /* body header h1 { */
  7.     /* 0, 1, 3 */
  8.     body header.page-header h1 { color: green; }
  10.     /* 0, 1, 2 */
  11.     /* header.page-header h1 { */
  12.     /* 0, 2, 2 */
  13.     /* header.page-header h1.title { */
  14.     /* 0, 2, 0  > 0, 1,3*/
  15.     .page-header .title { color: blue; }
  17.     /* 1, 0,0 */
  18.     #page-title { color: cyan; }
  19.   </style>

將選擇器的權(quán)重分為三級：id、class和tag。優(yōu)先級先依據(jù)級別，再依據(jù)權(quán)重(或稱為個(gè)數(shù))。而常見的權(quán)重計(jì)算方法則是以數(shù)值來決定，如11一定小于12，雖然絕大部分時(shí)候沒有問題，但若考慮tag后代較多時(shí)就會出0,0,12>0,1,0的情況，這個(gè)依據(jù)上面就是不正確的。

總結(jié):先要按源碼順序拼接總樣式表，再按選擇器優(yōu)先級來決定哪個(gè)選擇器有效，若遇到相同優(yōu)先級選擇器時(shí)再按后者優(yōu)先原則來覆蓋前者。

2.3 注意事項(xiàng)

  • 盡可能不要用!important
  • 為什么要不用或少用id選擇器?
    • 原因是級別太高, 喪失了靈活性
    • id常用于綁定或錨點(diǎn)
  • 為什么盡可能不用或少用tag選擇器?
    • 因?yàn)?css 的本質(zhì)是為了”樣式復(fù)用”，采用tag選擇器不能使用到其它元素
    • tag選擇器常用于清除默認(rèn)樣式，如a清除下劃線，導(dǎo)航中的li清除前面圓點(diǎn)。
  • 盡可能在可用的情況下,使用 class 來完成

2.4 繼承

  • 有的屬性可以被繼承,如顏色,字體等文本, 有的則不行, 如盒模型
  • 二個(gè)關(guān)鍵字
    • inherit: 繼承
    • initail: 初值

三、Chrome瀏覽器查看CSS的詳細(xì)介紹

3.1 源碼順序?qū)倶邮降挠绊?/h3>

其實(shí)就外部樣式和內(nèi)部樣式引入順序影響源碼順序，至于默認(rèn)樣式和行內(nèi)樣式拼接順序不變，默認(rèn)樣式永遠(yuǎn)在最前面，行內(nèi)樣式永遠(yuǎn)在最后面，那當(dāng)然若有！important則它在行內(nèi)樣式后。

源碼順序1

源碼順序2

3.2 疊加和覆蓋

上小節(jié)已經(jīng)介紹過了，疊加是指同元素的不同聲明拼成更大的聲明塊，而疊加是指同元素的相同聲明的替換。，在chrome查看時(shí)就是有刪除線的聲明就是覆蓋,沒有刪除線就是疊加。

疊加和覆蓋

3.3 最終樣式

  • 最終樣式可以通過上面講的選擇器優(yōu)先級計(jì)算得到
  • 也可以通過 Elements面板的Styles 中刪除線來得到疊加的聲明和覆蓋的聲明
  • 最簡單方式是通過 Elements面板的Computed 直接得到

最終樣式

3.4 默認(rèn)樣式

為什么還要講默認(rèn)樣式，因?yàn)槲疫€沒自定義CSS時(shí)，發(fā)現(xiàn)h1元素字體默認(rèn)顏色是黑色，就通過chrome的Elements的Styles查默認(rèn)樣式，沒發(fā)現(xiàn)color聲明，在Elements的Computed也沒有看到，好像老師也在找這個(gè)定義。后來我勾選了Computed的右側(cè)的Show All復(fù)選框終于找到了。

默認(rèn)樣式

至于Computed中樣式分高亮部分和不高亮部分,我推測原因是不高亮部分是標(biāo)準(zhǔn)的統(tǒng)一樣式，而高亮則是各瀏覽器自行定義的，依據(jù)是a元素在chrome瀏覽器的顏色是藍(lán)色，查看Computed中其color定義時(shí)，發(fā)現(xiàn)如下圖部分瀏覽器標(biāo)識瀏覽器標(biāo)識

四、學(xué)習(xí)后總結(jié)

  • CSS本質(zhì)是樣式復(fù)用，使用自定義或優(yōu)秀的CSS可快速美化網(wǎng)頁界面
  • CSS沖突時(shí)處理原則是源碼順序和選擇器優(yōu)先級，具體分析見上面
  • 善于利用Chrome瀏覽器的Elements面板的Styles和Computed兩個(gè)工具，可提高我們分析其它優(yōu)秀CSS和查找自己CSS問題的效率。

推薦前端在線練習(xí)神器CodePenhttps://codepen.io/,里面有大神寫的前端源碼可以學(xué)習(xí)，自己的優(yōu)秀源碼也在其分享。可以看下2016年10個(gè)最佳的CodePen作品https://zhuanlan.zhihu.com/p/24969846，看完后，我驚訝前端還可以這樣。

源碼在我的Giteehttps://gitee.com/freegroup81/phpcn13
Githubhttps://github.com/woxiaoyao81/phpcn13

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：知道CodePen的, 都是好孩子
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
1條評論
吾逍遙 2020-10-19 11:40:30
CodePen真是練習(xí)好地方
1樓
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)