CSS 是開放網絡的核心語言之一，由 W3C 規範實現跨瀏覽器的標準化。
CSS 節省了大量的工作；樣式可以通過定義保存在外部.css 文件中，同時控制多個網頁的佈局，這意味着開發者不必經歷在所有網頁上編輯佈局的麻煩。
CSS 被分為不同等級：
- CSS1 現已廢棄
- CSS2.1 是推薦標準
- CSS3 分成多個小模塊且正在標準化中
CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。
本期技術週刊一起了解下 CSS ，歡迎大家閲讀 ～
文章推薦
以下是專欄板塊關於 CSS 的相關文章
《CSS 實現自適應文本的頭像》作者：XboxYan
Ant-design 中有一個這樣的頭像組件，當字符串較長時，字體大小可以根據頭像寬度自動調整，效果如下
當然，這裏是通過JS根據字符數量自動縮放文本實現的
而現在，僅僅通過 CSS也能達到類似的效果，一起看看吧
《使用 CSS 變量實現主題定製真的很簡單》作者：街角小林
Varlet是通過css變量來組織樣式的，什麼是css變量呢，其實很簡單，首先聲明自定義的css屬性，隨便聲明在哪個元素上都可以，不過只有該元素的後代才能使用，所以如果要聲明全局所有元素都能使用的話，可以設置到根偽類:root下：
:root {
--main-bg-color: red;
}如代碼所示，css變量的自定義屬性是有要求的，需要以--開頭。
《超強的純 CSS 鼠標點擊拖拽效果》作者：chokcoco
鼠標拖拽元素移動，算是一個稍微有點點複雜的交互。
而在本文，我們就將打破常規，向大家介紹一種超強的僅僅使用純 CSS 就能夠實現的鼠標點擊拖拽效果。
在之前的這篇文章中 -- 不可思議的純 CSS 實現鼠標跟隨，我們介紹了非常多有意思的純 CSS 的鼠標跟隨效果，像是這樣：
但是，可以看到，上面的效果中，元素的移動不是很絲滑。如果你瞭解上述的實現方式，就會知道它存在比較大的侷限性。本文，我們還是僅僅通過 CSS，來實現一種絲滑的鼠標點擊拖動元素移動的效果。
《純 CSS 實現 | 可愛的小怪獸動畫》作者：小棉花
今天來給大家介紹一下純 css 實現活潑可愛的小怪獸動畫效果，本文涉及的知識點看過前面的文章應該也有所瞭解，html+css，css3 動畫效果，還有遮罩層使用。下面來給大家詳細介紹一下整個製作的過程。
《一起來欣賞 9 個冷門的 CSS 屬性》作者：lulu_up
可能我們有時候潛意識裏認為, 當前實際開發中 css 屬性已經足夠用了, 但是前段時間突然想到:"會不會我們只是思維被限制在了常用的 css 屬性中, 從而喪失了創造力", 就像發明車之前大多數人會認為騎馬已經足夠快可以滿足自己的需求了, 所以我專門整理了一下自己的學習筆記並且專門去學習了一些冷門的 css 屬性, 果然收穫滿滿, 所以今天也要在這裏把這些腦洞大開的屬性較少給你, 準備好一起來感受css的魅力吧。
《高階 CSS 技巧在複雜動效中的應用》作者：chokcoco
實現上半部分背景加落日
首先，我們來實現上半部分的背景加落日效果：
<img width="581" alt="image" src="https://user-images.githubusercontent.com/8554143/187644739-3ea988df-6e78-4936-ad82-ecba5338d303.png">
大家可以先停頓思考下，這裏讓你來實現，會如何去做？需要多少個標籤？
好的，這裏，我們利用一個 DOM 標籤去完成這個圖形：
<div class="g-bg"><div>
《如何使用 CSS 偽類選擇器》作者：chuck
CSS選擇器允許你通過類型、屬性、位於HTML文檔中的位置來選擇元素。本教程闡述了三個新選項:is()、:where()和:has()。
選擇器通常在樣式表中使用。下面的示例會找到所有<p>段落元素並將字重更改為粗體：
p {
font-weight: bold;
}你也可以在JavaScript中使用選擇器來找到DOM節點：
- document.querySelector()返回首個匹配的HTML元素。
- document.querySelectorAll()返回所有匹配的HTML元素，這些元素位於類數組NodeList中。
問題推薦
關於 CSS 的熱門問題
圓環進度條，內環陰影，這種要怎麼實現？
CSS 使用什麼來進行隔絕外界的佈局？
CSS flex 中 just-content 裏面的 flex-start 和 start 有什麼區別？
請教一個基礎的 CSS 問題，小程序裏如何實現兩個純文本行內元素並排，另一個行內元素內容超出時自動換行的效果？
CSS 定位溢出隱藏邊框和內容之前出現縫隙？
關於 CSS 的問題，歡迎正在閲讀的小夥伴們一起來解決！
CSS :hover高亮對象錯誤？
CSS 如何完成長方形中一個小直角梯形？
大家寫 CSS 的時候傾向於用 em 還是 rem 呢？
Vue 中把 scss 變量賦值給 css 變量沒有解析？
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
