Skip to content

CSS Note

Basics#

  • Before 2020
  • Separated From HTML5 Note. 从 HTML5 学习笔记独立出，沿用习惯用语

learning resources#

#ORGANIZE here#

  • https://popper.js.org/
  • https://web.dev/one-line-layouts/

prevent mouse event with CSS#

pointer-events

attributes#

  • flex-shrink default = 100，elements with shrink 1 will be shrinked to 100-a，elements with shrink 3 will be shrinked to 100-3a

分类器#

ID 分类器

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

菜鸟教程

---在标签内直接写代码 A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效） A>B{...}（A、B为HTML元素/标签） A中直接的B有效，A中的C中的B无效 Adjacent sibling combinator A+B，A和B相邻，对B生效，注意包含不算相邻 General sibling combinator 和ASC类似，但不用相邻，顺序即可。

样式 （包括分类器）的优先级#

在标签内直接写代码 > id > class > 元素+class 样式优先级 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

属性值#

不要在属性值与单位之间留有空格

CSS 颜色#

CSS 中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red"

文本#

文本缩进#

p {text-indent:50px;}

文本转换#

p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

文本修饰#

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration 属性主要是用来删除链接的下划线： a {text-decoration:none;}

文本的对齐方式#

文本排列属性是用来设置文本的水平对齐方式。 当 text-align 设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 h1 {text-align:center;}

指定字符之间的空间#

letter-spacing:-3px; /可以是负数/

指定行高#

p.small {line-height:70%;}

单词之间的空白空间#

word-spacing:30px;

禁止换行#

white-space:nowrap;

文本阴影#

h1 {text-shadow:2px 2px #FF0000;}

字体命名#

Serif - Serif 字体中字符在行的末端拥有额外的装饰 Sans-serif - "Sans"是指无 - 这些字体在末端没有额外的装饰 Monospace - 所有的等宽字符具有相同的宽度

p{font-family:"Times New Roman", Times, serif;}

-----------------字体大小单位 em 许多开发者使用 em 单位代替像素。 em 的尺寸单位由 W3C 建议。 1em 和当前字体大小相等。在浏览器中默认的文字大小是 16px。

字体粗细：font-weight:900; 字体转变：font-variant

对于 W3C 标准的 CSS：如果你定义了颜色属性，你还必须定义背景色属性。

WEB#CSS 学习笔记和问题

2 笔记 2.1 分类器 ID 分类器

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

菜鸟教程

---在标签内直接写代码 A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效） A>B{...}（A、B为HTML元素/标签） A中直接的B有效，A中的C中的B无效 Adjacent sibling combinator A+B，A和B相邻，对B生效，注意包含不算相邻 General sibling combinator 和ASC类似，但不用相邻，顺序即可。

2.2 样式 （包括分类器）的优先级 在标签内直接写代码 > id > class > 元素+class 样式优先级 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

2.3 属性值 不要在属性值与单位之间留有空格

2.4 CSS 颜色 CSS 中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 2.5 文本 2.5.1 文本缩进 p {text-indent:50px;} 2.5.2 文本转换 p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} 2.5.3 文本修饰 text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration 属性主要是用来删除链接的下划线： a {text-decoration:none;} 2.5.4 文本的对齐方式 文本排列属性是用来设置文本的水平对齐方式。 当 text-align 设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 h1 {text-align:center;} 2.5.5 指定字符之间的空间 letter-spacing:-3px; /可以是负数/ 2.5.6 指定行高 p.small {line-height:70%;} 2.5.7 单词之间的空白空间 word-spacing:30px; 2.5.8 禁止换行 white-space:nowrap; 2.5.9 文本阴影 h1 {text-shadow:2px 2px #FF0000;} 2.5.10 字体命名 Serif - Serif 字体中字符在行的末端拥有额外的装饰 Sans-serif - "Sans"是指无 - 这些字体在末端没有额外的装饰 Monospace - 所有的等宽字符具有相同的宽度 p{font-family:"Times New Roman", Times, serif;}

2.5.11 字体大小单位 em 许多开发者使用 em 单位代替像素。 em 的尺寸单位由 W3C 建议。 1em 和当前字体大小相等。在浏览器中默认的文字大小是 16px。 2.5.12 字体粗细： font-weight:900; 2.5.13 字体转变： font-variant

对于 W3C 标准的 CSS：如果你定义了颜色属性，你还必须定义背景色属性。 2.6 图片对齐

img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;}

图片对齐#

img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;}

Drawing Circle#

  • @2021-10-16
  • Shortest way to set a circle button is to set border-radius to a large non-percentage value (from [https://stackoverflow.com/questions/29966499/border-radius-in-percentage-and-pixels-px-or-em/69492375#69492375])

Houdini#