አግድም እና ቀጥ ያሉ መስመሮች ከኤችቲኤምኤል እና ከሲኤስኤስ ጋር። በኤችቲኤምኤል እና በሲኤስኤስ መስመር እንዴት እንደሚሳል ሶስት ቋሚ መስመሮች

ሰላም ለሁሉም አንባቢዎች። ከጊዜ ወደ ጊዜ ጌቶች ኤችቲኤምኤልን በመጠቀም ወይም CSS ን በመጠቀም አግድም ወይም ቀጥ ያለ መስመር እንዴት እንደሚሠሩ ችግር ያጋጥማቸዋል። ለዛሬ የምነግርህ ይህንኑ ነው።

በሲኤስኤስ ውስጥ ያሉ መስመሮች

መስመሮችን ለመሥራት በርካታ መንገዶች አሉ. አንደኛው መንገድ CSS መጠቀም ነው። በይበልጥ በትክክል፣ በድንበር እርዳታ። አንድ ምሳሌ እንመልከት።

ውጤቱም እዚህ አለ።

አግድም እና ቀጥታ መስመር ከ css ጋር።

የድንበር ኦፕሬተርን በመጠቀም በሲኤስኤስ ውስጥ መስመሮችን መሳል ይቻላል. አንድ ቋሚ የድንበር ስፋት ያለው አራት ማዕዘን ብቻ ከፈለጉ ይህን ኦፕሬተር በቀላሉ መጠቀም እና ዋጋ መስጠት ይችላሉ. ለምሳሌ ድንበር፡5 ፒክስል ጠንካራ #000000; የሳጥኑ ድንበሮች በጥቁር 5 ፒክሰሎች ስፋት አላቸው ማለት ነው.

ሆኖም ግን, ሁሉንም ድንበሮች ብቻ ሳይሆን የተወሰኑትን ብቻ ማዘጋጀት ካስፈለገዎት, የትኞቹ ወሰኖች እንደሚያስፈልጉ በትክክል መግለጽ ያስፈልግዎታል, እና እያንዳንዳቸው ምን ዋጋ ይኖራቸዋል. እነዚህ ኦፕሬተሮች ናቸው፡-

  • ድንበር-ከላይ - የላይኛውን ድንበር ዋጋ ያዘጋጃል
  • ድንበር-ታች - የታችኛውን ድንበር ዋጋ ያዘጋጃል
  • ድንበር-ግራ - የግራውን ድንበር ዋጋ ያዘጋጃል
  • ድንበር-ቀኝ - የቀኝ ድንበር እሴት ያዘጋጃል.

በኤችቲኤምኤል ውስጥ አቀባዊ እና አግድም መስመር

እንዲሁም በኤችቲኤምኤል ራሱ ውስጥ መስመሮችን መፍጠር ይችላሉ. ይህንን ለማድረግ የ hr tag መጠቀም ይችላሉ.

በዚህ ሁኔታ, አንድ አግድም መስመር ይዘጋጃል, አንድ ፒክሰል ከፍ ያለ እና ሙሉ ስፋት.

ግን ይህ መለያ, አንዳንድ እሴቶችን ማዘጋጀት ይችላሉ.

  • ስፋት- የመስመሩን ስፋት ዋጋ ያዘጋጃል.
  • ቀለም- የመስመሩን ቀለም ያዘጋጃል.
  • አሰልፍ- ግራ ፣ መሃል ፣ ቀኝ አሰላለፍ ያዘጋጃል።
  • መጠን- የመስመሩን ውፍረት ዋጋ በፒክሰሎች ያዘጋጃል።

የ hr መለያን በመጠቀም፣ እንዲሁም ቀጥ ያለ መስመር ማዘጋጀት ይችላሉ። ግን በዚህ ሁኔታ ፣ እንደገና ወደ ቅጦች መሄድ አለብዎት።

በዚህ ሁኔታ, አንድ ቋሚ መስመር አንድ መቶ ፒክሰሎች ቁመት, አንድ ፒክሰል ውፍረት እና አምስት ፒክሰሎች ገብቷል.

መደምደሚያ.

ደህና, አሁን እንዴት አቀባዊ እና አግድም መስመር ማዘጋጀት እንደሚችሉ ያውቃሉ. መስመሮች ኤችቲኤምኤልን በመጠቀም ሁለቱንም በመደበኛ ድረ-ገጾች ማዘጋጀት እና እንደ ዎርድፕረስ ያሉ ሲኤምኤስ በሚጠቀሙ ድረ-ገጾች ላይ ሊዘጋጁ ይችላሉ ነገርግን በዚህ አጋጣሚ ወደ HTML ሁነታ መቀየር ያስፈልግዎታል።

ደህና ፣ ተጨማሪ ጥያቄዎች ካሉዎት በአስተያየቶቹ ውስጥ ይጠይቋቸው።

ሰላም፣ የሥልጠና ጣቢያዬ ታማኝ ተመዝጋቢዎች፣ እንዲሁም የብሎግ እንግዶች። በኤችቲኤምኤል ውስጥ ያለው ቀጥ ያለ መስመር አንዳንድ መረጃዎችን የሚለይበት በድረ-ገጽ የመረጃ ምንጮች ላይ አስተውለሃል? ስለዚህ ይህ በጣም ቀላል ነገር ግን የአንባቢውን ትኩረት ወደ ትክክለኛው የይዘት ክፍል ለመሳብ ውጤታማ መንገድ ነው።

ስለዚህ, ይህንን እትም ቀጥ ያሉ መስመሮችን ለማዘጋጀት መሳሪያዎችን እና መለያዎችን ለማጥናት እና እንዲሁም ይህንን ዘዴ የት መጠቀም እንደሚችሉ ለመንገር መወሰን እፈልጋለሁ. እና አሁን እንጀምር!

አቀባዊ የጽሑፍ መለያየት ለምን ጥቅም ላይ ይውላል?

ገንቢዎች እና የድር ዲዛይነሮች ምቹ እና ሊታወቅ የሚችል የተጠቃሚ በይነገጽ ያለው ልዩ ጣቢያ ለመፍጠር እየሞከሩ ነው። ይህ ሁሉ የሚከናወነው የተለያዩ መሳሪያዎችን እና አቀራረቦችን እና የ css ስታይል ሉሆችን በመጠቀም ነው።

ብዙውን ጊዜ, ዘዬዎች በገጾቹ የጽሑፍ ይዘት ውስጥ ይቀመጣሉ. ለዚህ ጥቅም ላይ ይውላሉ:

  • ልዩ መለያዎች እንደ < ጠንካራ>, < እኔ >, < ትልቅ >እና ሌሎች;
  • ጽሑፉን ወደ አንቀጾች መከፋፈል እና የተለያዩ ደረጃዎችን ርዕሶችን ማስገባት;
  • የተለያዩ ነገሮችን በመጠቀም ዕቃዎችን መምረጥ;
  • የቅርጸ ቁምፊዎችን ዘይቤ መለወጥ;
  • ፍሬሞችን ወደ ይዘቱ ማስተዋወቅ, ወዘተ.

የመጨረሻውን ነጥብ እንይ።

ማዕቀፍ- ይህ የተወሰኑ ነገሮችን ከጅምላ ለመለየት ፣የድርን ይዘት ለማጉላት እና በቀላሉ ለማስጌጥ የተለመደ ዘዴ ነው። ንብረቱን በመጠቀም የተፈጠሩ ናቸው ድንበር.

ይህ የ css ቋንቋ አካል በጣም ተለዋዋጭ ነው እና በሁለቱም በኩል ፍሬም ማቀናበር ይችላል፣ እና ከተመረጠው ነገር አንድ ጎን ብቻ። በሠንጠረዡ ውስጥ ያሉትን አስፈላጊ ንብረቶች አስገባሁ.

ከላይ ያሉት ሁሉም ንብረቶች የመስመሩን ውፍረት, ቀለም እና የአቀራረብ ዘይቤን መቆጣጠር ይችላሉ.

ድንበሮቹ እንደ ቀጥታ መስመሮች ብቻ ሳይሆን ሊመስሉ እንደሚችሉ ልብ ማለት እፈልጋለሁ. እንዲሁም ሊታዩ ይችላሉ፡-

  • ነጥብ(ነጥብ ያለው)
  • ነጠብጣብ(የተሰረዘ)
  • መስመራዊ(ጠንካራ)
  • ድርብ(ድርብ)
  • የድምጽ መጠን(ግሩቭ, ማስገቢያ, ሸንተረር እና መጀመሪያ) ፍሬም
  • ወይም የርስትን ቁልፍ ቃል በመጠቀም የቀድሞ አባቶችን የቅጥ ቅንብሮች ይድገሙት።

አንዳንድ ጊዜ እንደ "ድንበር እንደ ምስል ሊወከል ይችላል እና እንዴት ማድረግ እንደሚቻል?" የመሳሰሉ ጥያቄዎችን አገኛለሁ. መልሱ ትችላለህ ነው። እና ይሄ በጣም ቀላል ነው.

ይህንን ለማድረግ የ css ፈጣሪዎች አንድ አካል አቅርበዋል የድንበር-ምስል, በዚህ ውስጥ ወደ ምስሉ የሚወስደውን መንገድ መግለጽ እና የድንበሩን እያንዳንዱን ውፍረት መግለጽ ያስፈልግዎታል.

ተግባራዊ ክፍል

ንድፈ ሃሳቡን ወደ ተግባር ለማስገባት ጊዜው አሁን ይመስለኛል። የእርስዎ ተግባር የጽሑፍ ሸራ መጻፍ እና ቁልፍ ነጥቦችን ወይም ጥቅሶችን በቋሚ መስመሮች መለየት ነው። የምሳሌው ኮድ ከዚህ በታች ይታያል።

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 አቀባዊ መስመር

ይህ ጽሑፍ በጣም አስፈላጊ ነው.



አቀባዊ መስመር

የመጀመሪያ አንቀጽ. ድንበር-ግራ በመጠቀም

በመጀመሪያው አንቀጽ የጽሁፉን ቁልፍ ነጥብ በግራ ድርብ ወይንጠጅ መስመር አጉልተናል።

ይህ ጽሑፍ በጣም አስፈላጊ ነው.

ሁለተኛ አንቀጽ. የድንበር-ምስልን በመጠቀም

በሁለተኛው አንቀጽ የጽሑፉን ቁልፍ ነጥብ በምስል መልክ በግራ በኩል ባለው ቀጥ ያለ መስመር እናሳያለን።

ይህ ጽሑፍ በጣም አስፈላጊ ነው.



ለራስዎ እንደሚመለከቱት, ቁሱ በጣም ቀላል ነው, ነገር ግን ብዙ አይነት ስራዎችን ለመፍታት ጠቃሚ ሊሆን ይችላል. በዚህ ላይ ልሰናበትህ። ሰብስክራይብ ማድረጉን አይርሱ እና ጓደኞችዎን ወደ ወዳጃዊ ቡድናችን ይጋብዙ። ባይ ባይ!

ከሰላምታ ጋር, ሮማን Chueshov

ምስሎች ቀጥተኛ ለውጥን (18) በቀላል አካላዊ ሁኔታዎች ውስጥ በመተግበር ሊገኙ የሚችሉ በርካታ አስደሳች ባህሪያት አሏቸው። ለአሁኑ ዓላማችን, አጠቃላይ አጠቃላይ ቀመር አያስፈልገንም (18); ልናሳየው የምንፈልገው ውጤት የካሜራውን አቀማመጥ የሚያሳዩት ሁሉም መመዘኛዎች ከዜሮ ጋር እኩል ሲሆኑ እንኳን ሊገለጽ ይችላል, ከአንድ ዘንበል ያለ አንግል በስተቀር . በዚህ መሠረት አገላለጽ (18) ወደ ቀለል ያለ መልክ እንወስዳለን እና እንለውጣለን

የቋሚ መስመር ምስል ባህሪያትን እንመረምራለን. የእቃው አቀባዊ መስመር በእቃው ነጥብ ይሳላል

መስመሩ የወለል ንጣፉን የሚያቋርጥበት ነጥብ መጋጠሚያዎች የት አሉ, እና z ነፃ መለኪያ ነው, ዋጋው በሁሉም እውነተኛ ቁጥሮች መካከል ይወሰዳል. v ወደ ቀመር (27) ከተተካ እና ነፃ መለኪያ zን ከሁለቱ እኩልታዎች ካስወገድን በምስሉ አውሮፕላን ላይ የቀጥታ መስመር እኩልታ እናገኛለን።

የዚህ ቀላል እኩልታ ትንተና ብዙ አስደሳች ምልከታዎችን ይሰጣል። በጣም በአስፈላጊ ሁኔታ, ዜድ-ዘንግ ጋር መገናኛ ነጥብ በራሱ ቋሚ መስመር ያለውን አቋም ገለልተኛ ነው; መስመሩ በትክክል ቀጥ ያለ መሆኑን ብቻ ነው የሚወሰነው። ስለዚህ, ለተወሰነ የካሜራ ጂኦሜትሪ, የሁሉም ቋሚ መስመሮች ምስሎች በምስሉ ላይ ያሉት መጋጠሚያዎች እኩል በሆነው የሾፌው አንድ ነጥብ በኩል ያልፋሉ.

ሩዝ. 10.4. የሚጠፉ ነጥቦች።

ሩዝ. ምስል 10.4 ይህንን ተጽእኖ የሚያሳየው አንድ ኩቦይድ በካሜራ በጣም ወደ ታች ዘንበል ብሎ የተወሰደ ምስል ነው።አንባቢው ከግንዛቤ ጋር የሚስማሙትን የኢክ(28) ሌሎች ባህሪያትን ማረጋገጥ ይችላል። ለምሳሌ፣ ከዜሮ ወደ 90° ከጨመረ፣ ቀጥ ያለ የመጥፋት ነጥብ ወደ ምስሉ አውሮፕላን መሃል ይንቀሳቀሳል እና የመስመሩ ቁልቁል ጠፍጣፋ ይሆናል። በተመሳሳይ፣ ለማንኛውም የካሜራ አንግል፣ የርዕሰ ጉዳዩ ቀጥ ያሉ መስመሮች ወደ የእይታ መስክ ዳር ሲሄዱ ይህ ተፅዕኖ ይበልጥ የሚታይ ይሆናል (ማለትም፣ መቼ

ጋር ሲነጻጸር ትልቅ ይሆናል). ስለዚህ, ቀጥ ያለ የመጥፋት ነጥብ ከካሜራ መለኪያዎች ብቻ ሊወሰን ይችላል, እና በቋሚ መስመሮች ምስሎች ላይ ቀላል አስፈላጊ ሁኔታን ያስገድዳል.

10.5.4. አግድም መስመሮች እና ቫኒሽንግ ነጥቦች

የአመለካከት ትራንስፎርሜሽን አጠቃቀምን እንደ የመጨረሻ ምሳሌ፣ የአግድም መስመርን ምስል አንዳንድ ባህሪያትን እንመርምር። ለቀላልነት በአለምአቀፍ መጋጠሚያ ስርዓት ወለል አውሮፕላን ላይ የተኛን የነገር መስመር ምስል እንመለከታለን። በእንደዚህ አይነት መስመር ላይ የሚተኛ ማንኛውም ነጥብ የት እና ለ - በቅደም ተከተል የመስመሩ ቁልቁል እና የክፍሉ ርዝመት በዚህ መስመር በ Y አስተባባሪ ዘንግ ላይ ተቆርጧል. ወለሉ ላይ, ካሜራው ከወለሉ በላይ ከፍ ብሎ ቢነሳ ይሻላል እና ወደ ታች እየጠቆመ ሊሆን ይችላል. በዚህ መሠረት የካሜራውን የጂኦሜትሪክ መመዘኛዎች በቅጹ ውስጥ እንወስዳለን እና እሴቱ አዎንታዊ እና - አሉታዊ. ለእነዚህ መለኪያዎች፣ ቀጥተኛ ለውጥ (18) በሚከተለው መልኩ ይቀላል።

ወደ ቀመሮች (29) ከተተካ እና ነፃ መለኪያ xን ከሁለት እኩልታዎች ሳያካትት በምስሉ አውሮፕላን ላይ የቀጥታ መስመር እኩልታ እናገኛለን

የዚህ ግራፊክ መስመር ተዳፋት ወይም የመገናኛው ነጥቦች ከመጋጠሚያ መጥረቢያዎች ጋር ምንም ልዩ ቀላል ባህሪዎች የሉም። ነገር ግን የዚህን ምስል መስመር መጋጠሚያ ከዚህ ምስል የአድማስ መስመር ጋር አስቡበት። የማንኛውም ምስል አድማስ መስመር ከወለሉ ጋር ትይዩ ባለው የሌንስ መሃል በኩል ከአውሮፕላን ጋር የምስሉ አውሮፕላን መገናኛ ተብሎ ይገለጻል። የበለስ ጎን እይታ ላይ እንደሚታየው. 10.5, የአድማስ መስመር እኩልነት (በምስል መጋጠሚያዎች) መልክ አለው በግልጽ የምስሉ መስመር (30) የመገናኛ ነጥብ X መጋጠሚያ ከአድማስ መስመር ጋር በማመሳሰል መግለጫ (30) ከዋጋ ጋር - . የተገኘውን እኩልታ መፍታት

ከአድማስ ጋር የመገናኛ ነጥብ ቅንጅትን በተመለከተ, ያንን እናገኛለን

ይህ ውጤት የሚገኘውም አገላለጽ (29)ን ወደ መጀመሪያው እኩልታ በመተካት እና x ወደ ማለቂያ የሌለው በመሆኑ ወደ ገደቡ በማለፍ ነው። ስለዚህ, ከአድማስ ጋር ያለውን መገናኛ ነጥብ በጣም የሚገባ ነው, አግድም መጥፋት ነጥብ ወይም የተሰጠው መስመር ምስል አድማስ ጋር መጥፋት ነጥብ; የዕቃው ነጥብ በቀጥተኛ መስመር ወደ ማለቂያ ሲሸጋገር የምስሉ ነጥብ የሚንከባከበው ገደብ ይህ ነው።

ሩዝ. 10.5. ወደ አድማስ መስመር ስሌት.

ስለ አገላለጽ (31) በርካታ አስደሳች አስተያየቶችን መስጠት እንችላለን. በመጀመሪያ, የሚጠፋው ነጥብ የነገሩን መስመር በያዘው አውሮፕላኑ ላይ ባለው የካሜራ ቁመት ላይ የተመካ አለመሆኑን ልብ ይበሉ. በሁለተኛ ደረጃ, የሚጠፋው ነጥብ በማስተላለፊያ መለኪያ ለ ላይ የተመካ አይደለም ነገር መስመር እኩልታ. ስለዚህ, ከወለሉ አውሮፕላን ጋር ትይዩ የሆኑ ሁለት መስመሮች እርስ በእርሳቸው ተመሳሳይ ከሆኑ እና ተመሳሳይ ከሆኑ ብቻ ተመሳሳይ የመጥፋት ነጥብ አላቸው የሚለውን አስፈላጊ መደምደሚያ ልንሰጥ እንችላለን. በመጨረሻ፣ ከወለሉ ጋር ትይዩ በሆነ አውሮፕላን ላይ ሁለት ኦርቶዶክሳዊ የነገር መስመሮች አሉን እንበል። ቁልቁለታቸው ይሁን ከአድማስ ጋር የሚጠፉ ነጥቦቻቸው መጋጠሚያዎች ይኑሩ; እና እነዚህ መስመሮች orthogonal ስለሆኑ,. ስለዚህ, በቀጥታ ከቀመር (31) እናገኛለን

ሁለቱ የሚጠፉ ነጥቦች አንዳንድ ጊዜ conjugate ቫኒሽንግ ነጥቦች ተብለው ይጠራሉ ምርታቸው አሉታዊ ስለሆነ ሁልጊዜ በምስሉ መሃል ባለው መስመር በተቃራኒ ጎኖች ይተኛሉ፣ በስእል ላይ እንደሚታየው። 10.4. የተዋሃዱ መጥፋት ነጥቦች አንድ የተሰጠ የነገር ገደብ (ማለትም ኦርቶዶክሳዊነት) ወደ ቀላል የምስል ገደብ እንዴት እንደሚቀየር የሚያሳይ ምሳሌ ናቸው።

አግድም መስመሮችባልተጣመረ (የመዘጋት መለያ አያስፈልግም) መለያ ተፈጥረዋል።


እና በጣም ልዩ የንድፍ አካላት ሊሆኑ ይችላሉ. አግድም የኤችቲኤምኤል መስመሮች ያለው የጽሑፍ አቀማመጥ ለገጹ የተወሰነ የጽሑፍ አቀራረብ አመክንዮ ይሰጠዋል ፣ እንዲሁም አንባቢው በቅደም ተከተል ማጥናት የሚያስፈልጋቸውን የመረጃ ብሎኮች ለማጉላት ቀላል ያደርገዋል። መለያ
የተለያየ ቀለም, ውፍረት እና ርዝመት ያላቸው አግድም መስመሮችን መፍጠር ይችላል. እና ከዚህ በታች ባሉት ምሳሌዎች እንደሚታየው ይህንን ለማድረግ በጣም ቀላል ነው።

በነገራችን ላይ የአግድ ዘይቤ ባህሪያትን መጠቀም ይችላሉ

እና
መስመሮችን ለመመስረት
በተወሰነ ቦታ ላይ. እውነት ነው, ይህ አማራጭ ሁልጊዜ ምቹ ላይሆን ይችላል, ለምሳሌ, ማቅለም አንዳንድ ጊዜ ሁልጊዜ እራሱን አያጸድቅም, ግን በብዙ አጋጣሚዎች በዚህ መንገድ ችግሮችን መፍታት ይቻላል. ለምሳሌ, በተፈጠረው መስመር ውስጥ መለያ
ጽሑፍ አታስገባ. እና በብሎኮች ውስጥ - ይህ የሚቻል እና ያለማቋረጥ ይለማመዳል። ስለዚህ በዲዛይን መስፈርቶች ላይ በመመስረት ምርጫዎን መምረጥ ያስፈልግዎታል.

ቀጥ ያሉ መስመሮች በኤችቲኤምኤል ውስጥ።

ቀጥ ያሉ መስመሮችበተመሳሳዩ ብሎኮች ውስጥ በእውነቱ ተፈጥረዋል

እና
.
ብቸኛው ችግር መለያው በሁሉም አሳሾች ውስጥ አለመገኘቱ ነው።
ተመሳሳይ ነው የሚሰራው, ግን እዚህ መሞከር ያስፈልግዎታል
እና ገጹን አስተካክል ወይም የተዘመኑ አሳሾችን ተጠቀም።

አግድም መስመሮች መፈጠር;

መለያ
በገጹ ላይ አግድም መስመር ያስገባ እና የሚከተሉት ባህሪያት አሉት።

መለያ አገባብ
:

በኤችቲኤምኤል ውስጥ የአግድም መስመሮች ምሳሌዎች

በኤችቲኤምኤል ውስጥ ያሉ የአቀባዊ መስመሮች ምሳሌዎች


በግራ በኩል የቀይ ቀጥ ያለ መስመር ምሳሌ እዚህ አለ።

በቀኝ በኩል የቀይ ቀጥ ያለ መስመር ምሳሌ እዚህ አለ።

ከላይ የቀይ አግድም መስመር ምሳሌ እዚህ አለ።

ከታች የቀይ አግድም መስመር ምሳሌ እዚህ አለ.

የአግድም እና የቋሚ መስመሮች ምሳሌ እዚህ አለ.

በኤችቲኤምኤል ውስጥ የቋሚ እና አግድም መስመሮች ምሳሌዎች አገባብ፡-

የቅጥ ባህሪውን ያስተውሉ
ድንበር - ግራ(-ቀኝ): 4 ፒክስል ጠንካራ # FF0000;:

ክበብ በመለያ የመነጨ


በግራ በኩል የቀይ ቀጥ ያለ መስመር ምሳሌ እዚህ አለ።

በቀኝ በኩል የቀይ ቀጥ ያለ መስመር ምሳሌ እዚህ አለ።

ከታች የቀይ አግድም መስመር ምሳሌ እዚህ አለ.

የአግድም እና የቋሚ መስመሮች ምሳሌ እዚህ አለ.

እና እነዚህን ምሳሌዎች ከተመለከትን ፣ ቀጥ ያለ መስመሮች በተሻለ ሁኔታ የተፈጠሩት በመጠቀም ነው ፣ እና መካከለኛ መስመር አማራጮችን በቀላል መደምደሚያ ማድረግ እንችላለን ። መለያ


ግን ሁሉም በምናብ እና በጥያቄዎች ላይ የተመሰረተ ነው. ስለዚህ ይምረጡ እና ይቅረጹ.

ሰላም ሁላችሁም! ዛሬ ኤችቲኤምኤልን በመጠቀም አግድም መስመር እንዴት እንደሚሰራ እነግርዎታለሁ.

እንደ እውነቱ ከሆነ, አግድም መስመርን የመስራት አስፈላጊነት ብዙ ጊዜ ይነሳል, ለምሳሌ, የጽሑፉን አንድ ክፍል ከሌላው መለየት ሲያስፈልግ.

አግድም እና ቀጥታ መስመሮች ከ css ጋር

ይህንን በ css ማድረግ ይችላሉ። ይህንን ለማድረግ የዲቪ መለያን በመጠቀም አስፈላጊውን የጽሑፍ ክፍል በብሎኬት ውስጥ እጨምራለሁ ፣ ከዚያም በ style.css ፋይል ወይም በቀጥታ በኤችቲኤምኤል ኮድ ውስጥ ፣ ድንበር-ከላይን በመጠቀም ለዚህ ብሎክ የላይኛው ወይም የታችኛው ድንበር ንብረቶችን እንጽፋለን ። እና ድንበር-ታች. አንድ ምሳሌ ይኸውና፡-

አቀባዊ html መስመር

አግድም መስመር ከ css ጋር።


በዚህ አጋጣሚ፣ ከኤችቲኤምኤል ኮድ በቀጥታ በ css ቀረጽኩት፣ እና የላይኛውን ድንበር ጠንካራ መስመር እና የታችኛውን ድንበር ባለ ነጥብ መስመር አደረግኩት።

በገጹ ላይ እንዴት እንደሚታይ እነሆ፡-

አግድም መስመር ከ css ጋር።

ይህ ዘዴ የራሱ ጥቅሞች አሉት-

  • ማንኛውንም አይነት መስመር እንዲያዘጋጁ የሚያስችልዎ ሰፊ የቅንብሮች ስብስብ;
  • ሁለቱንም አግድም እና ቀጥታ መስመሮችን መፍጠር ይችላሉ. አቀባዊ መስመሮችን ለመሥራት የድንበር-ከላይ ወደ ወሰን-ግራ እና ወሰን-ታች ወደ ድንበር-ቀኝ መቀየር አለብዎት.

ጉዳቶቹ የኮዱ አንጻራዊ ግዙፍነት ያካትታሉ።

ነገር ግን፣ እንደ ተለወጠ፣ ኤችቲኤምኤልን በመጠቀም አግድም መስመር ወደ ጽሑፉ ማስገባት ይችላሉ። በተመሳሳይ ጊዜ, ወደ css መውጣት እንኳን አስፈላጊ አይደለም. መለያው ለዚህ ጥቅም ላይ ይውላል.


.

አግድም መስመር ከኤችቲኤምኤል መለያ ጋር

የዚህ መለያ የመጀመሪያ ባህሪ የተጣመረ የመጨረሻ መለያ የሌለው መሆኑ ነው። በመለያዎች መካከል በኤችቲኤምኤል ኮድ ውስጥ በማንኛውም ቦታ መጠቀም ይቻላል እና

.

ይህ መለያ የሚከተሉትን ባህሪዎች አሉት

  • ስፋት- የእኛን አግድም መስመር ርዝመት በፒክሰሎች ወይም በመቶኛ ይገልጻል;
  • ቀለም- የመስመሩን ቀለም ይገልፃል;
  • አሰልፍ- የመስመሩን አሰላለፍ ወደ ቀኝ ጠርዝ ያዘጋጃል - ወደ ቀኝ, ወደ ግራ ጠርዝ - ግራ, ወደ መሃል - መሃል;
  • መጠን- የመስመር ውፍረት በፒክሰል.

የኤችቲኤምኤል ኮድ ምሳሌ እዚህ አለ


እና እንደዚህ ይሆናል-

እንደሚመለከቱት, ይህ ዘዴ የራሱ ድክመቶች አሉት.

  • ለመስመሩ ያነሱ ቅንብሮች;
  • ቀጥ ያለ መስመር መስራት አይችሉም።

ግን ይህ መንገድ በጣም ቀላል ነው.

አሁን በጣቢያዎ ላይ ቀጥ ያሉ እና አግድም መስመሮችን በትክክል እንዴት እንደሚሠሩ ያውቃሉ. በአስተያየቶቹ ውስጥ ጥያቄዎችዎን መጠየቅ ይችላሉ. እና ለደንበኝነት መመዝገብን አይርሱ