Jadwali la mada

Mafunzo ya kuzingatia cha CSS

• Maktaba ya CSS
• Muhtasari wa CSS
• Inayotumiwa Kwa CSS
• Mashairi ya Chaguo ya CSS
• Tumia CSS
• Mazungumzo ya CSS
• Mwongozo wa Rangi ya CSS
• Rangi ya RGB ya CSS
• Rangi ya HEX ya CSS
• Rangi ya HSL ya CSS
• Mabackground ya CSS
• Mabackground ya Image ya CSS
• Urejea wa Mabackground ya CSS
• Ukongea wa Mabackground ya CSS
• Utafiti wa Mabackground ya CSS
• Maborder ya CSS
• Ukubwa wa Maborder ya CSS
• Rangi ya Maborder ya CSS
• Maborder ya Mbali na Mabaki ya CSS
• Utafiti wa Maborder ya CSS
• Makorongo ya Maborder ya CSS
• Makora ya CSS
• Umatumizi wa Makora ya CSS
• Makora ya Kimoja ya CSS
• Ukubwa/ukweli wa CSS
• Makorogoto ya CSS
• Makorogoto ya CSS
• Ukubwa wa Makorogoto ya CSS
• Rangi ya Makorogoto ya CSS
• Utafiti wa Makorogoto ya CSS
• Makorogoto ya Makorogoto ya CSS
• Matukio ya CSS
• Muelezeo ya Matukio ya CSS
• Mazungumzo ya Matukio ya CSS
• Mabadiliko ya Matukio ya CSS
• Ukubwa wa Mafupi ya Matukio ya CSS
• Makwemo ya Matukio ya CSS
• Fon ya CSS
• Stili ya Fon ya CSS
• Ukubwa wa Fon ya CSS
• Fon ya Google ya CSS
• Utafiti wa Fon ya CSS
• Icon ya CSS
• Link ya CSS
• List ya CSS
• Taarifa ya CSS

Mafunzo ya juu ya CSS

• CSS Display
• Max-width ya CSS
• CSS positioning
• CSS z-index
• CSS overflow
• CSS floating
• CSS clearing float
• Mafupi ya Layout ya CSS
• CSS inline-block
• Muundo wa kina cha CSS
• CSS kombo
• Mashairi ya CSS
• Mabonani ya CSS
• Inavutia ya CSS
• Makorima ya CSS
• Makorima ya Kimaingiliano ya CSS
• Makorima ya Kimaingiliano ya CSS
• Makorima ya Kusambaa ya CSS
• Makorima ya Tuzo ya CSS
• Makorima ya Image Sprite ya CSS
• Mashairi ya Ata ya CSS
• Muhtasari wa Muafundi ya CSS
• Kichakula ya CSS
• Mashairi ya Layout ya Taarifa ya CSS
• Vigezo ya CSS
• Muhalifu wa CSS
• CSS !important
• Mashairi ya Mafunzo ya CSS

Mafunzo ya juu ya CSS3

• Makorongo ya CSS
• Maborder ya Image ya CSS
• Mabackground ya CSS
• Mwongozo wa Rangi ya CSS
• Maneno ya Rangi ya CSS
• Mashairi ya Kufupi ya CSS
• Mashairi ya Radial ya CSS
• Mashairi ya Shadow ya CSS
• Box-shadow ya CSS
• Matukio ya Matukio ya CSS
• Fonti ya mtandao wa CSS
• Tukio 2D ya CSS
• Tukio 3D ya CSS
• Muafanikio wa CSS
• Hali ya maana ya CSS
• Msaada wa habari ya CSS
• Mwili wa picha wa CSS
• Mwili wa kina wa CSS
• CSS object-position
• Kifafanishaji cha CSS
• Kitufe cha CSS
• Makao ya CSS
• Makundi ya CSS
• Mifano ya uwanja wa CSS
• Mimba wa CSS
• Mimba ya kifafanishaji cha CSS
• CSS variable - JavaScript
• CSS variable - media query
• CSS @property
• Kina cha kikemia cha CSS
• Flexbox ya CSS
• Media query ya CSS
• Mifano ya media query ya CSS

Muundo wa kina cha CSS

• Kipindi cha RWD
• Viewport ya RWD
• Muundo wa grid wa RWD
• Media query ya RWD
• Picha ya RWD
• Video ya RWD

Mafunzo ya grid ya CSS

• Moduli wa muundo wa kina cha CSS
• Kina cha muundo wa kina cha CSS
• Mimba ya kina cha muundo wa CSS

Mifano ya CSS

• Mifano ya CSS

Matokeo ya CSS

• Matokeo ya CSS

Makala ya CSS

• Makala ya CSS
• Matumizi ya wasiwasi wa CSS
• Mashairi ya Chaguo ya CSS
• Funguo ya CSS
• Vigezo ya CSS
• Msaada wa wasia wa CSS
• Fonti ya mtandao ya amani wa CSS
• Mwizi wa CSS
• Vigezo ya CSS
• Mwongozo wa Rangi ya CSS
• Wazito wa rangi ya CSS
• Wazito wa muasi wa CSS
• Mimba ya CSS

Kurahisisha mada

Mambo ya kusumbua:

• Box ya Wizara ya CodeW3C.com

Display Thamani ya display ni thamani ya CSS ambayo inahusiana na ushindani wa muundo.

Thamani ya display

Display Inasababisha kuwa elementi inaelewa au inafanyishwa kama itakuwa.

Kila elementi ya HTML ina thamani wa display wa kufikia, ambao inahusiana na aina yake ya elementi. Kati ya uhusiano wa walioonekana, thamani wa display wa kufikia wa kawaida ni block au inline.

Elementi za kikubwa (block element)

Elementi za kikubwa zinginekwa kuanza mawakala mpya, na inapata eneo lakeo kwa kiasi kikubwa (kikubwa kikubwa kwenye eneo la kushambulia na kushindwa).

Mifano ya elementi za kikubwa:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elementi za kifaa kinachotumika (inline element)

elementi za kifaa kinachotumika haingepewa kuanza mawakala mpya, na inapata eneo lakeo tu.

Hii ni mawakala waElementi <span> za kifaa kinachotumika.

Mifano ya elementi za kifaa kinachotumika:

• <span>
• <a>
• <img>

Display: none;

display:none; inaaminika na JavaScript kwa kubonya na kuondoa elementi, bila kufaika na kurejeshwa tena. Ikiwa unataka kumtumia hii, angalia mifano ya mwisho ya ukurasa huu.

kwa msingi,<script> elementi inatumia display:none;.

Kubadilisha muundo wa Display wa Msingi

Kama ilivyotukua, kila elementi ina muundo wa display wa msingi. Lakini, unaweza kubadilisha huo.

Kubadilisha elementi za kifaa kinachotumika kwa block element, na vice versa, linaweza kusaidia kumekua ukurasa kwa njia inayofaa na uadilifu wa andaa wa Web.

Mfano wa kawaida ni kubuni elementi za kifaa kinachotumika kama inline kwa kumekua menyu wa mawingu. <li> elementi:

mivuno

li {
  display:inline;
}

Jifunze tena

Taradhis:kumewa kumwandaa muundo wa display wa elementi linaweza kubadilishamuundo wa elementina hauwahitaji kubadilisha aina ya elementi. Kwa hivyo, elementi za display:block; elementi za kifaa kinachotumika haingepewa kusababisha block element zingine.

Mifano hii inaonyesha elementi <span> kama elementi kikubwa:

mivuno

span {
  display:block;
}

Jifunze tena

Mifano hii inaonyesha elementi <a> kama elementi kikubwa:

mivuno

a {
  display:block;
}

Jifunze tena

Kubonya elementi - display:none au visibility:none?

display:none

kufaika

visibility:none

kubonya

Reset

kurejeshwa zote

kwa kutumia Display muundo wa none Inaweza kubonya elementi. Elementi linatakikwa kubonywa, na ukurasa linatukia kuwa kama elementi haina kwenye kwa hivyo:

mivuno

h1.feli {
  display:none;
}

Jifunze tena

visibility:none; inaweza kubonya elementi.

lakini, elementi hata haukutea eneo lakeo kama ilivyotokana. Elementi linatakikwa kubonywa, lakini haukutaka kusababisha muundo:

mivuno

h1.feli {
  Visibility: hidden;
}

Jifunze tena

Mimba ya Display/Visibility ya CSS

Kikaa cha vifaa

Makala ya CSS

Mifano ya CSS

Matokeo ya CSS

Kitabu cha kusoma cha kila siku cha CSS

Vifungo vya mshambuliaji