文檔教程【免費下載鏈接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!項目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs點擊查看免費下載CSSCascading Style Sheets級聯(lián)樣式表是與 HTML 配套的獨立樣式語言負責定義網頁的外觀HTML 決定頁面有什么內容CSS 決定這些內容長什么樣。本文以本倉庫西班牙語版教程 es/css.md 為骨架、英文原版 css.md 為補充系統(tǒng)講解 CSS 2 基礎語法及其被 CSS 3 擴展的核心特性——從選擇器、屬性與單位到級聯(lián)優(yōu)先級、媒體查詢與響應式布局讀完即可獨立編寫可運行、可維護的樣式表。CSS 的核心模型規(guī)則、選擇器與屬性CSS 代碼由靜態(tài)的**規(guī)則rules**構成。一條規(guī)則由三部分組成選擇器selector用來指向頁面上的一個或多個元素屬性property需要設置的視覺特征如顏色、寬度、字體值value該屬性被賦予的具體取值。selector { property: value; /* 更多屬性... */ }瀏覽器將選擇器命中的元素全部應用這些屬性。這一選擇目標 → 賦予視覺值的過程是理解 CSS 一切語法的起點。注釋與基礎語法CSS 只有一種注釋風格/* ... */塊注釋沒有單行注釋。/* 注釋寫在斜杠-星號之間就像這一行 注意CSS 沒有單行注釋這是唯一的注釋形式 */編寫時建議像本倉庫教程那樣用注釋為代碼分區(qū)如## SELECTORS、## PROPERTIES讓樣式表具備自文檔化能力——這與本倉庫代碼即文檔見 README.md的整體理念一脈相承。選擇器詳解精準定位頁面元素以如下示例元素為例演示各類選擇器的用法div classclass1 class2 idanID attrvalue otherAttren-us foo bar /類、元素名與 ID 選擇器.class1 { } /* 通過 CSS 類命中 */ .class1.class2 { } /* 同時擁有兩個類中間無空格 */ div { } /* 通過元素名命中 */ #anID { } /* 通過 id 命中 */屬性選擇器CSS 3 大幅擴展[attr] { font-size: smaller; } /* 元素擁有該屬性即可 */ [attrvalue] { font-size: smaller; } /* 屬性值精確匹配 */ [attr^val] { font-size: smaller; } /* 屬性值以 val 開頭CSS 3 */ [attr$ue] { font-size: smaller; } /* 屬性值以 ue 結尾CSS 3 */ [attr*foo] { } /* 屬性值包含 foo 子串CSS 3 */ [otherAttr~foo] { } /* 空格分隔的列表中含 foo */ [otherAttr~bar] { } /* 空格分隔的列表中含 bar */ [otherAttr|en] { font-size: smaller; } /* 連字符-U002D分隔的列表以 en 開頭 */~適合匹配class這類空格分隔的屬性|適合匹配langen-us這類帶語言子標簽的屬性。組合選擇器縮小命中范圍組合多個選擇器時中間不能有空格空格本身是一種組合符含義完全不同div.some-class[attr$ue] { } /* 元素名 類 屬性三條件同時滿足 */層級關系子元素與后代元素div.some-parent .class-name { } /* 直接子元素僅向下樹一層 */ div.some-parent .class-name { } /* 任意層級后代元素 */?? 去掉空格含義完全不同div.some-parent.class-name { }表示同時具有這兩個類的 div而不是后代選擇。這是初學者最容易踩的坑。兄弟關系相鄰兄弟與通用兄弟.i-am-just-before .this-element { } /* 緊鄰的下一個兄弟元素 */ .i-am-any-element-before ~ .this-element { } /* 前面任意位置的兄弟元素 */偽類Pseudo-classes按狀態(tài)選擇偽類用于只在元素處于特定狀態(tài)時命中它selector:link { } /* 鏈接尚未被訪問 */ selector:visited { } /* 鏈接已被訪問 */ selector:focus { } /* 元素獲得焦點 */ selector:hover { } /* 鼠標懸停在元素上 */ selector:active { } /* 鏈接被點擊的瞬間 */鏈接相關的偽類必須按link → visited → focus → hover → active的順序書寫否則樣式可能不生效。此外還有結構化偽類selector:first-child { } /* 父元素的第一個子元素 */ selector:last-child { } /* 父元素的最后一個子元素 */ selector:nth-child(n) { } /* 父元素的第 n 個子元素CSS 3 */ div:not([id]) { background-color: red; } /* 反向選擇沒有 id 屬性的 divCSS 3 */偽元素Pseudo-elements給元素虛擬部分上樣式selector::before { } /* 選中元素的一個虛擬首子元素 */ selector::after { } /* 選中元素的一個虛擬末子元素 */常用于插入裝飾內容、圖標或清除浮動。通配符與選擇器分組* { } /* 頁面所有元素 */ .parent * { } /* .parent 的所有后代 */ .parent * { } /* .parent 的所有直接子元素 */ selector1, selector2 { } /* 分組逗號連接規(guī)則同時作用于所有選擇器 */屬性與取值單位、顏色、邊框、背景與字體長度單位相對單位與絕對單位相對單位隨參照物縮放適合響應式設計width: 50%; /* 父元素寬度的百分比 */ font-size: 2em; /* 元素自身原始 font-size 的倍數 */ font-size: 2rem; /* 根元素 font-size 的倍數 */ font-size: 2vw; /* 視口寬度的 1% 的倍數CSS 3 */ font-size: 2vh; /* 視口高度的 1% 的倍數 */ font-size: 2vmin; /* vh 與 vw 中較小者 */ font-size: 2vmax; /* vh 與 vw 中較大者 */絕對單位適合印刷或固定尺寸場景width: 200px; /* 像素 */ font-size: 20pt; /* 點 */ width: 5cm; /* 厘米 */ min-width: 50mm; /* 毫米 */ max-width: 5in; /* 英寸 */顏色六種寫法color: #F6E; /* 短十六進制格式 */ color: #FF66EE; /* 長十六進制格式 */ color: tomato; /* 命名顏色 */ color: rgb(255, 255, 255); /* RGB 數值 */ color: rgb(10%, 20%, 50%); /* RGB 百分比 */ color: rgba(255, 0, 0, 0.3); /* RGBA含透明度0 a 1CSS 3 */ color: transparent; /* 等價于 alpha 為 0 */ color: hsl(0, 100%, 50%); /* HSL 色相-飽和度-明度CSS 3 */ color: hsla(0, 100%, 50%, 0.3); /* HSLA含透明度 */邊框border-width: 5px; border-style: solid; border-color: red; /* 設置方式與 background-color 類似 */ border: 5px solid red; /* 簡寫一行等價于上面三行 */ border-radius: 20px; /* 圓角CSS 3 屬性 */背景圖片與字體background-image: url(/img-path/img.jpg); /* url() 內的引號可省略 */ font-family: Arial; /* 單名單詞無需引號 */ font-family: Courier New; /* 含空格的字體族名必須加引號 */ font-family: Courier New, Trebuchet, Arial, sans-serif; /* 依次回退 */字體回退機制瀏覽器找不到第一個字體時使用下一個依此類推最后通常以通用字體族如sans-serif兜底。CSS 3 現代特性變量、計算、嵌套與彈性布局以下特性來自英文原版 css.md 的補充均以 CSS 3 為基礎自定義屬性CSS 變量:root { --main-bg-color: whitesmoke; /* 在根元素上定義變量 */ } body { background-color: var(--main-bg-color); /* 通過 var() 引用 */ }計算函數calc()body { width: calc(100vw - 100px); /* 在樣式表中執(zhí)行運算 */ }規(guī)則嵌套.main { .bgred { /* 等價于 .main .bgred { } */ background: red; } .bggreen { /* 等價于 .main .bggreen { } */ background: green; } .bgblue { /* 無空格等價于 .main.bgblue { } */ background: blue; } }注意與空格的有無決定了生成的是后代選擇器還是自身追加類與前面組合選擇器的規(guī)則一致。Flexbox 彈性布局.container { display: flex; flex-direction: row; /* 主軸方向row / column 等 */ flex-wrap: wrap; /* 是否允許子項換行 */ justify-content: center; /* 主軸方向的對齊方式 */ align-items: center; /* 交叉軸方向的對齊方式 */ }這是構建響應式布局最常用的現代手段配合后面的媒體查詢即可實現一套樣式、多端適配。使用方式三種引入 CSS 的方法將樣式表保存為.css擴展名文件后有以下三種引入方式!-- 方式一推薦在頁面 head 中通過 link 引入外部樣式表 -- link relstylesheet typetext/css hrefpath/to/style.css !-- 方式二在標記中嵌入 style 塊 -- style a { color: purple; } /style !-- 方式三直接在元素上設置 style 屬性內聯(lián)樣式 -- div styleborder: 1px solid red; /div三種方式的優(yōu)先級依次升高內聯(lián)最高后文級聯(lián)一節(jié)會給出完整排序。級聯(lián)Cascade與優(yōu)先級樣式沖突如何裁決一個元素可能被多個選擇器同時命中同一屬性也可能被多次賦值此時必須按以下規(guī)則裁決特異性specificity更高的規(guī)則勝出特異性相同時樣式表中出現更晚的規(guī)則覆蓋更早的規(guī)則若兩條規(guī)則分別來自兩個link引入的樣式表且特異性相同則后鏈接的樣式表生效。這正是級聯(lián)Cascading一詞的來源——樣式規(guī)則層層疊加、按規(guī)則擇優(yōu)生效。看一個經典示例。給定以下 CSS/* A */ p.class1[attrvalue] /* B */ p.class1 { } /* C */ p.class2 { } /* D */ p { } /* E */ p { property: value !important; }以及如下標記p style/*F*/ property:value; classclass1 class2 attrvalue優(yōu)先級從高到低為注意優(yōu)先級是逐屬性property計算的不是整個規(guī)則塊E最高因為!important關鍵字但官方建議盡量避免使用它F其次因為它是內聯(lián)樣式A再次它的特異性最高含 3 個限定符——元素名p、類class1、屬性attrvalueC第四雖然與B特異性相同但它在B之后出現后寫覆蓋先寫B(tài)第五D最低只有元素名這一個限定符。媒體查詢按設備與場景切換樣式媒體查詢是 CSS 3 特性允許你指定規(guī)則在何時生效——例如打印時、或特定屏幕尺寸/像素密度下。它不增加選擇器的特異性。/* 所有設備通用的規(guī)則 */ h1 { font-size: 2em; color: white; background-color: black; } /* 打印時讓 h1 少消耗墨水 */ media print { h1 { color: black; background-color: white; } } /* 屏幕寬度至少 480px 時放大標題字體 */ media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } }媒體查詢可使用的特性包括width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、resolution、scan、grid其中大多數都可用min-或max-前綴限定范圍。兩點實戰(zhàn)注意resolution在舊設備上不支持此時應改用device-pixel-ratio許多智能手機和平板會把頁面按桌面視口渲染除非你提供了viewportmeta 標簽head meta nameviewport contentwidthdevice-width; initial-scale1.0 /head兼容性新特性使用前先驗證CSS 2 的大多數特性以及 CSS 3 的許多特性在所有主流瀏覽器和設備上可用但每個瀏覽器的支持進度不同。使用新特性前建議通過專業(yè)的兼容性查詢工具逐一確認目標瀏覽器與設備的支持情況注意原教程所列外部資源站本文不展開外部鏈接倉庫內另有大量可交叉參考的教程如 html.md 與西班牙語版 es/html.mdHTML 與 CSS 配合閱讀效果更佳。倉庫中的配套資源與進階路徑本教程在倉庫內有兩個可對照閱讀的版本英文原版 css.md語法部分更全額外包含[attr*foo]包含匹配、:nth-child(n)、:active、選擇器分組、:not、CSS 變量、calc()、嵌套與 Flexbox 等 CSS 3 特性西班牙語版 es/css.md即本文所依據的主體文檔語言表述更貼近西語讀者習慣。繼續(xù)深入學習時可沿以下倉庫內路徑推進理解 CSS 的搭配語言 HTMLhtml.md 或 es/html.md了解樣式預處理思路可參考倉庫中的 sass.md 與 less.mdSass/LESS 即 CSS 的預處理方案若想參與本教程的維護與翻譯可閱讀貢獻指南 CONTRIBUTING.md 與項目說明 README.md。結語CSS 的語法體系并不復雜一條規(guī)則 選擇器 屬性/值配合特異性與級聯(lián)的裁決機制就能實現從靜態(tài)排版到響應式布局的全部能力。本文覆蓋的六大板塊——選擇器、屬性與單位、級聯(lián)優(yōu)先級、媒體查詢、CSS 3 現代特性與引入方式——正是日常前端開發(fā)中使用頻率最高的核心知識。建議邊讀邊在瀏覽器開發(fā)者工具中實時修改驗證把每條規(guī)則都親手跑一遍才能真正內化為自己的技能。贊分享文檔教程【免費下載鏈接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!項目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs點擊查看免費下載相關推薦Learn X in Y minutes 之 CSS 速成指南選擇器、級聯(lián)優(yōu)先級與媒體查詢全解析Learn X in Y minutes 之 CSS 速成指南選擇器、級聯(lián)優(yōu)先級與媒體查詢全解析 本篇技術指南以開源倉庫 learnxinyminutes d文檔教程Learn X in Y minutes 之 SQL 入門實戰(zhàn)指南從標準語法到多表查詢的完整速成Learn X in Y minutes 之 SQL 入門實戰(zhàn)指南從標準語法到多表查詢的完整速成 結構化查詢語言SQLStructured Query L文檔教程Learn X in Y Minutes 倉庫 ColdFusion 指南CFML 標簽語法與 CFScript 腳本語法實戰(zhàn)詳解Learn X in Y Minutes 倉庫 ColdFusion 指南CFML 標簽語法與 CFScript 腳本語法實戰(zhàn)詳解 ColdFusion 是一文檔教程上一篇PerfKit Benchmarker核心架構解析從虛擬機管理到基準執(zhí)行下一篇Mistral-7B-v0.3中文無審查對話模型開啟自由AI對話新時代創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考