Karatasi ya Maelezo ya CSS
Rejeleo linalotafutika na linaloweza kuchapishwa la CSS — selectors, muundo wa box, flexbox, grid, uchapaji, mabadiliko na vipengele vya kisasa. Bila malipo.
Selectors
13.class
Chagua vipengele vyote vyenye class
#id
Chagua kipengele chenye id
a, b
Kundi: chagua a na b
a b
Mzao: b ndani ya a
a > b
Mtoto wa moja kwa moja b wa a
a + b
Ndugu wa karibu mara baada ya a
a ~ b
Ndugu wa jumla b baada ya a
[type="text"]
Selector ya attribute
:hover :focus
Pseudo-classes kwa hali
:nth-child(2n)
Kila mtoto wa shufwa
::before ::after
Pseudo-elements (maudhui yanayozalishwa)
:not(.x)
Ukanushaji: chochote isipokuwa .x
:is(h1, h2, h3)
Hulingana na selector yoyote kwenye orodha
Box model
7box-sizing: border-box;
Jumuisha padding na border kwenye upana
margin: 0 auto;
Weka block katikati kimlalo
padding: 1rem 2rem;
Wima 1rem, mlalo 2rem
border: 1px solid #ccc;
Upana, mtindo, rangi
border-radius: 8px;
Pembe za mviringo
outline: 2px dashed red;
Outline (haiathiri layout)
overflow: hidden;
Kata maudhui yanayozidi
Flexbox
8display: flex;
Tengeneza flex container
flex-direction: row | column;
Mwelekeo wa main axis
justify-content: space-between;
Panga kwenye main axis
align-items: center;
Panga kwenye cross axis
flex-wrap: wrap;
Ruhusu vipengele kujikunja
gap: 1rem;
Nafasi kati ya vipengele
flex: 1;
Kua kujaza nafasi (1 1 0)
align-self: flex-end;
Tengua cross-axis kwa kipengele kimoja
Grid
8display: grid;
Tengeneza grid container
grid-template-columns: 1fr 1fr 1fr;
Columns tatu sawa
repeat(3, 1fr)
Ufupisho wa tracks zinazorudiwa
minmax(200px, 1fr)
Track kati ya min na max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Columns otomatiki zinazonyumbulika
gap: 1rem;
Pengo la row na column
grid-column: 1 / 3;
Tandaza kutoka mstari 1 hadi 3
place-items: center;
Weka vipengele katikati kwenye axes zote mbili
Typografia
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Ukubwa wa font wa kulinganishwa
font-weight: 600;
Uzito wa bold
line-height: 1.6;
Nafasi kati ya mistari
letter-spacing: .02em;
Tracking
text-align: center;
Mpangilio wa maandishi kimlalo
text-transform: uppercase;
Badilisha kesi ya herufi
text-overflow: ellipsis;
Kata kwa … (huhitaji overflow+nowrap)
Rangi na mandharinyuma
7color: #1f2937;
Rangi ya maandishi
background: rgb(0 0 0 / 50%);
rgb ya kisasa yenye alpha
background: linear-gradient(90deg,#f06,#48f);
Gradient ya mstari
opacity: .5;
Uwazi wa kipengele
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Kivuli cha drop
background-size: cover;
Nyoosha picha kufunika
color-mix(in srgb, red 40%, blue);
Changanya rangi mbili
Uwekaji nafasi
6position: relative;
Sogeza kutoka nafasi ya kawaida
position: absolute;
Kulingana na mzazi wa karibu aliyewekwa nafasi
position: fixed;
Kulingana na viewport
position: sticky; top: 0;
Hunata unapopita kwa scroll
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Mpangilio wa stacking
Transitions na animation
5transition: all .2s ease;
Hamasisha mabadiliko ya property
transform: translateY(-4px) scale(1.05);
Sogeza, nyoosha, zungusha
@keyframes spin { to { transform: rotate(360deg); } }
Fafanua animation
animation: spin 1s linear infinite;
Endesha animation ya keyframe
will-change: transform;
Dokeza browser kuboresha
Inayonyumbulika na ya kisasa
7@media (max-width: 768px) { ... }
Breakpoint ya media query
clamp(1rem, 2vw, 2rem)
Thamani inayonyumbulika na min/max
aspect-ratio: 16 / 9;
Dumisha aspect ratio
var(--brand)
Tumia custom property
:root { --brand: #4f46e5; }
Fafanua custom property
container-type: inline-size;
Wezesha container queries
@container (min-width: 400px) {…}
Container query
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.