Jadualu la maadili

Mafunzo ya kuzingatia cha CSS

• Mafunzo ya CSS
• Muhtasari wa CSS
• Majadiliano ya CSS
• Muhtasari wa Vichaguli vya CSS
• Matumizi ya CSS
• Mashaka ya CSS
• Maboni ya CSS
• Maboni ya RGB ya CSS
• Maboni ya HEX ya CSS
• Maboni ya HSL ya CSS
• Mabaki ya Maboni ya CSS
• Mabaki ya Mafoto ya CSS
• Urejea wa Mabaki ya Maboni ya CSS
• Ukimbaya wa Mabaki ya Maboni ya CSS
• Mafunzo ya Mabaki ya Maboni ya CSS
• Mabaki ya Kifungu cha CSS
• Uwezo wa Mabaki ya Kifungu cha CSS
• Maboni ya Kifungu cha CSS
• Vichaguli vya Mabaki ya Kifungu cha CSS
• Mafunzo ya Mabaki ya Kifungu cha CSS
• Kiwango cha Kifungu cha Kifungu cha CSS
• Ukubwa wa Kifungu cha CSS
• Ukimbaya wa Kifungu cha CSS
• Mabaki ya Kifungu cha CSS
• Ukubwa/ukadha ya CSS
• Mfumo wa Kifungu cha CSS
• Kifungu cha CSS
• Uwezo wa Kifungu cha CSS
• Maboni ya Kifungu cha CSS
• Mafunzo ya Kifungu cha CSS
• Ukumbuka wa Kifungu cha CSS
• Matumizi ya Kifungu cha CSS
• Ukufikia wa Matumizi ya Kifungu cha CSS
• Mafunzo ya Matumizi ya Kifungu cha CSS
• Matumizi ya Kifungu cha CSS
• Ukubwa wa Matumizi ya Kifungu cha CSS
• Mabaki ya Matumizi ya Kifungu cha CSS
• Matumizi ya Kifungu cha CSS
• Mafunzo ya Matumizi ya Kifungu cha CSS
• Ukubwa wa Matumizi ya Kifungu cha CSS
• Matumizi ya Kifungu cha Google
• Mafunzo ya Matumizi ya Kifungu cha CSS
• Mafunzo ya Icon ya CSS
• Mafunzo ya Kiwango cha CSS
• Mafunzo ya Tovuti ya CSS
• Mafunzo ya Tovuti ya CSS

Mafunzo ya juu ya CSS

• Display ya CSS
• max-width ya CSS
• Muundo wa CSS
• z-index ya CSS
• Kupunguza cha CSS
• Mafunzo ya kina ya CSS
• Kusifanya mafunzo ya kina ya CSS
• Mafunzo ya Layout ya CSS - Mfano wa Uharibifu
• inline-block ya CSS
• Kuelekea cha CSS
• Kifanyikio cha CSS
• Mafunzo ya CSS - Pseudo-classes
• Mafunzo ya CSS - Pseudo-elements
• Mafunzo ya CSS - Transparency
• Mafunzo ya CSS - Navigation Bar
• Mafunzo ya CSS - Vertical Navigation Bar
• Mafunzo ya CSS - Horizontal Navigation Bar
• Mafunzo ya CSS - Dropdown Menu
• Mafunzo ya CSS - Image Gallery
• Mafunzo ya CSS - Image Sprite
• Mafunzo ya CSS - Attribute Selectors
• Mafunzo ya CSS - Forms
• Mafunzo ya CSS - Counters
• Mafunzo ya CSS - Website Layout
• Mafunzo ya CSS - Units
• Mafunzo ya CSS - Specificity
• CSS !important
• Mafunzo ya CSS - Mathematical Functions

Mafunzo ya juu ya CSS

• Mafunzo ya CSS - Rounded Corners
• Mafunzo ya CSS - Border Images
• Mabaki ya Maboni ya CSS
• Maboni ya CSS
• Mafunzo ya CSS - Color Keywords
• Mafunzo ya CSS - Gradients
• Mafunzo ya CSS - Radial Gradients
• Mafunzo ya CSS - Shadows
• Mafunzo ya CSS - box-shadow
• Mafunzo ya CSS - Text Effects
• CSS mafaniko wa kifupi
• CSS 2D kugumu
• CSS 3D kugumu
• CSS kusaidia
• CSS kifupi
• CSS kituo cha maelezo
• CSS stili ya picha
• CSS object-fit
• object-position ya CSS
• CSS kishwari
• CSS kifupi
• CSS kufungua
• CSS kifupu
• CSS muundo wa mtumishi
• Hisia za CSS
• Hisia za CSS za kugumu
• Mfano wa CSS wa JavaScript
• Mfano wa CSS wa media
• CSS @property
• CSS Box Sizing
• CSS Flexbox
• CSS media query
• Mfano wa CSS media query

Muundo wa CSS wa mbinguni

• Kipengele cha media
• Kikaa cha media
• Mashua ya media
• Mfanyikio wa media
• Image ya RWD
• Video ya RWD

Mafunzo ya rangia ya mtandao

• Moduli ya muundo wa CSS wa mtandao
• Kivunja kwa muundo wa CSS
• Mfano wa kivunja kwa muundo wa CSS

Mfano wa CSS

• Mfano wa CSS

Matokeo ya CSS

• Matokeo ya CSS

Kitabu cha mifano cha CSS

• Kitabu cha mifano cha CSS
• Mwongozo wa kufungua kwa CSS
• Muhtasari wa Vichaguli vya CSS
• Funguo za CSS
• Mafunzo ya CSS - Units
• CSS inayotumia ukinunua
• CSS mafaniko wa mtandao
• CSS inayofanana
• Mafunzo ya CSS - Units
• Maboni ya CSS
• Wakati wa CSS
• Wakati wa kuswa wa CSS
• Mafaniko ya CSS

Kurahisisha

Inahesabu mtafiti:

• Kizi ya CodeW3C.com

Hisia za CSS

Inayofanywa kwa var() kuzingiza thamani za thamani za CSS.

Thamani za CSS zinaweza kufikia DOM, inaingia kwa sababu hizi zinaweza kureja thamani za kijingine au za kuu, kutumia JavaScript kureja thamani, na kutumia media queries kureja thamani.

Mwendo wa kuzungumza kwa thamani za CSS inaweza kufanana na rangia za design. Unaweza kuweka kwenye thamani, bila ya kureja na kureja rangia ya hizi kila mara.

Uendelevu wa kawaida

Mifano ya hii inadangaa uendelevu wa rangia ya kawaida (kwa kufafanisha kwa kina ya kawaida):

Mfano

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Tukifanya mafanikio

Inayofanywa kwa var() kuzingiza thamani za thamani za CSS.

Inayofanywa kwa var() kuzingiza thamani za thamani za CSS.

Inayofanywa kwa var() kuzingiza thamani ya thamani za CSS.

var(name, value)

Tahadhari:Jina la thamani lazima likiwa la kuzingatia mbili au mbili (--) na kuzingatia kwa kina!

Husaidia var() kufungua:

Kwanza: Thamani za CSS zinaweza kuwa za kuu au za kijingine.

Thamani za kuu zinaweza kuchukua tabaka kote kwenye siku hiyo, thamani za kijingine zinaweza kutumiwa pekee katika chaguo cha chukua thamani hii.

Kwa kureja thamani ya kuu, tumaathirisha kwa chaguo cha :root. Chaguo cha :root inaingia kina ya siku hiyo.

Kwa kureja thamani ya jingine inayohusiana na jingine, tumaathirisha kwa chaguo cha chaguo ambao unatokana na kwa kumtaarifu hii.

Mifano ya hii inayofanana na mifano ya juu, lakini hapa tunatumia var().

Kwanza, tunachukua mbili thamani jingine (--blue na --white). Kisha, tunatumia var() kuingiza thamani ya thamani kwenye maelezo ya rangia kwenye zamani:

Mfano

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Tukifanya mafanikio

Mafanikio ya kuitumia var() ni:

• Kueleza kidhaifu cha programu kwa kina (kuelewa kwa kina)
• Kueleza kidhaifu cha rangia kwa kina

Kwa kuweza kubadilisha kijani na uwezo wa kijani na uwezo wa kijani, unaingia kwa sababu mbili ya thamani:

Mfano

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Tukifanya mafanikio

Mwongozo wa kufungua

Inaingia ya uwanja wa tabia inaonekana na safari ya kwanza ambayo inakubali hisia hii kwa kawaida.

Funguo ya CSS var()

Kitu cha kifunzo

Kitabu cha mifano cha CSS

Mfano wa CSS

Matokeo ya CSS

Kitabu cha kwanza cha CSS

Viungo vya msaada