CSS · Magic_sword2

[TOC] # 簡介說明 原文鏈接： - [CSS 參考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference) ``` 版本：CSS 作用：層疊樣式表 ``` # 基本語法 # \-\- ***** 定義變量，通過var函數調用 # @charset ***** 定義文件編碼格式 ### 參數說明 str: * 類型：字符串 * 默認值：無 * 描述：編碼格式 * 可選值：[ UTF-8 ] ### 示例內容 1. 舉例說明 ``` @charset "utf-8"; ``` # @import ***** 引入其它樣式表文件 ### 參數說明 str: * 類型：字符串 * 默認值：無 * 描述：引入文件路徑的URL * 可選值：[ ] ### 示例內容 1. 舉例說明 ``` @import [ <url> | <string> ] [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>? ; ``` # [fut]-@scope ***** 限制樣式的作用域 # @keyframes ***** 定義動畫的關鍵幀 ### 參數說明 from: * 類型：字符串 * 默認值：無 * 描述：開始時候的樣式 * 可選值：[ ] to: * 類型：字符串 * 默認值：無 * 描述：結束時候的樣式 * 可選值：[ ] 百分比: * 類型：字符串 * 默認值：無 * 描述：百分比過程的樣式 * 可選值：[ ] # @supports ***** support 檢查環境的特性，它與 media 比較類似 # [fut]-@container ***** 容器查詢方法 # @media ***** 媒體查詢響應樣式 ### 參數說明 str: * 類型：字符串 * 默認值：無 * 描述：屏幕響應的大小 * 可選值：[ screen | (max-width: 480px) | orientation | print | prefers-color-scheme | prefers-reduced-motion ] ### 示例內容 1. 常見比例 ``` /*常見比例：576px-xs,768px-sm,992px-md,1200px-lg,1920px-xl,2048px-2k,2880px-3k,4096px-4k*/ @media screen and (max-width: 4096px) { body { background: #6f42c1; } } @media screen and (max-width: 2880px) { body { background: #0056b3; } } @media screen and (max-width: 2048px) { body { background: #e0a800; } } @media screen and (max-width: 1920px) { body { background: #1c7430; } } @media screen and (max-width: 1200px) { body { background: #1abc9c; } } @media screen and (max-width: 992px) { body { background: #000000; } } @media screen and (max-width: 768px) { body { background: #0c5460; } } @media screen and (max-width: 576px) { body { background: #0b2e13; } } ``` 2. 打印顯示 ``` @media print{ } 使用link標簽要比使用@import規則性能更好 <link rel="stylesheet" href="print.css" media="print" /> CSS中導入的方式使用 <style type="text/css"> @import url(print-style.css) print; </style> ``` # @page ***** 用于指定打印頁面的一些屬性,包括紙張尺寸,方向,頁邊距,分頁等特性 ### 示例內容 1. 舉例說明 ``` @page { size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } } ``` 2. 規則偽類 ``` @page :pseudo-class { size: A4 landscape; margin:2cm; } page-break-before用于設置元素前面的分頁行為,可取值: auto默認值。如果必要則在元素前插入分頁符。 always在元素前插入分頁符。 avoid避免在元素前插入分頁符。 left在元素之前足夠的分頁符，一直到一張空白的左頁為止。 right在元素之前足夠的分頁符，一直到一張空白的右頁為止。 inherit規定應該從父元素繼承 page-break-before 屬性的設置。 page-break-after設置元素后的分頁行為。取值與page-break-before一樣。 page-break-inside設置元素內部的分頁行為。取值如下: auto默認。如果必要則在元素內部插入分頁符。 avoid避免在元素內部插入分頁符。 inherit規定應該從父元素繼承 page-break-inside 屬性的設置。 @media print { section {page-break-before: always;} h1 {page-break-after: always;} p {page-break-inside: avoid;} } orphans設置當元素內部發生分頁時必須在頁面底部保留的最少行數 widows設置當元素內部發生分頁時必須在頁面頂部保留的最少行數 ``` # @font-face ***** 聲明字體文件 ### 參數說明 font-family: * 類型：字符串 * 默認值：無 * 描述：聲明字體名稱 * 可選值：[ ] src: * 類型：字符串 * 默認值：無 * 描述：聲明字體源文件路徑 * 可選值：[ ] # @font-palette-values ***** 自定義 COLRv1 字體 # @counter-style ***** 自定義列表counter的樣式 ### 示例內容 1. 舉例說明 ``` @counter-style lno { system: extends decimal; pad: 4 " "; } pre { margin: 0 0 0 5ch; counter-reset: line; width: 4ch; white-space: pre-wrap; word-break: break-all; outline: 1px solid red; border-left: 1px solid blue; background-color: #EEE; padding: 0 1ch; } pre span.line { counter-increment: line; box-decoration-break: clone; } pre span.line::before { content: counter(line, lno); margin: 0 2ch 0 -6ch; } ``` # @namespace ***** 用于跟 XML 命名空間配合的一個規則，表示內部的 CSS 選擇器全都帶上特定命名空間 ### 示例內容 1. 區分SVG和HTML的a標簽 ``` @namespace svg url(http://www.w3.org/2000/svg); @namespace html url(http://www.w3.org/1999/xhtml); svg|a { stroke:blue; stroke-width:1;} html|a { font-size:40px} ``` # @viewport ***** 用于設置視口的一些特性，不過兼容性目前不是很好，多數時候被 HTML 的 meta 代替 # [fut]-@property ***** 允許開發者顯式地定義他們的css 自定義屬性, 允許進行屬性類型檢查、設定默認值以及定義該自定義屬性是否可以被繼承