MORPH
SIGN IN SIGN UP
Fechin / reference UNCLAIMED

⭕ Share quick reference cheat sheet for developers.

0 0 1 EJS
Normal View History Raw
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
---
title: CSS 3
date: 2020-12-25 20:22:47
Use precise colors
2021-12-15 10:48:31 +08:00
background: bg-[#3473b5]
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
tags:
new css cheetsheet update
2024-05-27 23:14:38 +05:30
- web
- css
- style
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
categories:
new css cheetsheet update
2024-05-27 23:14:38 +05:30
- Programming
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
intro: |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
This is a quick reference cheat sheet for CSS goodness, listing selector syntax, properties, units and other useful bits of information.
Added the copyCode plugin
2023-03-06 16:19:19 +08:00
plugins:
new css cheetsheet update
2024-05-27 23:14:38 +05:30
- copyCode
feat: add support for running css
2025-01-05 13:31:16 +02:00
- runCode
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
---
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## Getting Started
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Introduction {.row-span-3}
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
CSS is rich in capabilities and is more than simply laying out pages.
External CSS -> External stylesheet Inline CSS -> Inline styles Internal CSS -> Internal stylesheet
2021-09-02 12:33:52 +08:00
#### External stylesheet
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```html {.wrap}
new css cheetsheet update
2024-05-27 23:14:38 +05:30
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css" />
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
External CSS -> External stylesheet Inline CSS -> Inline styles Internal CSS -> Internal stylesheet
2021-09-02 12:33:52 +08:00
#### Internal stylesheet
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```html
<style>
new css cheetsheet update
2024-05-27 23:14:38 +05:30
body {
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
background-color: linen;
new css cheetsheet update
2024-05-27 23:14:38 +05:30
}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
</style>
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
#### Inline styles
External CSS -> External stylesheet Inline CSS -> Inline styles Internal CSS -> Internal stylesheet
2021-09-02 12:33:52 +08:00
```html {.wrap}
<h2 style="text-align: center;">Centered text</h2>
<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
```
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Add class
```html
<div class="classname"></div>
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
<div class="class1 classn ..."></div>
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Support multiple classes on one element.
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### !important
```css
.post-title {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
color: blue !important;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
Overrides all previous styling rules.
### Selector
```css
feat: add support for running css
2025-01-05 13:31:16 +02:00
h1 {
}
#job-title {
}
div.hero {
}
div > p {
}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Selectors](#css-selectors)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Text color
```css
color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Colors](#css-colors)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Background
```css
background-color: blue;
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
background-image: url('nyan-cat.gif');
background-image: url('../image.png');
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Backgrounds](#css-backgrounds)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Font
```css
.page-title {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
font-weight: bold;
font-size: 30px;
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
font-family: 'Courier New';
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See: [Fonts](#css-fonts)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Position
```css
.box {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
position: relative;
top: 20px;
left: 20px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
See also: [Position](https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/)
### Animation
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
animation: 300ms linear 0s infinite;
animation: bounce 300ms linear infinite;
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See: [Animation](#css-animation)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Comment
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
/* This is a single line comment */
/* This is a
multi-line comment */
```
### Flex layout
```css
div {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: flex;
justify-content: center;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
div {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: flex;
justify-content: flex-start;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Flexbox](#css-flexbox) | [Flex Tricks](#css-flexbox-tricks)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Grid layout
```css
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Grid Layout](#css-grid-layout)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Variable & Counter
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
--bg-color: brown;
}
element {
background-color: var(--bg-color);
}
```
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
See: [Dynamic content](#css-dynamic-content)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Selectors
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
### Examples {.row-span-2}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### Groups Selector
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
h1,
h2 {
color: red;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
#### Chaining Selector
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
h3.section-heading {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
color: blue;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### Attribute Selector
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
div[attribute='SomeValue'] {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
background-color: red;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### First Child Selector
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
p:first-child {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
font-weight: bold;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### No Children Selector
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
.box:empty {
background: lime;
height: 80px;
width: 80px;
}
```
### Basic
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------------ | --------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `*` | All elements |
| `div` | All div tags |
| `.classname` | All elements with class |
| `#idname` | Element with ID |
| `div,p` | All divs and paragraphs |
| `#idname *` | All elements inside #idname |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
feat: add support for running css
2025-01-05 13:31:16 +02:00
See also: [Type](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) /
[Class](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) /
[ID](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) /
[Universal](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) selectors
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Combinators
Format markdown table
2021-09-14 13:03:55 +08:00
| Selector | Description |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| --------------- | ------------------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `div.classname` | Div with certain classname |
| `div#idname` | Div with certain ID |
| `div p` | Paragraphs inside divs |
| `div > p` | All p tags<br>_one level deep in div_ |
| `div + p` | P tags immediately after div |
| `div ~ p` | P tags preceded by div |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
feat: add support for running css
2025-01-05 13:31:16 +02:00
See also: [Adjacent](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) /
[Sibling](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) /
[Child](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) selectors
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Attribute selectors
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| -------------------- | ---------------------------------- | ---------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `a[target]` | With a <yel>target</yel> attribute |
| `a[target="_blank"]` | Open in new tab |
| `a[href^="/index"]` | Starts with <yel>/index</yel> |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| `[class | ="chair"]` | Starts with <yel>chair</yel> |
Format markdown table
2021-09-14 13:03:55 +08:00
| `[class*="chair"]` | containing <yel>chair</yel> |
| `[title~="chair"]` | Contains the word <yel>chair</yel> |
| `a[href$=".doc"]` | Ends with <yel>.doc</yel> |
| `[type="button"]` | Specified type |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
See also: [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
### User action pseudo classes
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------------ | ----------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `a:link ` | Link in normal state |
| `a:active ` | Link in clicked state |
| `a:hover ` | Link with mouse over it |
| `a:visited ` | Visited link |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Pseudo classes
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ----------------- | --------------------------------------------------------------------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `p::after` | Add content after p |
| `p::before` | Add content before p |
| `p::first-letter` | First letter in p |
| `p::first-line` | First line in p |
| `::selection` | Selected by user |
| `::placeholder` | [Placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder) attribute |
| `:root` | Documents root element |
| `:target` | Highlight active anchor |
| `div:empty` | Element with no children |
| `p:lang(en)` | P with en language attribute |
| `:not(span)` | Element that's not a span |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Input pseudo classes
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| --------------------- | ------------------------------------------------------------------------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `input:checked` | Checked inputs |
| `input:disabled` | Disabled inputs |
| `input:enabled` | Enabled inputs |
| `input:focus` | Input has focus |
| `input:in-range` | Value in range |
| `input:out-of-range` | Input value out of range |
| `input:valid` | Input with valid value |
| `input:invalid` | Input with invalid value |
| `input:optional` | No required attribute |
| `input:required` | Input with required attribute |
| `input:read-only` | With readonly attribute |
| `input:read-write` | No readonly attribute |
| `input:indeterminate` | With [indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate) state |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Structural pseudo classes
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Format markdown table
2021-09-14 13:03:55 +08:00
| | |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ----------------------- | -------------------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `p:first-child` | First child |
| `p:last-child` | Last child |
| `p:first-of-type` | First of some type |
| `p:last-of-type` | Last of some type |
| `p:nth-child(2)` | Second child of its parent |
| `p:nth-child(3n42)` | Nth-child (an + b) formula |
| `p:nth-last-child(2)` | Second child from behind |
| `p:nth-of-type(2)` | Second p of its parent |
| `p:nth-last-of-type(2)` | ...from behind |
| `p:only-of-type` | Unique of its parent |
| `p:only-child` | Only child of its parent |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Fonts
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Properties {.row-span-3}
Format markdown table
2021-09-14 13:03:55 +08:00
| Property | Description |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ----------------- | --------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `font-family:` | \<font> <fontN> |
| `font-size:` | \<size> |
| `letter-spacing:` | \<size> |
| `line-height:` | \<number> |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
feat: add support for running css
2025-01-05 13:31:16 +02:00
| `font-weight:` | \<number> / bold / normal | | `font-style:` | italic / normal | | `text-decoration:` | underline /
none |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
feat: add support for running css
2025-01-05 13:31:16 +02:00
| `text-align:` | left / right<br>center / justify | | `text-transform:` | capitalize / uppercase / lowercase |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
{.left-text}
See also: [Font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
### Shorthand {.secondary .col-span-2}
| | style | weight | size (required) | | line-height | family |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
| `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` |
| | style | weight | size (required) | | line-height | family (required) |
### Example
```css
font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;
```
### Case {.row-span-2}
```css
/* Hello */
text-transform: capitalize;
/* HELLO */
text-transform: uppercase;
/* hello */
text-transform: lowercase;
```
### @font-face
```css
@font-face {
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
font-family: 'Glegoo';
src: url('../Glegoo.woff');
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Colors
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Named color
```css
color: red;
color: orange;
color: tan;
color: rebeccapurple;
```
### Hexadecimal color
```css
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
```
### rgb() Colors
```css
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
new css cheetsheet update
2024-05-27 23:14:38 +05:30
color: rgb(34 12 64 / 60%);
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
color: rgba(34.6 12 64 / 30%);
```
### HSL Colors
```css
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
new css cheetsheet update
2024-05-27 23:14:38 +05:30
color: hsl(30 100% 50% / 60%);
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
color: hsla(30.2 100% 50% / 60%);
```
### Other
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
color: inherit;
color: initial;
color: unset;
color: transparent;
color: currentcolor; /* keyword */
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Backgrounds
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Properties {.row-span-2}
Format markdown table
2021-09-14 13:03:55 +08:00
| Property | Description |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------------- | ------------- |
Format markdown table
2021-09-14 13:03:55 +08:00
| `background:` | _(Shorthand)_ |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
feat: add support for running css
2025-01-05 13:31:16 +02:00
| `background-color:` | See: [Colors](#css-colors) | | `background-image:` | url(...) | | `background-position:` |
left/center/right<br/>top/center/bottom | | `background-size:` | cover X Y | | `background-clip:` |
border-box<br/>padding-box<br/>content-box | | `background-repeat:` | no-repeat<br/>repeat-x<br/>repeat-y | |
`background-attachment:` | scroll/fixed/local | {.left-text}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Shorthand {.secondary .col-span-2}
Format markdown table
2021-09-14 13:03:55 +08:00
| | color | image | positionX | positionY | | size | repeat | attachment |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------------- | ------ | ------------ | --------- | --------- | --- | -------------- | ----------- | ---------- |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
| `background:` | `#ff0` | `url(a.jpg)` | `left` | `top` | `/` | `100px` `auto` | `no-repeat` | `fixed;` |
| `background:` | `#abc` | `url(b.png)` | `center` | `center` | `/` | `cover` | `repeat-x` | `local;` |
Format markdown table
2021-09-14 13:03:55 +08:00
| | color | image | posX | posY | | size | repeat | attach.. |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Examples {.col-span-2}
```css {.wrap}
background: url(img_man.jpg) no-repeat center;
feat: add support for running css
2025-01-05 13:31:16 +02:00
background:
url(img_flwr.gif) right bottom no-repeat,
url(paper.gif) left top repeat;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
background: rgb(2, 0, 36);
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(13, 232, 230, 1) 35%,
rgba(0, 212, 255, 1) 100%
);
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS The Box Model
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Maximums/Minimums
```css
.column {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
max-width: 200px;
width: 500px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
feat: add support for running css
2025-01-05 13:31:16 +02:00
See also: [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) /
[min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) /
[max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) /
[min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Margin / Padding
```css
.block-one {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
margin: 20px;
padding: 10px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
feat: add support for running css
2025-01-05 13:31:16 +02:00
See also: [Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) /
[Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Box-sizing
```css
.container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
box-sizing: border-box;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See also: [Box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Box-sizing)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
### Visibility
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
.invisible-elements {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
visibility: hidden;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See also: [Visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Auto keyword
```css
div {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
margin: auto;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See also: [Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Overflow
```css
.small-block {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
overflow: scroll;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
See also: [Overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Animation {.cols-5}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Shorthand {.col-span-5 .secondary}
| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` | `both` | `reverse` |
| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |
### Properties {.row-span-2 .col-span-2}
Format markdown table
2021-09-14 13:03:55 +08:00
| Property | Value |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
| ---------------------------- | ------------------------------------------------------ |
Format markdown table
2021-09-14 13:03:55 +08:00
| `animation:` | _(shorthand)_ |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
| `animation-name:` | \<name> |
| `animation-duration:` | \<time>ms |
Format markdown table
2021-09-14 13:03:55 +08:00
| `animation-timing-function:` | ease / linear / ease-in / ease-out / ease-in-out |
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
| `animation-delay:` | \<time>ms |
| `animation-iteration-count:` | infinite / \<number> |
Format markdown table
2021-09-14 13:03:55 +08:00
| `animation-direction:` | normal / reverse / alternate / alternate-reverse |
| `animation-fill-mode:` | none / forwards / backwards / both / initial / inherit |
| `animation-play-state:` | normal / reverse / alternate / alternate-reverse |
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
{.left-text}
See also: [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)
### Example {.col-span-3}
```css
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
```
### Javascript Event {.col-span-3}
```js
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Flexbox {.cols-2}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Simple example
```css
.container {
display: flex;
}
```
```css
.container > div {
flex: 1 1 auto;
}
```
### Container {.row-span-2}
.container {
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: flex;
display: inline-flex;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
flex-direction: row; /* ltr - default */
flex-direction: row-reverse; /* rtl */
flex-direction: column; /* top-bottom */
flex-direction: column-reverse; /* bottom-top */
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
flex-wrap: nowrap; /* one-line */
flex-wrap: wrap; /* multi-line */
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
align-items: flex-start; /* vertical-align to top */
align-items: flex-end; /* vertical-align to bottom */
align-items: center; /* vertical-align to center */
align-items: stretch; /* same height on all (default) */
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
justify-content: flex-start; /* [xxx ] */
justify-content: center; /* [ xxx ] */
justify-content: flex-end; /* [ xxx] */
justify-content: space-between; /* [x x x] */
justify-content: space-around; /* [ x x x ] */
justify-content: space-evenly; /* [ x x x ] */
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
}
### Child
.container > div {
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
/* This: */
flex: 1 0 auto;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
/* Is equivalent to this: */
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
order: 1;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
align-self: flex-start; /* left */
margin-left: auto; /* right */
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
}
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Flexbox Tricks
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Vertical center
```css
.container {
display: flex;
}
.container > div {
width: 100px;
height: 100px;
margin: auto;
}
```
### Vertical center (2)
```css
.container {
display: flex;
/* vertical */
new css cheetsheet update
2024-05-27 23:14:38 +05:30
align-items: center;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
/* horizontal */
justify-content: center;
}
```
### Reordering
```css
.container > .top {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
order: 1;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
.container > .bottom {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
order: 2;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### Mobile layout
```css
.container {
display: flex;
flex-direction: column;
}
.container > .top {
flex: 0 0 100px;
}
.container > .content {
flex: 1 0 auto;
}
```
A fixed-height top bar and a dynamic-height content area.
### Table-like {.col-span-2}
```css
.container {
display: flex;
}
/* the 'px' values here are just suggested percentages */
new css cheetsheet update
2024-05-27 23:14:38 +05:30
.container > .checkbox {
flex: 1 0 20px;
}
.container > .subject {
flex: 1 0 400px;
}
.container > .date {
flex: 1 0 120px;
}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
feat: add support for running css
2025-01-05 13:31:16 +02:00
This creates columns that have different widths, but size accordingly according to the circumstances.
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Vertical
```css
.container {
align-items: center;
}
```
Vertically-center all items.
### Left and right {.col-span-2}
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
.menu > .left {
align-self: flex-start;
}
.menu > .right {
align-self: flex-end;
}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Grid Layout
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Grid Template Columns
```css
#grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### fr Relative Unit
```css
.grid {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### Grid Gap
```css
/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
grid-gap: 20px 10px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### CSS Block Level Grid
```css
#grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: block;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### CSS grid-row
new css cheetsheet update
2024-05-27 23:14:38 +05:30
CSS syntax:
Updated css.md
2020-12-26 19:33:02 +08:00
- grid-row: grid-row-start / grid-row-end;
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### Example
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
.item {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
grid-row: 1 / span 2;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### CSS Inline Level Grid
```css
#grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: inline-grid;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### minmax() Function
```css {.wrap}
.grid {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### grid-row-start & grid-row-end
new css cheetsheet update
2024-05-27 23:14:38 +05:30
CSS syntax:
Updated css.md
2020-12-26 19:33:02 +08:00
- grid-row-start: auto|row-line;<br>
- grid-row-end: auto|row-line|span n;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
#### Example
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
grid-row-start: 2;
grid-row-end: span 2;
```
### CSS grid-row-gap
```css
grid-row-gap: length;
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Any legal length value, like px or %. 0 is the default value
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### CSS grid-area
```css
.item1 {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
grid-area: 2 / 1 / span 2 / span 3;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### Justify Items
```css
#container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### CSS grid-template-areas
```css
.item {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
grid-area: nav;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
.grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
grid-template-areas:
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
'nav nav . .'
'nav nav . .';
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
### Justify Self
```css
#grid-container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
justify-items: start;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
.grid-items {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
justify-self: end;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
The grid items are positioned to the right (end) of the row.
### Align Items
```css
#container {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## CSS Dynamic Content
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
### Variable
Define CSS Variable
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
:root {
--first-color: #16f;
--second-color: #ff7;
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
Variable Usage
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
See also: [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
### Counter
```css
/* Set "my-counter" to 0 */
counter-set: my-counter;
```
```css
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
```
```css
/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;
```
```css
/* Reset "my-counter" to 0 */
counter-reset: my-counter;
```
See also: [Counter set](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set)
### Using counters
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
```css
new css cheetsheet update
2024-05-27 23:14:38 +05:30
body {
counter-reset: section;
}
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
h3::before {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
counter-increment: section;
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
content: 'Section.' counter(section);
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
```css
ol {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
counter-reset: section;
Added source code example for Lists Variants
2022-11-20 14:18:58 +08:00
list-marker-type: none;
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
li::before {
counter-increment: section;
feat: modernize development toolchain - Add comprehensive development tooling: * ESLint configuration with modern JavaScript rules * Prettier for consistent code formatting * Husky for Git hooks automation * lint-staged for pre-commit checks * Conventional Commits with commitlint * Stylelint for CSS code quality - Fix CSS issues: * Resolve duplicate selectors in layout_note.css * Merge duplicate selectors in layout_list.css * Ensure stylelint compliance - Apply consistent code formatting: * Format all JavaScript, CSS, and Markdown files * Standardize code style across the project * Fix console statement warnings in main.js - Update project documentation: * Enhance README with modern development practices * Update package.json with new scripts and dependencies This modernization establishes a robust development environment with automated code quality checks, consistent formatting~
2025-06-18 14:06:41 +08:00
content: counters(section, '.') ' ';
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## Css 3 tricks
Added css tricks
2021-01-03 15:52:14 +08:00
### Scrollbar smooth
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Added css tricks
2021-01-03 15:52:14 +08:00
```css
html {
new css cheetsheet update
2024-05-27 23:14:38 +05:30
scroll-behavior: smooth;
Added css tricks
2021-01-03 15:52:14 +08:00
}
```
new css cheetsheet update
2024-05-27 23:14:38 +05:30
Fix the anchor link not found
2021-12-19 15:22:40 +08:00
[Click me](#css-getting-started), the page will scroll smoothly to Getting started
Added css tricks
2021-01-03 15:52:14 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
## Modern CSS
css3 update
2024-05-28 21:42:38 +05:30
### container queries(size)
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.element-wrap {
container: element / inline-size;
}
@container element (min-inline-size: 300px) {
.element {
display: flex;
gap: 1rem;
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### container qeries(style)
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.container {
--variant: 1;
&.variant2 {
--variant: 2;
}
}
@container style(--variant: 1) {
button {
} /* You can't style .container, but can select inside it */
.other-things {
}
}
@container style(--variant: 2) {
button {
}
.whatever {
}
}
```
Added css tricks
2021-01-03 15:52:14 +08:00
css3 update
2024-05-28 21:42:38 +05:30
### container units
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
- The units are cqw (“container query width”),
- cqh (“container query height”),
- cqi (“container query inline”),
- cqb (“container query block”),
- cqmin (smaller of cqi and cqb),
- and cqmax (larger of cqi and cqb)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.card {
padding: 5cqi;
font-size: 4cqi;
border: 1cqi solid brown;
height: 100%;
}
h2 {
font-size: 10cqi;
margin-block: 0 3cqi;
}
```
css3 update
2024-05-28 21:42:38 +05:30
### the :has() pseudo selector
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
figure:has(figcaption) {
border: 1px solid black;
padding: 0.5rem;
}
```
css3 update
2024-05-28 21:42:38 +05:30
### nesting
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.cards {
.card {
& .card-description {
color: blue;
}
& .card-title {
color: red;
}
}
}
```
###
css3 update
2024-05-28 21:42:38 +05:30
### scoping
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
@scope {
:scope {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 1rem;
border: 1px solid black;
}
.card {
padding: 1rem;
border: 1px solid black;
background: lightgray;
h2 {
margin: 0 0 1rem 0;
}
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### cascade layers
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
/* Specify the order to apply styles in cascade */
@layer legacyCard, newCard;
/* Imagine you have a lot of styles */
@layer newCard {
.card {
background-color: red;
}
}
@layer legacyCard {
.card {
background-color: green;
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### logical properties
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
button {
background-color: #4caf50;
border: none;
color: white;
padding: 0.5rem 1.5rem;
text-decoration: none;
font: inherit;
border-radius: 4px;
.icon {
position: relative;
top: 0.125em;
fill: white;
width: 1em;
aspect-ratio: 1;
margin-inline-end: 0.25rem;
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### p3 colors
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```html
<div class="container">
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-color: color(display-p3 1 0.5 0);
}
}
</style>
</div>
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-color: oklch(61.88% 0.286 342.4);
}
}
</style>
</div>
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-color: oklab(0.73 0.15 0.16);
}
}
</style>
</div>
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-image: linear-gradient(to right in oklch, red, blue);
}
}
</style>
</div>
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-image: linear-gradient(to right in oklab, red, blue);
}
}
</style>
</div>
<div class="swatch">
<style contenteditable>
@scope {
:scope {
background-image: linear-gradient(to right in srgb, red, blue);
}
}
</style>
</div>
</div>
```
css3 update
2024-05-28 21:42:38 +05:30
### color mixing
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.swatch {
color: white;
width: 100px;
aspect-ratio: 1;
display: grid;
place-items: center;
text-align: center;
&:nth-child(1) {
background-color: var(--bg);
}
&:nth-child(2) {
background-color: color-mix(in oklch, var(--bg), black 30%);
}
&:nth-child(3) {
background-color: color-mix(in oklch, var(--bg), white 30%);
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### margin trim
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.container {
/* prevent "extra" margin at the end of the element */
margin-trim: block-end;
/* an element like this might be the culprit, but it could be anything */
> p {
margin-block-end: 1rem;
}
}
```
css3 update
2024-05-28 21:42:38 +05:30
### text wrapping
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.balance {
text-wrap: balance;
}
.pretty {
text-wrap: pretty;
}
html {
font-family: system-ui, sans-serif;
}
main {
max-inline-size: 60ch;
margin-inline: auto;
}
```
css3 update
2024-05-28 21:42:38 +05:30
### subgrid
new css cheetsheet update
2024-05-27 23:14:38 +05:30
```css
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: repeat(3, 80px);
}
.subitem {
grid-column: 3 / 6;
grid-row: 1 / 3;
}
```
## Also see {.cols-1}
- [frontendmasters.com ](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/)
Added CSS 3 cheatsheets
2020-12-26 15:50:34 +08:00
- [CSS selectors cheatsheet](https://frontend30.com/css-selectors-cheatsheet/) _(frontend30.com)_
- [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
- [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)
- [GRID: A simple visual cheatsheet](http://grid.malven.co/)
- [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Browser support](https://caniuse.com/#feat=css-grid)
Reference in New Issue Copy Permalink