CSS ን ለመፍጠር 4 መንገዶች

2024 ደራሲ ደራሲ: Gilbert Ryder | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-10 23:55

የ Cascading Style Sheet (CSS) ንድፍ አውጪዎች የተወሰኑ አባሎችን ለቡድኖች በመመደብ በአንድ ጊዜ በርካታ ባህሪያትን በአንድ ጊዜ እንዲያስተዳድሩ የሚያስችል የድር ጣቢያ ኮድ ስርዓት ነው። ለምሳሌ ፣ ለድር ጣቢያው ዳራ ኮድ በመጠቀም ፣ ዲዛይነሮች በሁሉም የድረ -ገፁ ገጾች ላይ የጀርባውን ቀለም ወይም ምስል በሲኤስኤስ ፋይል አንድ ለውጥ መለወጥ ይችላሉ። ለመሠረታዊ ድር ጣቢያ CSS እንዴት እንደሚፈጥሩ እነሆ።

ደረጃዎች

የ 1 ክፍል 4: የመስመር ውስጥ ሲኤስኤስ መጻፍ

ደረጃ 1. የኤችቲኤምኤል መለያዎች መሠረታዊ ግንዛቤ እንዳለዎት እርግጠኛ ይሁኑ።

መለያዎች እንዴት እንደሚሠሩ እና ስለ እሱ ማወቅ አለብዎት

src

እና

href

ባህሪዎች።

ደረጃ 2. አንዳንድ መሠረታዊ የ CSS ንብረቶችን ይወቁ።

በጣም ብዙ ንብረቶች እንዳሉ ታገኛለህ። ሆኖም ፣ ሁሉንም መማር አስፈላጊ አይደለም።

• ማወቅ ያለባቸው አንዳንድ ጥሩ መሠረታዊ የ CSS ባህሪዎች ናቸው

  ቀለም

  እና

  ቅርጸ-ቁምፊ ቤተሰብ

• .

ደረጃ 3. ስለ እያንዳንዱ ንብረት ስለ እሴቶች ይወቁ።

ሁሉም ንብረቶች ዋጋ ያስፈልጋቸዋል። ለ

ቀለም

ንብረት ፣ ለምሳሌ ፣ ሊያስቀምጡት ይችላሉ

ቀይ

እሴት።

ደረጃ 4. ስለ

ቅጥ

የኤችቲኤምኤል ባህሪ።

እንደ ኤለመንት ውስጥ ጥቅም ላይ ውሏል

href

ወይም

src

. እሱን ለመጠቀም ፣ ከእኩል ምልክት በኋላ በጥቅስ ምልክቶች ውስጥ ፣ የሲኤስኤስ አይነቱን ፣ ኮሎን ፣ እና ከዚያ የንብረቱን ዋጋ ያስቀምጡ። ይህ የ CSS ደንብ በመባል ይታወቃል።

ደረጃ 5. የመስመር CSS አብዛኛውን ጊዜ ለድር ጣቢያዎች በባለሙያ የድር ገንቢዎች እንደማይጠቀም ይረዱ።

የመስመር ውስጥ CSS በኤችቲኤምኤል ሰነድ ላይ አላስፈላጊ ብክለትን ማከል ይችላል። ሆኖም ፣ ሲኤስኤስ እንዴት እንደሚሰራ ለመተዋወቅ ጥሩ መንገድ ነው።

ክፍል 2 ከ 4: መሰረታዊ ሲኤስኤስ መጻፍ

ደረጃ 1. ሊጠቀሙበት የሚፈልጉትን ፕሮግራም ያስጀምሩ።

ኤችቲኤምኤል እና ሲኤስኤስ ፋይሎችን እንዲፈጥሩ ሊፈቅድልዎት ይገባል።

ልዩ ፕሮግራም ካልተጫነ ማስታወሻ ደብተርን ወይም ሌላ የጽሑፍ አርታዒን መጠቀም ይችላሉ። በቀላሉ ፋይልዎን እንደ የጽሑፍ ፋይል እና እንደ CSS ፋይል ያስቀምጡ።

ደረጃ 2. ለድር ጣቢያዎ የኤችቲኤምኤል ፋይልን ይክፈቱ።

አንድ ከተጫነ ይህንን በኤችቲኤምኤል አርታኢም መክፈት አለብዎት።

የኤችቲኤምኤል አርታኢዎች ኤችቲኤምኤል እና ሲኤስኤስን በተመሳሳይ ጊዜ እንዲያርትዑ ያስችሉዎታል።

ደረጃ 3. በኤችቲኤምኤል ራስዎ ውስጥ መለያ ይፍጠሩ።

ይህ የተለየ ፋይል ሳያስፈልግዎት CSS እንዲጽፉ ያስችልዎታል።

ደረጃ 4. ቅጥ ለማከል የሚፈልጓቸውን ኤለመንት ይምረጡ እና የተጠቀለሉ የቅንብር ቅንብሮችን ({}) የተከተለውን የኤለመንት ስም ይተይቡ።

ኮድዎን የበለጠ ሊነበብ የሚችል ለማድረግ ፣ ሁል ጊዜ ሁለተኛውን የታጠፈ ማሰሪያን በእራሱ መስመር ላይ ያድርጉት።

ደረጃ 5. በመያዣዎቹ መካከል ፣ የ CSS ህጎችን እርስዎ እንደሚጠቀሙበት ይተይቡ

ቅጥ

አይነታ።

እያንዳንዱ መስመር በሰሚኮሎን (;) መጨረስ አለበት። ኮድዎ ሊነበብ የሚችል እንዲሆን እያንዳንዱ ደንብ በራሱ መስመር መጀመር አለበት እና እያንዳንዱ መስመር ወደ ውስጥ መግባት አለበት።

ይህ ዘይቤ በገጹ ላይ በተመረጠው ዓይነት ሁሉንም አካላት ላይ ተጽዕኖ እንደሚያሳድር ማስተዋል በጣም አስፈላጊ ነው። የበለጠ ልዩ ዘይቤ በሚቀጥለው ክፍል ይሸፈናል።

ክፍል 3 ከ 4 - የበለጠ የላቀ CSS

ደረጃ 1. የኤችቲኤምኤል ፋይል ሳይሆን የሲኤስኤስ ፋይል ይፍጠሩ እና ፋይሉን በመጠቀም ያስቀምጡት

.ሲሲ

ቅጥያ።

የኤችቲኤምኤል ፋይልዎን እንዲሁ ይክፈቱ።

ደረጃ 2. በኤችቲኤምኤል ራስዎ ውስጥ መለያ ይፍጠሩ።

ይህ የተለየ የ CSS ፋይል ከኤችቲኤምኤል ሰነድዎ ጋር ለማገናኘት ያስችልዎታል። የአገናኝ መለያዎ ሦስት ባህሪዎች ያስፈልጉታል

rel

ዓይነት

እና

href

• rel

  “ግንኙነት” ማለት እና ለኤችቲኤምኤል ሰነድ ግንኙነቱ ምን እንደሆነ ለአሳሹ ይነግረዋል። እዚህ ዋጋ ሊኖረው ይገባል

  "የቅጥ ሉህ"

• .

• ዓይነት

  ከየትኛው ሚዲያ ጋር እንደሚገናኝ ይነግረዋል። እዚህ ዋጋ ሊኖረው ይገባል

  "ጽሑፍ/ሲሲ"

• href

• እዚህ በአባል ውስጥ እንዴት ጥቅም ላይ እንደዋለ በተመሳሳይ መልኩ ጥቅም ላይ ውሏል ፣ ግን እዚህ ከሲኤስኤስ ፋይል ጋር መገናኘት አለበት። የ CSS ፋይል ከኤችቲኤምኤል ፋይል ጋር በአንድ አቃፊ ውስጥ የሚገኝ ከሆነ ፣ በጥቅስ ምልክቶች ውስጥ የፋይሉ ስም ብቻ መፃፍ አለበት።

ደረጃ 3. ተመሳሳዩን ዘይቤ ለማከል የሚፈልጓቸውን የተለያዩ ዓይነቶች አባሎችን ይምረጡ።

አክል

ክፍል

ለእነዚህ ንጥረ ነገሮች ያያይዙ እና ከመረጡት የመደብ ስም ጋር እኩል ያዋቅሯቸው። ይህ የእርስዎ አካላት ተመሳሳይ ዘይቤን ይሰጣቸዋል።

ደረጃ 4. አንድ ክፍል ምን ዓይነት ቅጥ እንደሚቀበል ይመድቡ።

በ CSS ፋይልዎ ውስጥ የክፍል ስሙን ይተይቡ (ከ) በፊት (ማለትም)

.ክፍል

).

ደረጃ 5. ልዩ ዘይቤን ሊያክሉበት እና አንድ ማከል የሚፈልጉትን ነጠላ ንጥረ ነገሮችን ይምረጡ

መታወቂያ

አይነታ።

መታወቂያዎች ከአንድ ክፍለ ጊዜ ይልቅ የፓውንድ ምልክት (#) በመጠቀም በሲኤስኤስ ውስጥ ይፈጠራሉ።

መታወቂያዎች ከክፍሎች የበለጠ የተለዩ ናቸው ፣ ስለዚህ አንድ መታወቂያ ከክፍሉ የተለየ እሴት ያለው ባህሪ ካለው ማንኛውንም የመደብ ዘይቤን ይሽራል።

ክፍል 4 ከ 4 - የበለጠ መማር

ደረጃ 1. የ w3 ትምህርት ቤቶችን ይጎብኙ።

የድር ልማት ክህሎቶችን ለማስተማር የታለመ ኦፊሴላዊ ድር ጣቢያ ነው። W3 ለኤችቲኤምኤል እና ለሲኤስኤስ ፣ እንዲሁም ለሌሎች የድር ቋንቋዎች ብዙ ማጣቀሻዎች አሉት።

ደረጃ 2. HTML እና CSS ን ለመማር እና ለማስተማር የታለሙ ሌሎች ጣቢያዎችን ይፈልጉ።

እንደ CSS tricks.com ያሉ ጣቢያዎች በተለይ CSS ን እና የድር ዲዛይን ክህሎቶችን ለማስተማር ያለሙ ናቸው። ታዋቂ ምንጮችን ማግኘት በትምህርት ጉዞዎ ላይ ይረዱዎታል።

ደረጃ 3. ከድር ዲዛይነሮች እና ገንቢዎች ጋር ይገናኙ።

የእነሱ ተሞክሮ እና ዕውቀት ጠቃሚ እውቀት እና ክህሎቶችን ሊያስተምሩዎት ይችላሉ።

ደረጃ 4. የሚያገ comeቸውን የድር ጣቢያዎች ምንጭ ኮድ ይመልከቱ።

በደንብ ያደጉ ድር ጣቢያዎችን CSS ማየት የድር ጣቢያዎችን ክፍሎች ዲዛይን ለማድረግ መንገዶችን ሊያሳይዎት ይችላል። እንደ ልምምድ መገልበጥ እና ከኮዱ ጋር መጣጣም የተለያዩ የ CSS ባህሪያትን እንዴት እንደሚጠቀሙ ለመማር ይረዳዎታል።