整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          現(xiàn)代CSS:原生 CSS 嵌套綜合指南

          生 CSS 嵌套(Native CSS nesting)已經(jīng)被所有現(xiàn)代桌面瀏覽器所支持!,但是請注意,移動端瀏覽器支持的還很有限。

          1.原生 CSS 嵌套

          原生 CSS 嵌套可以像 SASS、LESS 預處理器一樣,將相關的選擇器組合在一起,從而減少需要編寫的規(guī)則數(shù)量,它可以節(jié)省打字時間,并使語法更易于閱讀和維護。您可以將選擇器嵌套到任意深度,但要小心不要超過兩層或三層。嵌套深度沒有技術限制,但它會使代碼更難以閱讀,并且生成的 CSS 可能會變得不必要的冗長。

          .button {
             background-color: red;
          
             &.warning {
               background-color: blue;
             }
          
             & .icon {
                width: 1rem;
                height: 1rem;
             }
          }
          

          雖然原生 CSS 嵌套語法在過去幾年中不斷發(fā)展,使大多數(shù) Web 開發(fā)人員感到滿意,但不要指望所有 SCSS 代碼都能像您期望的那樣直接工作。

          2.原生 CSS 嵌套規(guī)則

          您可以將任何選擇器嵌套在另一個選擇器中,但它必須以符號開頭,例如 &, .(類選擇器)、#(ID選擇器)、@(對于媒體查詢)、:::+~>[。換句話說,它不能是對 HTML 元素的直接引用。下面的代碼是無效的,不會對 input 元素選擇器進行解析:

          .parent {
            color: red;
          
            input {
              margin: 1em;
            }
          }
          /* Invalid, because "input" is an identifier. */
          

          解決此問題的最簡單方法是使用與號 ( &),它以與 Sass 相同的方式引用當前選擇器。

          2.1.& 符號的使用

          .parent {
            color: red;
          
            & input {
              margin: 1em;
            }
          
            /* use pseudo-elements and pseudo-classes */
            &::after {}
          
            &:hover {}
          
            &:target {}
          }
          /* valid, no longer starts with an identifier */
          

          或者,您可以使用其中之一:

          • > input:只對子元素生效
          • :is(input): 將選擇器列表作為參數(shù),并選擇該列表中任意一個選擇器可以選擇的元素
          • :where(input):優(yōu)先級總是為 0

          它們都可以在這個簡單的示例中工作,但是稍后您可能會遇到更復雜的樣式表的特異性問題。

          它還&允許您在父選擇器上定位偽元素和偽類。例如:

          p.my-element {
          
            &::after {}
          
            &:hover {}
          
            &:target {}
          }
          

          請注意,& 可以在選擇器中的任何位置使用。例如:

          .child1 {
            .parent3 & {
              color: red;
            }
          }
          

          這將轉換為以下非嵌套語法:

          .parent3 .child1 { color: red; }
          

          您甚至可以在選擇器中使用多個 & 符號:

          ul {
            & li & {
              color: blue;
            }
          }
          

          這將以嵌套 <ul> 元素 ( ul li ul) 為目標,但如果您想保持理智,我建議不要使用它!

          2.2.@ 符號的使用

          嵌套媒體查詢示例:

          p {
            color: cyan;
            @media (min-width: 800px) {
              color: purple;
            }
          }
          

          3.原生 CSS 嵌套陷阱

          3.1.場景一:父選擇器包裝在 :is() 中

          原生 CSS 嵌套將父選擇器包裝在 :is() 中,這可能會導致與 Sass 輸出的差異,比如以下嵌套代碼:

          .parent1, #parent2 {
            .child1 {
          
            }
          }
          

          當它在瀏覽器中解析時,它實際上變成以下內(nèi)容:

          :is(.parent1, #parent2) .child1 {
          
          }
          

          Sass 將相同的代碼編譯為:

          .parent1 .child1,
          #parent2 .child1 {
          
          }
          

          3.2.場景二:& 符號后置

          您可能還會遇到一個更微妙的問題。考慮一下:

          .parent .child {
            .grandparent & {}
          }
          

          原生 CSS 等效項是:

          .grandparent :is(.parent .child) {}
          

          這與以下錯誤排序的 HTML 元素匹配:

          <div class="parent">
            <div class="grandparent">
              <div class="child">MATCH</div>
            </div>
          </div>
          
          

          MATCH變得有樣式是因為 CSS 解析器執(zhí)行以下操作:

          它會查找所有元素,其所屬類的child祖先也parent為DOM 層次結構中的任何點。

          找到包含MATCH的元素后,解析器會grandparent在 DOM 層次結構中的任何位置再次檢查它是否具有 — 的祖先。它找到一個并相應地設置該元素的樣式。

          Sass 中的情況并非如此,它編譯為:

          .grandparent .parent .child {} 上面的 HTML 沒有樣式化,因為元素類不遵循嚴格的grandparent、parent、 和child順序。

          3.3.場景三:字符串替換

          Sass 使用字符串替換,因此如下所示的聲明是有效的,并且與類的任何元素相匹配 .btn-primary

          .btn {
            &-primary {
              color: blue;
            }
          }
          

          但是原生 CSS 嵌套會忽略&-space選擇器。

          4.CSS 預處理器還需要嗎?

          從短期來看,現(xiàn)有的 CSS 預處理器仍然至關重要。Sass 開發(fā)團隊宣布,他們將支持 .css 文件中的原生 CSS 嵌套,并按原樣輸出代碼。他們將一如既往地編譯嵌套 SCSS 代碼,以避免破壞現(xiàn)有代碼庫,但當全球瀏覽器支持率達到 98% 時,他們將開始輸出 :is() 選擇器。

          我猜想,PostCSS 插件等預處理器目前會擴展嵌套代碼,但隨著瀏覽器支持的普及,就會取消這一功能。當然,使用預處理器還有其他很好的理由,比如將部分代碼捆綁到一個文件中,以及對代碼進行精簡。但如果嵌套是你唯一需要的功能,你當然可以考慮在較小的項目中使用原生 CSS。

          總結

          CSS 嵌套是最有用、最實用的預處理器功能之一。瀏覽器供應商努力創(chuàng)造了一個與 CSS 非常相似的原生 CSS 版本,以滿足網(wǎng)絡開發(fā)人員的需求。雖然兩者之間存在細微差別,而且在使用(過于)復雜的選擇器時可能會遇到不尋常的特殊性問題,但很少有代碼庫需要進行徹底修改。

          原生嵌套可能會讓你重新考慮是否需要 CSS 預處理器,但它們?nèi)阅芴峁┢渌锰帯ass 和類似工具仍然是大多數(shù)開發(fā)者工具包的重要組成部分。

          通訊應用和聊天界面中,當你正在與對方交談時對方正在輸入一條信息,會有一個小的氣泡動畫或者文案提示。本文將探討使用現(xiàn)代 CSS 來實現(xiàn)這一動畫效果,首先會實現(xiàn)一個 Blink 效果的動畫,然后實現(xiàn)一個波浪效果動畫,最后實現(xiàn)一個語音氣泡效果。

          1.效果預覽

          1)Blink 效果:

          2)Wave 效果:

          3)語音氣泡效果:

          2.實現(xiàn)方案

          2.1.快速創(chuàng)建頁面和容器

          通過 html:5div.container>(div.dot)*3 快速創(chuàng)建頁面及容器。

          <div class="container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
          </div>
          

          2.2.增加基礎樣式

          1)容器居中:

          body {
            display: grid;
            place-content: center;
            min-height: 100vh;
            margin: 0;
          }
          

          2)容器樣式:

          注意:此處使用了現(xiàn)代CSS 原生嵌套(參考鏈接:)

          .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;
          
            background: #e2e8f0;
            border-radius: 9999px;
            padding: 1rem;
            .dot {
              border-radius: 9999px;
              height: 0.5rem;
              width: 0.5rem;
              background: #93a2b7;
            }
          }
          

          2.3.實現(xiàn)動畫

          1)Blink 效果:

          核心思想是通過給dot 元素設置 opacity 設置屬性來改變其透明度,同時對 3 個 dot 的透明度變化設置不同的動畫延遲 animation-delay 屬性來實現(xiàn)閃爍的效果。

          .container {
            .dot {
              opacity: 0;
              animation: blink 1s infinite;
              &:nth-child(1) {
                animation-delay: 0.3333s;
              }
              &:nth-child(2) {
                animation-delay: 0.6666s;
              }
              &:nth-child(3) {
                animation-delay: 0.9999s;
              }
            }
          }
          @keyframes blink {
            50% {
              opacity: 1;
            }
          }
          

          2)Wave 效果:

          核心思想:給 dot 元素增加 transform 屬性,設置 translateY 的值將目標元素從下至上垂直重新定位,同時在動畫關鍵幀 keyframes 中對顏色進行調(diào)整。

            .container {
              .dot {
                animation: wave 1s infinite;
              }
            }
            @keyframes wave {
              0% {
                transform: translateY(0px);
                background: rgba(148 163 184 / 0);
              }
              25% {
                transform: translateY(-0.25rem);
                background: rgba(148 163 184 / 0.8);
              }
              50% {
                transform: translateY(0px);
                background: rgba(148 163 184 / 0);
              }
              75% {
                transform: translateY(0.25rem);
                background: rgba(148 163 184 / 0.8);
              }
              100% {
                transform: translateY(0);
                background: rgba(148 163 184 / 0);
              }
            }
          

          2)語音氣泡效果:

          語音氣泡是以可視化方式顯示對話或思想的一種流行而有效的方法。你可能在漫畫、卡通、廣告和社交媒體文章中見過它們。它們?yōu)樵O計增添了幽默、情感和個性,同時也為觀眾提供了語境。此外,語音氣泡布局還可以將文字較多的設計分割開來,使其更加吸引人。

          核心思想:在 wave 效果的基礎上,對 .contianer 容器增加 ::before::after 兩個偽元素來實現(xiàn)左下角的圓圈,同時動畫中增加對整個容器的放大和縮小 scale 動畫,并采用 ease-out 函數(shù)。

          .container {
            animation: 2s zoom infinite ease-out;
            position: relative;
          
            &::before,
            &::after {
              content: '';
              position: absolute;
              border-radius: 9999px;
              background: rgb(226 232 240);
              bottom: 0;
              left: 0;
            }
            &::before {
              height: 1rem;
              width: 1rem;
              transform: translate(-0.125rem, 0.125rem);
            }
            &::after {
              height: 0.5rem;
              width: 0.5rem;
              transform: translate(-0.5rem, 0.5rem);
            }
            .dot {
              border-radius: 9999px;
              height: 0.5rem;
              width: 0.5rem;
              background: rgba(148 163 184 / 1);
              animation: wave 1.2s infinite;
              &:nth-child(1) {
                animation-delay: 0.4s;
              }
              &:nth-child(2) {
                animation-delay: 0.8s;
              }
              &:nth-child(3) {
                animation-delay: 1.2s;
              }
            }
          }
          @keyframes zoom {
            50% {
              transform: scale(1.1);
            }
          }
          


          如果本文對您有幫助,歡迎關注、點贊和轉發(fā),感謝您的支持!

          HTML頁面中嵌入其他頁面的方法

          在自己的頁面中嵌入其他頁面是一個非常重要的操作,既能豐富自己的頁面樣式又能增強頁面的信息量。

          舉個例子,如果打算在自己的頁面中插入一個視頻網(wǎng)站的視頻該怎么做呢?

          假如我現(xiàn)在自己的頁面中嵌入這個視頻,

          我只需要在視頻下側找到"分享"。

          點擊之后出現(xiàn)這樣的對話框,如圖:

          通過在我們的頁面中粘貼這段通用代碼就可以顯示這個視頻了。

          代碼如下:

          <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

          下面就寫到我們的頁面中試試吧。

          首先復制"第一個網(wǎng)頁.html"文件,改名為"在頁面中嵌入頁面.html"保存,然后用記事本打開,修改<head></head>標簽中的<title>第一個頁面</title>編輯為"在頁面中嵌入頁面"即可,完整代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>在頁面中嵌入頁面</title>
            </head> 
            <body>
            <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
            </body>
            </html>

          頁面效果如下:

          怎么樣,是不是很神奇!

          下面我們來分析一下這段代碼的含義。

          首先要引入一個新標簽<iframe>,HTML的使用手冊中翻譯為"框架",說實話,這么翻譯初學者是不知所云的。這個框架元素的主要作用就是在自己的頁面中嵌入其他頁面。

          在<iframe>標簽中先指定路徑屬性即src。這里使用的是單引號,實際上只要是半角符號,單引號和雙引號都可以的。

          然后設置長寬屬性,即width和height,大家可以嘗試改變數(shù)據(jù)看看。

          frameborder可以為iframe的窗口指定一個邊框,大家可以嘗試把0改成1看看。大家注意哈,這里輸入30和輸入1是一樣的,因為這個屬性不是定義邊框的寬度,而是定義是否顯示邊框!在編程中叫做布爾值,0代表沒有邊框,1代表有邊框!和我們點燈的開關一樣!

          如圖:多了個邊框出來。

          最后'allowfullscreen'這個描述非常的奇葩,把它刪掉沒有任何影響。不曉得是干什么的,主要是也不符合html的語法(也可能是我沒見識)。如果有詳細了解的小伙伴歡迎留言指教,感激不盡。

          下面我們嘗試修改一下src屬性,給它一個別的路徑看看。例如:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>在頁面中嵌入頁面</title>
            </head> 
            <body>
            <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
            </iframe>
            </body>
            </html>

          需要注意的是,修改了src并保存文件之后要把原頁面關閉然后重新打開才可以正常顯示!

          效果如下:

          在瀏覽網(wǎng)頁時我們還經(jīng)常遇到這樣的情況,就是有一個獨立窗口顯示嵌套的頁面,上面有個標題,一點擊就會跳到那個嵌入的頁面上,這個其實很簡答,使用一個<a></a>元素即可辦到,示例代碼如下:

          <a href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a>
          <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

          頁面示例如下:

          框架元素并沒有換行,所有我們可以推測出<iframe>標簽實際上是個內(nèi)聯(lián)元素,如何讓它換行呢?

          為<iframe>的style屬性中寫入display:block即可。這句代碼的意思是按照塊元素來顯示<iframe>內(nèi)容。

          示例代碼如下:

          <iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

          頁面效果如下:

          是不是很有意思。

          下面我們來介紹一個更有趣的玩法。如圖所示:

          這個怎么做呢?

          這就要介紹<iframe>標簽中的另一個屬性:name(名字)

          示例代碼如下:name="iframe"

          <iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

          這里講個題外話,如果大家了解中國古代的"請神術"的話就會知道這樣一個有趣的傳說,就是如果我們能叫出鬼神的名字就可以驅(qū)使它。

          編程也是這樣,我們給函數(shù)或變量一個名字后,就可以隨時隨地的驅(qū)使它。

          現(xiàn)在我們給<iframe>起了個名字叫做"iframe",當然您可以使用其他名字也沒問題,但要使用英文或漢語拼音命名,名字是英語字母組合最好。

          有了名字之后,<a>標簽就要驅(qū)使<iframe>標簽來顯示自己路徑下的內(nèi)容,如何驅(qū)使呢?

          大家還記得<a>標簽中有一個target屬性嗎?只要讓target="iframename"即可!

          也就是target="iframe"。示例代碼如下:大家要注意的是<a>標簽也是內(nèi)聯(lián)元素,也需要添加display:block,不然也是排在一列顯示。

          <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a><!--第一個a鏈接的是頭條文章-->
          <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 殲20戰(zhàn)斗機百科</a><!--第二個a鏈接的是百度百科-->
          <a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三個a鏈接的是本地圖片-->
          <iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

          只要我們?yōu)椴煌?lt;a>標簽賦予target="iframe"的屬性,點擊這些<a>標簽就可以在叫做"iframe"的框架元素中顯示自己的頁面。這時我們可以把<iframe>標簽中的src屬性刪除掉,保存文件后,關閉測試網(wǎng)頁,再重新打開,效果如下:

          初始狀態(tài)下,因為框架元素中的src是空的,所以打開后是空白的。如果您覺得單調(diào)可以任意復制3個<a>中的一個href中的鏈接路徑給<iframe>的src屬性,打開就是相應的標簽。這個就不演示了,大家自己試試即可。

          點擊第一個鏈接效果如下:

          點擊第二個鏈接如下:

          點擊第三個鏈接如下:

          最后再強調(diào)一下,改完框架的src屬性后需要關閉頁面后重新打開才可以,刷新的話并不能正確顯示!切記!

          今天的示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>在頁面中嵌入頁面</title>
            </head> 
            <body>
            <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作</a>
            <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">殲20戰(zhàn)斗機百科</a>
          <a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
          <iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
          </body>
          </html>

          今天的內(nèi)容結束了,明天我將會為大家介紹<object>和<embed>這兩個標簽,它們可以在頁面中嵌入更多有趣的東西。

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網(wǎng)頁制作

          HTML是什么?——零基礎自學網(wǎng)頁制作

          第一個HTML頁面如何寫?——零基礎自學網(wǎng)頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網(wǎng)頁制作

          初識meta標簽與SEO——零基礎自學網(wǎng)頁制作

          HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作

          HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作

          HTML元素中的屬性1——零基礎自學網(wǎng)頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網(wǎng)頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網(wǎng)頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網(wǎng)頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網(wǎng)頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網(wǎng)頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作

          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作

          初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作

          封閉在家學網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作

          HTML表單元素初識1——零基礎自學網(wǎng)頁制作

          HTML表單元素初識2——零基礎自學網(wǎng)頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網(wǎng)頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網(wǎng)頁制作

          HTML列表制作講解——零基礎自學網(wǎng)頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作

          HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作


          主站蜘蛛池模板: 国产精品一区在线观看你懂的| 国产伦精品一区二区三区免.费| 麻豆国产在线不卡一区二区 | 日本片免费观看一区二区| 国产一区中文字幕在线观看| 大香伊人久久精品一区二区| 日韩一区二区三区无码影院 | 亚洲AV无码一区二区三区在线 | 国产日韩一区二区三免费高清| 精品一区中文字幕| 国精产品一区一区三区有限公司| 麻豆aⅴ精品无码一区二区| 久久久久人妻精品一区蜜桃| 国产免费一区二区三区在线观看 | 国精产品一区一区三区有限在线 | 日本一区二区不卡在线| 国精产品一区一区三区| 中文字幕久久久久一区| 精品日本一区二区三区在线观看| 视频一区二区中文字幕| 日本一区二区三区精品国产| 无码8090精品久久一区| 国产精品女同一区二区久久| 狠狠色婷婷久久一区二区| 熟女少妇精品一区二区| 久久亚洲一区二区| 亚洲一区二区三区免费视频| 无码人妻精品一区二区三区久久久| 中日韩精品无码一区二区三区| 成人精品一区二区激情| 国产丝袜一区二区三区在线观看| 搜日本一区二区三区免费高清视频| 国产成人久久精品麻豆一区| 2014AV天堂无码一区| 制服丝袜一区在线| 波多野结衣在线观看一区 | 韩国福利视频一区二区| 一区二区三区免费视频网站| 国偷自产Av一区二区三区吞精 | 亚洲AV噜噜一区二区三区| 午夜视频久久久久一区|