ወደ ይዘቱ ይዝለሉ
እገዛ
የገንቢ ዲዛይን እና ቅንብሮች

ብጁ CSSን ወደ መላ ሱቄ ወይም ወደ አንድ ክፍል እንዴት እጨምራለሁ?

በሱቅ ገንቢው ውስጥ የራስዎን CSS ይጨምሩ፦ ለመላ ሱቁ የብጁ CSS ቅንብሮች ትር፣ እና ያንን ክፍል ብቻ የሚያስውበው የክፍሉ ብጁ CSS ትር። የክፍል CSS እንዴት እንደሚገደብ፣ የ& መምረጫ፣ የሚዲያ መጠይቆች፣ እና CSSዎ ሳይሰራ ሲቀር ጠቃሚ ምክሮች።

3 ደቂቃ ንባብ

CSS ሱቅዎ እንዴት እንደሚመስል ይቀይራል፦ ቀለሞችን፣ ክፍተቶችን፣ መጠኖችን እና ሌሎችንም። የራስዎን CSS በሱቅ ገንቢው ውስጥ በሁለት ቦታዎች መጨመር ይችላሉ፦ ለመላ ሱቁ፣ ወይም ለአንድ ክፍል ብቻ።

ለመላ ሱቁ ብጁ CSS

የማርሽ አዶውን ጠቅ አድርገው የብጁ CSS ትርን ይክፈቱ። ሳጥኑ የCSS ኮድ ይባላል፦ በመላ ሱቁ ላይ ይተገበራል። CSSዎ በሚያርትዑት ገበያ እያንዳንዱ ገጽ ላይ ይጫናል፣ ቅድመ እይታውም ውጤቱን ያሳያል።

በሁሉም ቦታ መተግበር ላለባቸው ደንቦች ይጠቀሙበት፣ ለምሳሌ በሁሉም ገጾች ላይ አንድን ኤለመንት ለመደበቅ ወይም የእያንዳንዱን አዝራር ስታይል ለመቀየር። ለምሳሌ፣ h1 { text-transform: uppercase; } የእያንዳንዱን ገጽ ዋና ርዕስ በትልልቅ ፊደላት ይጽፋል።

ለአንድ ክፍል ብጁ CSS

በክፍሎች ትር ውስጥ ክፍልን ይምረጡ። በቅንብሮቹ ታች የብጁ CSS ትርን ይክፈቱ። የየCSS ኮድ ሳጥኑ በዚህ ክፍል ላይ ብቻ ይተገበራል። ይላል። ራስጌውን፣ ግርጌውን፣ ዋናውን ክፍል፣ የምርት መረጃውን እና ትዕዛዝ ማጠናቀቂያውን ጨምሮ አብዛኞቹ ክፍሎች አሉት።

ይህ የበለጠ አስተማማኝ ምርጫ ነው። Storeep ክፍሉን ከእያንዳንዱ መምረጫዎ ፊት ይጨምራል፣ ስለዚህ ደንቦችዎ ከሱ ውጭ ምንም ነገር ሊቀይሩ አይችሉም።

  • h2 { letter-spacing: 2px; } በዚህ ክፍል ውስጥ ያሉትን ርዕሶች ብቻ ይቀይራል።
  • ክፍሉን ራሱን ለማስዋብ &ን ይጠቀሙ፦ & { border-top: 1px solid #000; }።
  • የ@media ደንቦች ይሰራሉ። በውስጣቸው ያሉ ደንቦችም በክፍሉ የተገደቡ ናቸው።
  • የ@keyframes እንቅስቃሴዎች እንደጻፏቸው ይቀመጣሉ።

የክፍሉ CSS በዚያ ገጽ ላይ ያለው የዚያ ክፍል ነው። ክፍሉን ከCSSው ጋር ወደሚያካትቱት ሌሎች ገጾችዎ ለመቅዳት በክፍሉ ላይ በሁሉም ገጾች ላይ ይተግብሩን ይጠቀሙ። በሁሉም ገጾች ላይ መተግበር የሚለውን ይመልከቱ።

የትኛውን መጠቀም

  • አንድ ክፍል የተሳሳተ ይመስላል፦ የክፍሉን ብጁ CSS ይጠቀሙ።
  • ተመሳሳዩ ለውጥ በሁሉም ቦታ ያስፈልጋል፦ የብጁ CSS ቅንብሮች ትርን ይጠቀሙ።
  • CSS ከመጻፍዎ በፊት አንድ ቅንብር አስቀድሞ ያደርገው እንደሆነ ያረጋግጡ፦ ቀለሞች በየቀለም ቅንጅቶች ውስጥ፣ ፎንቶች በየፎንቶች ቅንብሮች ውስጥ ናቸው፣ ማዕዘኖች እና ጥላዎች ደግሞ ከገጽታዎ ይመጣሉ።

CSSዎ ሳይሰራ ሲቀር

  • የጎደለ } ወይም ; ካለ ያረጋግጡ። አንድ ስህተት ከሱ በኋላ ያሉትን ደንቦች ሊያስቆም ይችላል።
  • ደንብዎ ከገጽታው ደንብ ደካማ ሊሆን ይችላል። መምረጫውን የበለጠ የተለየ ያድርጉት።
  • በክፍል CSS ውስጥ፣ መምረጫዎን በbody ወይም በhtml አይጀምሩ። እነሱ ከክፍሉ ውጭ ናቸው፣ ስለዚህ ደንቡ አይዛመድም።
  • ገጹ የተበላሸ ቢመስል፣ የመጨረሻውን ለውጥዎን ያስወግዱ፣ ያትሙ፣ ከዚያ ደንቦችን አንድ በአንድ ይመልሱ።

ማወቅ ያለብዎት

  • ብጁ CSS የሚያርትዑት ገበያ ነው። በሚያስፈልገው በእያንዳንዱ ገበያ ውስጥ ይድገሙት።
  • ገጽታዎን መቀየር የክፍል ስሞችን እና አቀማመጥን ሊቀይር ይችላል፣ ስለዚህ ገጽታ ከቀየሩ በኋላ ብጁ CSSዎን ያረጋግጡ።
  • ለውጦች ያትሙ የሚለውን ጠቅ ሲያደርጉ ይታያሉ።
  • በገጽ ውስጥ ላለ HTML እና ኮድ፣ ብጁ ኮድ የሚለውን ይመልከቱ።

አሁንም እገዛ ይፈልጋሉ?

ይጻፉልን፣ እንመልስልዎታለን።

ያግኙን