Timetable

Basic CSS Tutorial

• Makao ya CSS
• Kizaituni cha CSS
• Makala ya CSS
• Mwongozo wa chaguo cha CSS
• Matumizi ya CSS
• Mwongozo wa maadili cha CSS
• Mwongozo wa rangi cha CSS
• Rangi ya RGB cha CSS
• Rangi ya HEX cha CSS
• Rangi ya HSL cha CSS
• Mabaki ya CSS
• Mabaki ya picha ya CSS
• Urejezo wa mabaki ya CSS
• Ukubadilika wa mabaki ya CSS
• Mafupi ya mabaki ya CSS
• Mabaki ya kifungu cha CSS
• Ukubwa wa kifungu cha CSS
• Rangi ya kifungu cha CSS
• Mabaki ya kifungu cha kila eneo
• Mafupi ya mabaki ya kifungu
• Kovu cha kifungu cha kina
• Makazi ya kifungu
• Ukongea kwa makazi ya kifungu
• Makazi ya kina
• CSS Height/Width
• Makabila ya kifungu
• Kifungu cha mifano
• Ukubwa wa kifungu cha mifano
• Rangi ya kifungu cha mifano
• Mafupi ya kifungu cha mifano
• Ukubadilika wa kifungu cha mifano
• Matukio ya mtafiti
• Utekelezaji wa matukio ya mtafiti
• Mwongozo wa matukio ya mtafiti
• Utekelezaji wa matukio ya mtafiti
• Ukubwa wa nafasi ya matukio ya mtafiti
• Mfano wa matukio ya mtafiti
• Makabila ya mtafiti
• Makabila ya mtafiti
• Ukubwa wa mtafiti
• Mtafiti wa Google
• Mafupi ya makabila ya mtafiti
• Ikoni za CSS
• Makampuni ya CSS
• Makampuni ya CSS
• Makampuni ya CSS

Intermediate CSS Tutorial

• CSS Display
• CSS max-width
• CSS Positioning
• CSS z-index
• CSS Overflow
• CSS Floating
• CSS Clear Float
• Makabila ya CSS - Mfano wa uharibifu
• CSS inline-block
• CSS Alignment
• CSS Combinator
• Makabila ya CSS - Pseudokindiki
• Makabila ya CSS - Pseudoelektroniki
• Makabila ya CSS - Uharibifu
• Makampuni ya CSS
• Makampuni ya CSS - Baru ya pekee
• Makampuni ya CSS - Baru ya mawingu
• Makampuni ya CSS - Menu ya kushambulia
• Makampuni ya CSS
• Makampuni ya CSS
• Makabila ya CSS
• Makampuni ya CSS
• Makampuni ya CSS
• Makampuni ya CSS
• Mavitabu ya CSS
• Mavitabu ya CSS
• CSS !important
• Mavitabu ya CSS

Advanced CSS3 Tutorial

• Kovu cha CSS
• Mabaki ya kifungu cha picha cha CSS
• Mabaki ya CSS
• Mwongozo wa rangi cha CSS
• Maviringa ya rangi ya CSS
• Mafupi ya rangi ya CSS
• Mafupi ya rangi ya kina ya CSS
• Mafupi ya mifano ya CSS
• Mafupi ya mifano ya kina ya CSS
• Mafupi ya matukio ya mtafiti
• CSS Fonti ya Inet
• CSS Mifano ya 2D
• CSS Mifano ya 3D
• CSS Transition
• CSS Animation
• CSS Tooltip
• CSS Style ya Picha
• CSS object-fit
• CSS object-position
• CSS Mask
• CSS Button
• CSS Pagination
• CSS Columns
• CSS User Interface
• CSS Variables
• CSS Variables ya Overwrite
• CSS Variables - JavaScript
• CSS Variables - Media Query
• CSS @property
• CSS Box Sizing
• CSS Flexbox
• CSS Media Queries
• Mfano wa Media Queries ya CSS

CSS Responsive Design

• RWD Introduction
• RWD Viewport
• RWD Grid View
• RWD Media Query
• RWD Image
• RWD Video

Mwongozo wa CSS Grid

• Moduli ya Layout wa Grid ya CSS
• Container ya Grid ya CSS
• Project ya Grid ya CSS

Mfano wa CSS

• Mfano wa CSS

Quiz ya CSS

• Quiz ya CSS

Makala ya Reference ya CSS

• Makala ya Reference ya CSS
• Sasabali ya Browser ya CSS
• Mwongozo wa chaguo cha CSS
• Funksheni ya CSS
• Mavitabu ya CSS
• CSS Audio
• Fonti ya Internet ya Security ya CSS
• CSS Animatable
• Mavitabu ya CSS
• Mwongozo wa rangi cha CSS
• Chaguo cha rangi cha CSS
• Chaguo cha Chaguo cha CSS
• Entity ya CSS

Makadaro ya ujenzi

Mauzepeo ya kuzingatia:

• Kitu cha Tengeneza cha CodeW3C.com

Tumia thamani katika media query

Sasa, tunahitaji kurekebisha thamani katika media query.

Mambo ya msaada:Media query inafanya kufikiria uadilifu wa stili kwa mashine mbalimbali (mifano, taabu, simu za kifaa au kina kina). Tunaweza kueleza zaidi kuhusu media query katika kitabu cha media query.

Hapa, tunaweza kuanza kuanzisha uadilifu ujenzi mpya kwa kikoa --fontsize kwa class .container. Tunapewa thamani 25 paksi. Kisha tunaweza kutumia hilo kwa class .container. Kisha, tunapokea @media kwa thamani ya 'ingawa uwezo wa mifano ni 450px au zaidi, tunaweza kuhusisha thamani ya --fontsize ya class .container kwa 50 paksi.'

Hii ni matokeo mlimani:

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

Jifunze Tena

Hii ndio mengineka mtaani, ambapo tukianza kwa haraka @media katika uadilifu wa thamani --blue:

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

Jifunze Tena

Sasabali ya Browser

Inaonyesha browser za kwanza ambazo zimehesabisha kusababisha hisia hii kwa uwanja wa kamili.

Funksheni var() ya CSS

Box cha Vifaa

Makala ya Reference ya CSS

Mfano wa CSS

Quiz ya CSS

Kitabu cha Chakula cha CSS

Viungo vya Mwabika