CSS · Magic_sword2

[TOC] # 简介说明 原文链接： - [CSS 参考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference) - [BEM 命名规范](https://juejin.cn/post/7001777832682586119) - [Google IO 2022 —— CSS 全览](https://mp.weixin.qq.com/s/Y2L2F1vmRXfacE1KwM00hQ) - [想摸鱼吗？先掌握这 19 个 css 技巧](https://mp.weixin.qq.com/s/aBClufNPYWq7wUXvFrxuug) - [总结了 42 种前端常用布局方案](https://mp.weixin.qq.com/s/b4hxbgWIBw0K6ateW-7uEQ) - [大开眼界：CSS指纹](https://mp.weixin.qq.com/s/gFCGM7ANOxHqYxGItyA_CA) - [CSS居然可以做3D游戏了](https://mp.weixin.qq.com/s/NexP8oSseWd30Dk2e-ckTQ) ``` 版本：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: * 类型：字符串 * 默认值：无 * 描述：结束时候的样式 * 可选值：[ ] 百分比: * 类型：字符串 * 默认值：无 * 描述：百分比过程的样式 * 可选值：[ ] # [fut]-@scroll-timeline ***** 定义滚动线 # @supports ***** support 检查环境的特性，它与 media 比较类似 # [fut]-@container ***** 容器查询方法 # [fut]-@custom-media ***** 自定义媒体查询 # @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 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承 # [fut]-@nest ***** 允许css嵌套书写