生 CSS 嵌套(Native CSS nesting)已經(jīng)被所有現(xiàn)代桌面瀏覽器所支持!,但是請注意,移動端瀏覽器支持的還很有限。
原生 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 代碼都能像您期望的那樣直接工作。
您可以將任何選擇器嵌套在另一個選擇器中,但它必須以符號開頭,例如 &, .(類選擇器)、#(ID選擇器)、@(對于媒體查詢)、:、::、+、 ~、 > 或 [。換句話說,它不能是對 HTML 元素的直接引用。下面的代碼是無效的,不會對 input 元素選擇器進行解析:
.parent {
color: red;
input {
margin: 1em;
}
}
/* Invalid, because "input" is an identifier. */
解決此問題的最簡單方法是使用與號 ( &),它以與 Sass 相同的方式引用當前選擇器。
.parent {
color: red;
& input {
margin: 1em;
}
/* use pseudo-elements and pseudo-classes */
&::after {}
&:hover {}
&:target {}
}
/* valid, no longer starts with an identifier */
或者,您可以使用其中之一:
它們都可以在這個簡單的示例中工作,但是稍后您可能會遇到更復雜的樣式表的特異性問題。
它還&允許您在父選擇器上定位偽元素和偽類。例如:
p.my-element {
&::after {}
&:hover {}
&:target {}
}
請注意,& 可以在選擇器中的任何位置使用。例如:
.child1 {
.parent3 & {
color: red;
}
}
這將轉換為以下非嵌套語法:
.parent3 .child1 { color: red; }
您甚至可以在選擇器中使用多個 & 符號:
ul {
& li & {
color: blue;
}
}
這將以嵌套 <ul> 元素 ( ul li ul) 為目標,但如果您想保持理智,我建議不要使用它!
嵌套媒體查詢示例:
p {
color: cyan;
@media (min-width: 800px) {
color: purple;
}
}
原生 CSS 嵌套將父選擇器包裝在 :is() 中,這可能會導致與 Sass 輸出的差異,比如以下嵌套代碼:
.parent1, #parent2 {
.child1 {
}
}
當它在瀏覽器中解析時,它實際上變成以下內(nèi)容:
:is(.parent1, #parent2) .child1 {
}
Sass 將相同的代碼編譯為:
.parent1 .child1,
#parent2 .child1 {
}
您可能還會遇到一個更微妙的問題。考慮一下:
.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順序。
Sass 使用字符串替換,因此如下所示的聲明是有效的,并且與類的任何元素相匹配 .btn-primary:
.btn {
&-primary {
color: blue;
}
}
但是原生 CSS 嵌套會忽略&-space選擇器。
從短期來看,現(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)Blink 效果:
2)Wave 效果:
3)語音氣泡效果:
通過 html:5 和 div.container>(div.dot)*3 快速創(chuàng)建頁面及容器。
<div class="container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
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;
}
}
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ā),感謝您的支持!
在自己的頁面中嵌入其他頁面是一個非常重要的操作,既能豐富自己的頁面樣式又能增強頁面的信息量。
舉個例子,如果打算在自己的頁面中插入一個視頻網(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序章(學習目的、對象、基本概念)——零基礎自學網(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)頁制作
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。