Karatasi ya Maelezo ya CSS

Zana zote
Bila Malipo

Rejeleo linalotafutika na linaloweza kuchapishwa la CSS — selectors, muundo wa box, flexbox, grid, uchapaji, mabadiliko na vipengele vya kisasa. Bila malipo.

Selectors

13
.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list

Box model

7
box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows

Flexbox

8
display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item

Grid

8
display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes

Typography

8
font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)

Colors & background

7
color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors

Positioning

6
position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order

Transitions & animation

5
transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize

Responsive & modern

7
@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query

Hakuna kipengele kinacholingana na “:q”.

Kuhusu Karatasi ya Maelezo ya CSS

Karatasi hii ya kumbukumbu ya CSS inaweka pamoja sifa (properties) unazotumia kila siku kwenye ukurasa mmoja unaoweza kutafutwa: vichaguzi (selectors), muundo wa sanduku (box model), flexbox, grid, uandishi wa herufi (typography), rangi na mandhari, uwekaji nafasi, mabadiliko na uhuishaji, na sehemu ya CSS ya kisasa na inayobadilika kulingana na kifaa.

Imepangwa ili jibu la "sifa ile iliitwaje?" liwe utafutaji mmoja tu mbali — sehemu za flexbox na grid hasa zinaorodhesha sifa za mpangilio na upatanishi pamoja na thamani unazoweza kunakili moja kwa moja kwenye stylesheet, na sehemu ya kisasa inaweka vipengele vipya karibu.

Karatasi ni bure, inapakia upande wa kifaa chako, inachuja papo hapo unapoandika, na inakuruhusu kunakili tamko lolote kwa mbofyo mmoja. Orodha ya yaliyomo inayoning'inia huruka kati ya sehemu na kitufe cha kuchapisha huzalisha kumbukumbu safi ya karatasi.

Jinsi ya kutumia Karatasi ya Maelezo ya CSS

  1. Pitia orodha ya sehemu — Vichaguzi, Muundo wa sanduku, Flexbox, Grid, Uandishi wa herufi na zaidi.
  2. Andika sifa au dhana kama grid, hover au transition kwenye sanduku la utafutaji ili kuchuja kila safu mlalo.
  3. Ruka hadi sehemu kama Uwekaji nafasi kupitia orodha ya yaliyomo inayoning'inia.
  4. Bofya kipande cha msimbo au ikoni yake ya kunakili ili kunakili tamko la CSS.
  5. Chapisha karatasi kwa ajili ya kumbukumbu ya CSS pembeni ya meza yako.

Maswali yanayoulizwa mara kwa mara

Sehemu tisa: vichaguzi, muundo wa sanduku, flexbox, grid, uandishi wa herufi, rangi na mandhari, uwekaji nafasi, mabadiliko na uhuishaji, na vipengele vya CSS vya kisasa na vinavyobadilika kulingana na kifaa.

Ndiyo — zote mbili zina sehemu zake zenye sifa za kontena na kipengele, thamani za upatanishi na aina fupi za uandishi, ambazo ndizo watengenezaji hutafuta zaidi.

Ndiyo. Kando na msingi wa muda mrefu, sehemu maalum ya CSS inayobadilika na ya kisasa inashughulikia vipengele vipya unavyokutana navyo kwenye stylesheet za sasa, pamoja na mifumo ya media queries.

Ndiyo. Bofya msimbo au ikoni ya kunakili inayoonekana unapoweka mshale nayo tamko huwekwa kwenye clipboard yako, ikithibitishwa na ujumbe mfupi wa "Imenakiliwa!"

Ndiyo, ni bure kabisa — ukurasa unaofanya kazi upande wa kifaa chako wenye utafutaji wa moja kwa moja, bila kuingia na matumizi yasiyo na kikomo.
Shiriki hii
Zana Zinazohusiana
Karatasi ya Maelezo ya JavaScript Rejeleo linalotafutika na linaloweza kuchapishwa la JavaScript ya kisasa — sintaksia, safu, mifuatano, vitu, async/await, DOM na vipengele vya ES2022+. Bila malipo. Bila Malipo
Kibadilishi cha HTML hadi JSX Bandika HTML na upate JSX safi ya React — class inakuwa className, sifa zinakuwa camelCase, mfuatano wa style unakuwa vitu na vitambulisho vinajifunga vyenyewe. Hufanya kazi kabisa kwenye kivinjari chako. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya PHP Rejeleo linalotafutika na linaloweza kuchapishwa la PHP 8.3+ — sintaksia, mifuatano, safu, vitendakazi, klasi, enums, sifa na vipengele vya kisasa. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya MySQL Rejeleo linalotafutika na linaloweza kuchapishwa la MySQL — hoja, joins, fahirisi, vitendakazi, aina za data na amri za usimamizi. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya Python Rejeleo linalotafutika na linaloweza kuchapishwa la Python 3 — sintaksia, miundo ya data, comprehensions, vitendakazi, klasi, mafaili na maktaba ya kawaida. Bila malipo. Bila Malipo
Karatasi ya Maelezo ya Shell Rejeleo linalotafutika na linaloweza kuchapishwa la Bash / shell — usogezaji, mafaili, pipes, viwakilishi, loops, masharti na one-liners za manufaa. Bila malipo. Bila Malipo
Utafutaji maarufu
css cheat sheet css selectors list css flexbox properties css grid properties css box model reference css position values css transition and animation syntax css properties reference
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.