Introduction to CSS Styling

Booska CSS

Booska CSS wuxuu xakameeyaa sida curiyuhu ugu yaallo dukumeentiga HTML. Waxaa jira noocyo badan oo boos ah:

  • static: Kani waa booska caadiga ah. Curiyuhu wuxuu u yaallaa sida caadiga ah qulqulka dukumeentiga.
  • relative: Curiyuhu wuxuu u yaallaa marka hore sida caadiga ah, ka dibna waa la dhaqaajin karaa iyadoo la isticmaalayo top, right, bottom, iyo left.
  • absolute: Curiyuhu wuxuu ka baxaa qulqulka dukumeentiga wuxuuna u yaallaa marka loo eego curiyaha waalidka ee ugu dhow ee booskiisu yahay relative, absolute, ama fixed.
  • fixed: Curiyuhu wuxuu ka baxaa qulqulka dukumeentiga wuxuuna u yaallaa marka loo eego daaqadda biraawsarka. Wuxuu ku sugnaanayaa meeshiisa xitaa marka bogga la rogayo.

.relative {
 position: relative;
 left: 30px;
}

.absolute { position: absolute; top: 50px; right: 0; }

Dulalka CSS

Dulalku waxay xakameeyaan booska u dhexeeya curiyaha iyo curiyaha kale.

  • margin: Booska ka baxsan xadka curiyaha.
  • padding: Booska ku dhex yaalla xadka curiyaha iyo waxa ku jira.

.margin {
 margin: 20px;
}

.padding { padding: 10px; }

Waxaad ku qeexi kartaa dulalka dhinac kasta si gaar ah:

  • margin-top, margin-right, margin-bottom, margin-left
  • padding-top, padding-right, padding-bottom, padding-left