CSS ኮርስ

የCSS መሰረታዊ ነገሮችን ይወቁ እና የድር ውበት መሰረት ይገንቡ።

Down Arrow

ስላይድ 1፡ ለCSS መግቢያ

    እንኳን ደህና መጡ

ስላይድ 2፡ በዚህ ትምህርት የተሸፈኑት

  • አጠቃላይ እይታ
  • CSS ምንድን ነው?
  • CSS ለምን ይጠቀማሉ?
  • ድር ጣቢያዎን ለማስዋብ CSS
  • አወቃቀር(Structure)
  • የCSS አገባብ መግቢያ
  • CSS ሊገለጽባቸው የሚችሉ ሶስት ቦታዎች
  • የCSS አገባብ ዝርዝሮች
  • የተደራረበ ውርስ(Cascading Inheritance)
  • ተግባራዊ
  • የCSS ልምምድ

ስላይድ 3፡ CSS ምንድን ነው?

  • የተደራረበ የቅጥ ሉህ (Cascading Style Sheet)
  • የቅጥ ሉህ ቋንቋ (Stylesheet Language)
  • ቅጦችን ለመግለጽ ደረጃውን የጠበቀ የባህሪያት እና ባህሪያት ስብስብ
  • እንደ HTML ወይም XML ባሉ ምልክት ማድረጊያ ቋንቋ(Mark up language) የተጻፈ ሰነድ አቀራረብን(presentation) ለመግለጽ
  • ምልክት ማድረጊያ ኮድ (Markup encoding): <p>የእኔ አንቀጽ እዚህ አለ።</p>
  • በ <p> ምልክቶች ውስጥ ያሉ ነገሮች እንዴት እንደሚታዩ ቅጡን ይገልጻል (ቅርጸ-ቁምፊ(font)፣ ቀለም፣ መጠን፣ ህዳጎች(margin)፣ ወዘተ)።
  • (Cascading rule)ሌላ ምልክት ማድረጊያ የያዘ ምልክት ማድረጊያን እንዴት ተግባራዊ ማድረግ እንደሚቻል የሚወስኑ የተደራረቡ ህጎች።

ላይድ 4፡ CSS ለምን?

  • ይዘትን ከቅርጽ መለየት
  • ይዘት የተወሰኑ ዓይነቶችን ክልሎች ለመግለጽ ምልክት የተደረገባቸው ጽሑፎች እና ምስሎች ናቸው
  • ቅርጽ ለይዘቱ "ቅጡን" ይገልጻል
  • የውስጠ-መስመር ቅጦችን(inline styles) የመጠቀም የድሮ መንገድ፡
  • <font size="14px">የመጀመሪያ ርዕስ</font>
  • <font size="12px" color="red" face="Verdana">መረጃዬ 1 እዚህ ነው።.</font>

ስላይድ 5፡ CSS ለምን? ቀጥሏል

  • ይዘትን ከቅርጽ መለየት
  • የCSS ክፍሎችን በመጠቀም አዲስ መንገድ፡
  • <p class="header">የመጀመሪያው ርዕሴ</p>
  • <p class="info">መረጃዬ 1 እዚህ ይገባል</p>
  • የCSS ምሳሌ፡:
  • .header { font-size:14px; }
  • .info { font-family: verdana; font-color: blue; font-size: 12px; }

ስላይድ 6፡ ይህ መለያየት ምን ይሰጠናል?

  • ለዚያ ክፍል(class) ለእያንዳንዱ ምሳሌ ቅጡን(style) አንድ ጊዜ ይግለጹ
  • ምሳሌ፡ "ርዕስ" ብለው ለለዩት በኤችቲኤምኤል(HTML) ገጽ ላይ ላለው ጽሑፍ ሁሉ ቅርጸ ቁምፊውን አንድ ጊዜ ይግለጹ
  • የቅጥ ሉህ(stylesheet) መላው ጣቢያዎ ላይ ላሉ ሁሉም የኤችቲኤምኤል(HTML) ገጾች ሊገናኝ የሚችል የተለየ ፋይል ሊሆን ይችላል
  • ለመላው ጣቢያዎ(site) ቅጡን(style) አንድ ጊዜ ብቻ መግለጽ ያስፈልግዎታል<
  • አንድ ፋይል ብቻ በማስተካከል ለመላው ጣቢያዎ ያለውን ቅጥ መቀየር ይችላሉ

ስላይድ 7፡ CSS ማስዋብ<

  • "Skinning" - የአንድን ገጽ ወይም የድር ጣቢያዎን ዲዛይን መቀየር
  • የቅጥ ሉህን(Stylesheet) በመምረጥ መልክን መወሰን
  • ምሳሌ፡
  • <link rel="stylesheet" type="text/css" href="skin1.css" />
  • .info { background-color: White; font-family: Verdana; font-color: Blue; }

ስላይድ 8፡ CSS ማስዋብ 2

  • "ማስዋብ (Skinning)" - የአንድን ገጽ ወይም የጣቢያዎን ገጽታ መቀየር
  • የትኛውን የቅጥ ሉህ(stylesheet) እንደሚጠቀሙ በመምረጥ መልክን(appearance) መምረጥ
  • ምሳሌ፡
  • <link rel="stylesheet" type="text/css" href="skin2.css" />
  • .info { background-color: Blue; font-family: Serif; font-color: White; }

ስላይድ 9፡ CSS አገባብ

  • ለCSS መግለጫ 3 አካላት(Elements)፡
  • ምርጫ (Selector) - የትኞቹን የኤችቲኤምኤል(HTML) ክፍሎች ይነካል?
  • ባህሪ (Property) - የዚያ የኤችቲኤምኤል ክፍል የትኛው ባህሪ(attribute) ይነካል?
  • እሴት(Value) - በዚያ ባህሪ(attribute) ላይ ምን ለውጥ ይደረጋል?

ስላይድ 10፡ ሶስት የCSS ፍቺ ቦታዎች

  • ውስጠ-መስመር (Inline): "ቅጥ" ባህሪ (style attribute)
  • ምሳሌ፡ <p style="font-color:red;font-size:10px;">ይዘት</p>
  • ውስጣዊ (Internal): The <style> markup tag
  • ምሳሌ፡ <p>ይዘት</p>
  • ውጫዊ (External): .css የቅጥ ሉህ ፋይል
  • ምሳሌ፡ <link rel="stylesheet" type="text/css" href="mystylesheet.css" />

ስላይድ 11፡ CSS አገባብ፡ መምረጫዎች

  • ብዙ አይነት መምረጫዎች እና እነሱን ለመጥቀስ ብዙ መንገዶች አሉ፡
  • HTML Type Tag - selected with the tag type
  • የኤችቲኤምኤል አይነት መለያ (Class Attribute) - ከክላሱ በፊት ነጥብ አስቀምጡ።
  • ምሳሌ፡
  • p { font-size: 10px; font-color: White; }
  • .myinfo { font-size: 10px; font-color: White; }
  • <p class="myinfo">Content</p>

ስላይድ 11፡ CSS አገባብ፡ መምረጫዎች

  • የተካተቱ አካላት ከወላጆቻቸው ባህሪያትን ይወርሳሉ።
  • ለ <body> መለያ ቅጥ ከገለጹ፣ በኤችቲኤምኤል ገጽዎ ውስጥ ያለውን ይዘት በሙሉ ይነካል።
  • የተወረሱ ቅንብሮችን ለመሻር ከፈለጉ፣ ይበልጥ በአካባቢያዊ አካል ውስጥ ቅጥ መግለጽ ያስፈልግዎታል።
  • ምሳሌ፦
  • body { font-family: Verdana; font-size: 1.1em; }
  • .littletext { font-size: 8px; }

እንኳን ደስ አለዎት!