iPhone賣不動(dòng)了！蘋果股價(jià)創(chuàng)年內(nèi)最大日跌幅：市值一夜蒸發(fā)萬億元
8月5日消息，今天凌晨美股三大指數(shù)高開低走集體收跌，道指跌0.41%；納指跌0.36%；標(biāo)普500指數(shù)跌0.52%。熱門科技股也都變化極大，其中蘋果報(bào)181.99美元，跌4.8%，創(chuàng)
Web 開發(fā)人員使用 CSS 樣式語言為語義 HTML 文檔添加動(dòng)態(tài)、富有創(chuàng)意且用戶友好的樣式。
剛接觸 CSS 的 Web 開發(fā)人員通過練習(xí)基本的 CSS 選擇器語法、屬性、@ 規(guī)則和偽類/元素來開始學(xué)習(xí)樣式。
了解這些 CSS 功能足以構(gòu)建一個(gè)易于訪問、美觀、用戶友好的現(xiàn)代網(wǎng)站，但要了解 CSS 的全部潛力，還有很多東西需要學(xué)習(xí)。
當(dāng) Web 開發(fā)人員廣泛使用 CSS 設(shè)計(jì)網(wǎng)站前端并嘗試使用 CSS 時(shí)，他們經(jīng)常會(huì)發(fā)現(xiàn)新功能、解決方法和技術(shù)，這些功能、解決方法和技術(shù)可以幫助他們提高工作效率并提高 CSS 技能。
這些技巧和竅門可幫助每個(gè)人高效地實(shí)施快速、有吸引力的 CSS 純解決方案來解決設(shè)計(jì)問題，而無需編寫基于 JavaScript、SVG 和 HTML Canvas 的實(shí)現(xiàn)。例如，現(xiàn)在 Web 開發(fā)人員無需編寫一行 JavaScript 代碼即可創(chuàng)建快速、輕量級(jí)的倒計(jì)時(shí)器。
在本文中，我將介紹10個(gè) CSS 技巧和竅門，幫助您充分利用 CSS，高效地構(gòu)建現(xiàn)代 Web 界面，而無需使用 JavaScript、SVG、HTML Canvas 或集成繁重的第三方 UI 工具包和庫。練習(xí)這些技巧可以擴(kuò)展您的 CSS 掌握能力！
正確放置 UI 元素是設(shè)計(jì)高質(zhì)量界面的必備條件。在大多數(shù)情況下，Web 開發(fā)人員必須將子元素垂直和水平居中。由于布局系統(tǒng)和定位功能不同，CSS 無法提供單一屬性來讓任何元素居中。
在響應(yīng)式設(shè)計(jì)流行之前，Web 開發(fā)人員使用負(fù)邊距技巧來讓 HTML 元素居中——現(xiàn)在，您會(huì)發(fā)現(xiàn)使用各種現(xiàn)代和舊 CSS 屬性讓元素居中的無數(shù)方法，但在 CSS 中讓元素居中的最簡(jiǎn)單方法是什么？
現(xiàn)代 CSS 網(wǎng)格功能支持使用 place-items 簡(jiǎn)寫屬性讓網(wǎng)格塊居中，因此我們可以使用它來讓子元素居中，如下所示：
您可以通過使用 calc() 和 mod() CSS 數(shù)學(xué)函數(shù)調(diào)整全局計(jì)時(shí)器變量的結(jié)束值來創(chuàng)建顯示分鐘、秒和毫秒的倒計(jì)時(shí)器。
瀏覽器將 DOM 元素渲染為瀏覽器視口邊界內(nèi)的可視 UI 元素。
但是，HTML 表單元素通常會(huì)打開在標(biāo)準(zhǔn) DOM 視口之外渲染的原生 UI 元素，因此沒有跨瀏覽器的解決方案來自定義原生表單元素的平臺(tái)特定、瀏覽器特定的彈出元素。
例如，我們無法自定義 HTML 選擇元素的下拉彈出窗口，但我們可以使用 CSS 在所有瀏覽器中自定義選擇框的初始視圖，因?yàn)槌跏急韱慰丶晥D在 DOM 內(nèi)渲染：
<div> <select> <option>React</option> <option>Angular</option> <option>Svelte</option> <option>Vue</option> <option>Lit</option> </select></div><style> div { position: relative; min-width: 200px; } select { appearance: none; padding: 6px; font-size: 14px; border-radius: 4px; width: 100%; border: 2px solid #ccc; outline: none; } select:focus { border: 2px solid #aaa; } div::after { border-right: 6px solid transparent; border-top: 6px solid #333; border-left: 6px solid transparent; position: absolute; top: 42%; right: 12px; content: ""; pointer-events: none; }</style>上述 CSS 定義通過添加自定義圖標(biāo)和邊框來定制 HTML 選擇元素的初始視圖的瀏覽器特定外觀，如下面的預(yù)覽所示：
使用相同的技術(shù)，您可以覆蓋用戶代理樣式表中的默認(rèn)樣式，以自定義其他本機(jī)表單控件并向其添加額外的子元素，而無需使用 JavaScript 嵌入元素。
眾所周知的 border-radius CSS 屬性可幫助我們?yōu)榫匦?DOM 元素創(chuàng)建圓形或橢圓形邊緣。
此外，使用 clip-path 屬性，我們可以創(chuàng)建漂亮的花式角。您知道我們可以使用漸變填充創(chuàng)建創(chuàng)意花式角嗎？
通過為元素填充徑向漸變背景，可以創(chuàng)建一個(gè)完美、尖銳的圓圈。如果我們使生成的圓圈透明，將其用作蒙版，然后移動(dòng)到角落，它會(huì)切開所有四個(gè)角，從而創(chuàng)建類似相框的角：
<div></div><style> div { width: 200px; height: 100px; background: darkcyan; mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px; }</style>; background-size: cover; background-position: center; z-index: -1; filter: blur(4px) brightness(0.65) sepia(90%); }</style></code></pre><p style=)
; background-size: cover; background-position: center; isolation: isolate; height: calc(100vh - 16px); position: relative; display: grid; place-items: center; color: white; } div::after { content: )
CSS 滾動(dòng)捕捉模塊提供了一組 CSS 屬性，用于提高可滾動(dòng)容器的可用性和可訪問性。
例如，以下代碼片段會(huì)自動(dòng)在主要部分停止?jié)L動(dòng)，并避免在部分部分停止：
<section style="background: #ccc">1</section><section style="background: #aaa">2</section><section style="background: #ccc">3</section><section style="background: #aaa">4</section><style> section { height: 100vh; scroll-snap-align: start; display: grid; place-items: center; font-size: 7em; } :root { background-color: #eee; scroll-snap-type: y mandatory; }</style>
CSS 滾動(dòng)捕捉功能可幫助我們?yōu)橐苿?dòng)應(yīng)用中支持滑動(dòng)的界面實(shí)現(xiàn)無 JavaScript、極簡(jiǎn)的純 CSS 解決方案
每個(gè) Web 開發(fā)人員都有使用類開始樣式的習(xí)慣。使用組織良好的類無疑是創(chuàng)建干凈、易于管理的網(wǎng)頁的良好做法。
但是，創(chuàng)建類對(duì)于創(chuàng)建極簡(jiǎn)網(wǎng)頁來說并不是強(qiáng)制性的——無類 Web 設(shè)計(jì)概念激勵(lì)我們使用語義 HTML 標(biāo)簽來編寫 CSS：
nav {}ul {}ul li {}summary {}:not()、:has() 和 :is() 等功能選擇器（以偽類形式實(shí)現(xiàn)）可幫助我們避免在無類樣式表中選擇器中出現(xiàn)重復(fù)片段，從而編寫簡(jiǎn)潔的代碼。
例如，以下代碼片段使用 :not() 為導(dǎo)航菜單項(xiàng)（最后一個(gè)除外）添加了顏色樣式：
<nav> <ul> <li>Home</li> <li>Services</li> <li>About</li> <li>Contact</li> </ul></nav><style> nav ul { display: flex; list-style: none; gap: 1em; background: #eee; padding: 1em; :not(li:last-child) { color: darkcyan; } }</style>假設(shè)您需要為呈現(xiàn) SVG 圖標(biāo)的菜單項(xiàng)添加自定義樣式。然后，您可以使用 :has() 功能選擇器選擇這些菜單項(xiàng)，如下所示：
li:has(svg) { /* ... */}:has() 偽類可以與屬性選擇器和 CSS 變量結(jié)合使用，實(shí)現(xiàn)交互式主題更改：
<div> <label><input type="radio" value="t1" name="t" checked>Theme 1</label> <label><input type="radio" value="t2" name="t">Theme 2</label></div><style> body { background-color: var(--background-color); color: var(--text-color); transition: all 0.5s; } :root:has(input[value="t1"]:checked) { --background-color: darkcyan; --text-color: white; } :root:has(input[value="t2"]:checked) { --background-color: skyblue; --text-color: black; } </style>:is() 功能選擇器幫助我們?yōu)槎禾?hào)分隔的長(zhǎng)選擇器編寫替代的簡(jiǎn)寫選擇器：
/* old-fashioned */section h1, section h2, section h3, section h4, section h5, section h6 { color: darkcyan;}/* modern */section :is(h1, h2, h3, h4, h5, h6) { color: darkcyan;}以上就是我今天想與你分享的全部?jī)?nèi)容，希望這些技能可以幫助您編寫更簡(jiǎn)潔、更高效的CSS代碼。
本文鏈接：http://www.tebozhan.com/showinfo-26-103165-0.html聊一聊 CSS 的十個(gè)技巧和竅門
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)