ቭላድ ሜርሼቪች

ተንሳፋፊ ክፍሎችን በሌሎች የድረ-ገጽ ነገሮች ዙሪያ የሚበሩትን ኤለመንቶችን ለምሳሌ ጽሑፍ እንላቸዋለን። "የተሳለፉ ንጥረ ነገሮች" ማለት የበለጠ ትክክል ይሆናል, በሌላ በኩል ግን "ተንሳፋፊ ንጥረ ነገር" የሚለው ቃል ለረጅም ጊዜ ተቀባይነት አግኝቷል, ስለዚህ ለወደፊቱ እጠቀማለሁ.

ተንሳፋፊ አካላት በድረ-ገጾች አቀማመጥ ላይ በንቃት ጥቅም ላይ ይውላሉ እና እነዚህን እና ሌሎች ተግባሮችን ለመተግበር ያገለግላሉ-

• በስዕሎች ዙሪያ ጽሑፍን መጠቅለል;
• የጎን አሞሌዎችን መፍጠር;
• አግድም ምናሌዎች;
• አምዶች.

መጠቅለል የሚከሰተው የተንሳፋፊውን ዘይቤ በመጠቀም ከግራ ወይም ቀኝ እሴት ጋር ነው። በነባሪነት የንጥል መጠቅለያ አልተዘጋጀም ነገር ግን በሆነ ምክንያት ይህ በግልጽ መገለጽ ካለበት እሴቱ ወደ ምንም መዋቀር የለበትም። በስእል. ምስል 3.32 ከጽሑፍ ቀጥሎ ላለው ምስል የተለያዩ እሴቶችን የመተግበር ውጤት ያሳያል።

ሩዝ. 3.32. ጽሑፍን በሥዕል መጠቅለል

የኤችቲኤምኤል ኮድ እራሱ ምንም ሳይለወጥ ይቆያል እና በምሳሌ 3.21 ይታያል።

ምሳሌ 3፡21. ተንሳፋፊዎችን መጠቀም

Lorem ipsum dolor sit amet፣ consectetuer adipiscing elit፣ ሴድ ዲም ኖኑሚ ኒብ euismod tincidunt ut lacreet dolore magna aliguam erat volutpat። Ut wisis enim ad minim veniam፣ quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat።

ይህ ምሳሌ ተንሳፋፊ ንብረትን እንዴት ወደ መለያ ከተወው እሴት ጋር እንደሚጨምር ያሳያል . ይህ እሴት ኤለመንቱን ከወላጁ ወይም ሌላ ተንሳፋፊ ኤለመንት ግራ ጠርዝ ጋር ያስተካክላል፣ እና ሁሉም እንደ ጽሑፍ ያሉ ሌሎች ንጥረ ነገሮች በቀኝ በኩል ይንሳፈፋሉ። እሴቱ ቀኝ፣ በሌላ በኩል፣ ኤለመንቱን ከወላጁ ወይም ሌላ ተንሳፋፊ ኤለመንት የቀኝ ጠርዝ ጋር ያስተካክላል፣ እና ሁሉም ሌሎች አካላት፣ ለምሳሌ ጽሑፍ፣ በግራ በኩል ያጎርፋሉ።

ስለዚህ፣ የቃላት አጠቃቀሙን አስተካክለናል። ስዕሉ ከጽሑፉ ጋር በተሻለ ሁኔታ እንዲስማማ ለማድረግ ወደ ምሳሌ 3.21 እንጨምር። በጣም አስፈላጊው ነገር ገብን በምስሉ በስተቀኝ እና ልክ እንደ ሁኔታው, ከታች ማዘጋጀት ነው. ይህንን ለማድረግ ወደ መለያው ይሂዱ የበለስ ተብሎ የሚጠራ ክፍል ተጨምሯል ፣ እሱም የኅዳግ ንብረት ስብስብ አለው ፣ በተመሳሳይ ጊዜ በእያንዳንዱ የምስሉ ጎን ላይ ያለውን ህዳግ ይወስናል (ምሳሌ 3.22)።

ምሳሌ 3፡22. በስዕሉ ዙሪያ ይጠቅል

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ዊኒ ዘ ፑህ ሁል ጊዜ ትንሽ ማደስን አልጠላም ነበር፣ በተለይ በጠዋቱ አስራ አንድ ላይ፣ ምክንያቱም በዚያን ጊዜ ቁርስ ብዙ አልቋል እና ምሳ ገና አልተጀመረም።

እና፣ በእርግጥ፣ ጥንቸሉ ጽዋዎችን እና ሳህኖችን እያወጣ መሆኑን በማየቱ በጣም ተደስቶ ነበር።

የምሳሌው ውጤት በስእል ውስጥ ይታያል. 3.33.

ሩዝ. 3.33. በግራ የተሰለፈ፣ በቀኝ የተጠቀለለ ምስል

ፍሬሞችን መፍጠር

የጎን አሞሌ በዋናው ጽሑፍ ውስጥ የተካተተ ምስሎች እና ጽሑፎች ያሉት ብሎክ ነው። የጎን አሞሌው ብዙውን ጊዜ በግራ ወይም በቀኝ ጠርዝ ላይ ባለው የጽሑፍ እገዳ ላይ ይገኛል, እና ዋናው ጽሑፍ በሌሎች ጎኖች ላይ በዙሪያው ይፈስሳል (ምሥል 3.34).

ሩዝ. 3.34. ማስገቢያ አይነት

የጎን አሞሌው በጽሑፉ ውስጥ ጎልቶ እንዲታይ ለማድረግ ብዙውን ጊዜ ወደ ዳራ ቀለም ይዘጋጃል እና ድንበር ይታከላል። በመልክታቸው ክፈፎች ከላይ ያለውን ጽሑፍ በሥዕል ላይ የመጠቅለል ዘዴን ስለሚመስሉ ፍሬሞችን የመፍጠር ኮድ ከቀዳሚው ጋር ተመሳሳይ ነው (ምሳሌ 3.23)።

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

የእሱ ድርጊት ከማጂክ ዋንድ መሳሪያ ጋር ተመሳሳይ ነው, ነገር ግን ከእሱ በተለየ, አካባቢን አይመርጥም, ነገር ግን ያጠፋዋል.

የ Magic Erase መሳሪያ በቀለም ተመሳሳይ የሆኑ ፒክሰሎችን ይሰርዛል። የበስተጀርባ ንብርብር ወይም ግልጽነቱ የተቆለፈበት ንብርብር ላይ እየሰራን ከሆነ ፒክስሎቹ ከበስተጀርባ ቀለም ይተካሉ. በሌሎች ሁኔታዎች ሁሉ ግልጽ የሆነ ቦታ እናገኛለን.

ከማጂክ ኢሬዝ መሳሪያ ጋር የመሥራት መርህ ከ Magic Wand መሳሪያ ጋር ተመሳሳይ ነው. በመጀመሪያ ተገቢውን የመቻቻል እሴት አዘጋጅተናል፣ ፀረ-aliased አመልካች ሳጥኑን ለስላሳ ድንበሮች እንዲፈጥር እናስችለው፣ አጠቃላይ ዳራውን በተመሳሳይ ጊዜ ለማስወገድ Contiguous የሚለውን ምልክት ያንሱ እና ከዚያ በሰማይ አካባቢ ያለውን ፎቶ ጠቅ ያድርጉ። የበስተጀርባ ንብርብር ከዚህ ቀደም ከተሰየመ ግልጽ የሆኑ ቦታዎችን በትክክለኛው ቦታ ላይ እናገኛለን።

ክፈፎችን በሚፈጥሩበት ጊዜ የወርድ ንብረቱን በመጠቀም ስፋቱን መግለጽ አለብዎት. አለበለዚያ የንብርብሩ መጠን ከሚያስፈልገው በላይ በጣም ሰፊ ይሆናል.

የንብርብር አቀማመጥ በአግድም

በነባሪ፣ የማገጃ ንጥረ ነገሮች አንዱ ከሌላው በታች በአቀባዊ ይደረደራሉ፣ ነገር ግን ተንሳፋፊውን ንብረቱን በመጠቀም እርስ በእርሳቸው በአግድም እንዲሰለፉ ማስገደድ ይችላሉ። በዚህ ሁኔታ, የንብርቦቹን ስፋት ማዘጋጀት እና ለእነሱ ተንሳፋፊ ማዘጋጀት ያስፈልግዎታል. ስፋቱ ካልተገለጸ, ጠርዞችን እና ድንበሮችን ግምት ውስጥ በማስገባት ከንብርብሩ ይዘት ጋር እኩል ይሆናል. ምሳሌ 3.24 በቀደመው ክፍል የተፈጠረውን የምርት ካታሎግ ውስጠ-ብሎክ ኤለመንቶችን በመጠቀም ወስዶ ተንሳፋፊን ለመጠቀም እንደገና ይሠራል። ብሎኮች እንዲታዩ ለማድረግ የድረ-ገጹ ዳራ ወደ ግራጫ ተቀናብሯል።

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

የምሳሌው ውጤት በስእል ውስጥ ይታያል. 3.35.

ሩዝ. 3.35. የተንሳፋፊውን ንብረት ሲጠቀሙ የንብርብር አቀማመጥ

በፊርማው ውስጥ በተለያየ ጽሑፍ ምክንያት የብሎኮች ቁመት እንዲሁ የተለየ ሆኖ ተገኝቷል ፣ ለዚህም ነው አንዳንድ ብሎኮች ከሌሎች ጋር “የሚጣበቁ” እና ወደ ሌላ መስመር የማይሄዱት። የሁሉንም ብሎኮች ቁመት በከፍታ ንብረቱ በኩል እንደ 100 ፒክስል ማቀናበር ወይም ማሳያን ወደ መጠቀም መመለስ፡ የመስመር ላይ እገዳ እዚህ ሊረዳ ይችላል።

የፍሰት ውጤት

የተንሳፋፊው ንብረት, ተንሳፋፊ ንጥረ ነገሮችን የመፍጠር ችሎታ በተጨማሪ, ማወቅ ያለብዎት በርካታ ባህሪያት አሉት. ዋናው ባህሪው ተንሳፋፊው በአቅራቢያው ያሉትን ሁሉንም ንጥረ ነገሮች ይነካል, ይህም በፍሰቱ ውስጥ እንዲሳተፉ ያስገድዳቸዋል. ይህንን በምሳሌ 3.25 እንመልከተው፣ ይህም የተንሳፋፊውን ንብረት ግራ እና ቀኝ እሴቶችን በመጠቀም በአንድ መስመር ላይ እንዴት ቀስቶችን መፍጠር እንደሚቻል ያሳያል።

ምሳሌ 3፡25. የፍሰት ውጤት

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ምንም እንኳን ጽሑፉ እና ቀስቶቹ የተለያዩ የማገጃ ክፍሎችን ቢጠቀሙም እና በተለያዩ መስመሮች ላይ መቀመጥ አለባቸው, የተንሳፋፊው ተፅእኖ ጽሑፉ በወራጅ ቀጠና ውስጥ ስለሚወድቅ ወደ ላይ ከፍ እንዲል ያደርገዋል (ምስል 3.36). እንዲሁም ተንሳፋፊው ንጥረ ነገሮች በሰነዱ ፍሰት ውስጥ የማይሳተፉ በመሆናቸው የቀስት ንጣፍ የጀርባ ቀለም አይታይም ፣ በመሠረቱ ፣ ይህ የቀስት ንጣፍ ባዶ ከመተው ጋር ተመሳሳይ ነው።

ሩዝ. 3.36. ከስር ጽሑፍ ላይ የመጠቅለል ውጤት

ተንሳፋፊ ንጥረ ነገሮች በውስጣቸው ባሉበት የማገጃ ቁመት ላይ ተጽዕኖ አያሳርፉም። ይህንን ለማግኘት፣ ማገጃውን በፍሬም ከበቡ እና በውስጡ ጽሑፍ ያለው ተንሳፋፊ አካል ያስቀምጡ (ምሳሌ 3.26)።

ምሳሌ 3፡26. አግድ ቁመት

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ስዕሉ የንብርብሩን ቁመት አይጎዳውም እና ከገደቡ በላይ ይሄዳል (ምሥል 3.37).

ሩዝ. 3.37. ተንሳፋፊ የንብርብር ቁመት

እነዚህ ሁሉ የተንሳፋፊ አካላት ባህሪያት በድረ-ገጽ አቀማመጥ ላይ በተለይም ከላይ በተዘረዘሩት ጉዳዮች ላይ በጣም ደስ የማይል ተጽእኖ ሊኖራቸው ይችላል. የተፈለገውን ውጤት ለማግኘት ዋናው መንገድ መጠቅለያውን በትክክለኛው ጊዜ መሰረዝ ነው. ይህንን ለማድረግ በርካታ መንገዶች አሉ.

መጠቅለልን ሰርዝ

መጠቅለል አባሎችን ለማስተካከል እና ለማደራጀት የሚያገለግል ኃይለኛ የአቀማመጥ መሳሪያ ነው። ነገር ግን፣ ይህንን መሳሪያ በቁጥጥር ስር ለማዋል፣ የክብደት መለኪያ ያስፈልጋል፣ ያለዚህም ግዙፍ የመንሳፈፍ አቅም ወደ ሁለት ጠባብ ስራዎች ይቀንሳል። እየተነጋገርን ያለነው የተለያዩ ዘዴዎችን በመጠቀም ፍሰቱን ስለመሰረዝ ነው። በጣም ተወዳጅ የሆኑትን አራቱን እንዘርዝር.

የንጥል ስፋት

ተንሳፋፊ ኤለመንት የሚገኘውን ስፋት በሙሉ ከወሰደ፣ ከዚያ በኋላ የቀሩት ንጥረ ነገሮች በአዲስ መስመር ላይ ይጀምራሉ። ይህንን ለማድረግ በ 100% ዋጋ ያለውን ስፋት ንብረቱን ማንቃት ያስፈልግዎታል. ስለዚህ ፣ በምሳሌ 3.25 ውስጥ ያለው ዘይቤ እንደሚከተለው ሊሟላ ይችላል ።

ግራ (ተንሳፋፊ፡ ግራ፤ ስፋት፡ 50%፤) .ቀኝ ( ተንሳፋፊ፡ ቀኝ፤ ስፋት፡ 50%፤ ጽሑፍ-አሰላለፍ፡ ቀኝ፤)

እያንዳንዱ የቀስት ንብርብር አሁን 50% ስፋትን ይይዛል እና እስከ 100% ስፋት ይጨምራሉ, ስለዚህ ከቀስት ንብርብር በኋላ ያለው አንቀፅ በአዲስ መስመር ይጀምራል.

ይህ ዘዴ በጣም አልፎ አልፎ ጥቅም ላይ ይውላል, ምክንያቱም ስፋቱ በምስሎች ላይ ሊተገበር አይችልም, እና የንብርብሩን ቁመት እና የጀርባውን ችግር አይፈታውም.

የትርፍ ፍሰትን መጠቀም

የተትረፈረፈ ንብረቱ አጠቃላይ ይዘቱ የማይመጥን እና ከተጠቀሱት ልኬቶች አካባቢ በላይ የሚዘልቅ ከሆነ የብሎክ ኤለመንት ይዘቶችን ማሳያ ይቆጣጠራል። የአውቶ ቫልዩ በተለይ አስፈላጊ ሆኖ ሲገኝ የማሸብለያ አሞሌዎችን ይጨምራል ፣ የተደበቀው ግን በኤለመንቱ ውስጥ ያለውን ቦታ ብቻ ያሳያል እና የቀረውን ይደብቃል። በተጨማሪም ከመጠን በላይ ፍሰትን በራስ-ሰር ፣ሸብልል ወይም የተደበቀ ዋጋ በመጠቀም የተንሳፋፊውን ውጤት ይሽራል። የአጻጻፍ ስልት ለምሳሌ 3.25 በአንድ መስመር ብቻ ይጠናቀቃል፡-

ቀስት (ትርፍ: ተደብቋል;)

የተትረፈረፈ ንብረቱን ከተጠቀሙ በኋላ ውጤቱ ወዲያውኑ ይለወጣል (ምሥል 3.38).

ሩዝ. 3.38. የተትረፈረፈ ንብረት በጀርባ ላይ ያለው ተጽእኖ

ምሳሌ 3.26 በተመሳሳይ መልኩ ተጨምሯል፡-

DIV (ትርፍ: የተደበቀ;)

ውጤቱ በስእል ውስጥ ይታያል. 3.39.

ሩዝ. 3.39. በድንበሩ ላይ ያለው የተትረፈረፈ ንብረት ውጤት

ከመጠን በላይ መፍሰስ ከመንሳፈፍ ጋር አብሮ የሚሠራ በጣም ታዋቂ ከሆኑ ንብረቶች አንዱ ነው። ግን አንዳንድ ጊዜ የዚህ ዘዴ አጠቃቀም ተቀባይነት ከሌለው ሁኔታዎች ይነሳሉ. ይህ የሚከሰተው ኤለመንቱ ከኤለመንቱ በላይ በሚሰፋበት ጊዜ ነው, በዚህ ጊዜ "ይቆረጣል". በምሳሌ 3.27, ስዕሉ ወደ መጀመሪያው ቦታ ወደ ግራ ይቀየራል.

ምሳሌ 3፡27. የአንድ ንጥረ ነገር አካባቢ ይከርክሙ

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Winnie the Pooh ጥንቸሏን እየጎበኘች ነው።

የምሳሌው ውጤት በስእል ውስጥ ይታያል. 3.40.

ሩዝ. 3.40. ስዕልን በመከርከም ላይ

በ IE6 ውስጥ፣ ዘዴው የሚሰራው የ hasLayout ንብረት ሲዘጋጅ ብቻ ነው። እሱን ለማንቃት ማጉላትን ማከል ይችላሉ፡ 1 ከተትረፈረፈ ንብረት ጋር።

ንጹህ ንብረት

የተንሳፋፊውን ውጤት ለመሰረዝ, ከሚከተሉት እሴቶች ጋር የጠራውን ንብረት ይጠቀሙ.

• ግራ - ከኤለመንት ግራ ጠርዝ (ተንሳፋፊ: ግራ) መጠቅለልን ይሰርዛል። በዚህ ሁኔታ, በዚህ በኩል ያሉት ሁሉም ሌሎች ንጥረ ነገሮች ወደታች ይወርዳሉ እና አሁን ባለው አካል ስር ይገኛሉ.
• ቀኝ - በንጥሉ በቀኝ በኩል ያለውን ፍሰት ይሰርዛል (ተንሳፋፊ: ቀኝ).
• ሁለቱም - የንጥሉን ፍሰት ከቀኝ እና ከግራ ጠርዝ በአንድ ጊዜ ይሰርዛል. የአንድን ንጥረ ነገር መጠቅለያ ለመሰረዝ ሲፈልጉ ይህንን እሴት እንዲያዘጋጁ ይመከራል ነገርግን ከየትኛው ወገን በትክክል አታውቁትም።

የመጠቅለያውን ውጤት ለመሰረዝ የጠራ ንብረቱ ከተንሳፋፊው በኋላ በሚመጣው ንጥረ ነገር ላይ መጨመር አለበት. ብዙውን ጊዜ ሁለንተናዊ ክፍልን ያስተዋውቁታል፣ ለምሳሌ ግልጽ ያድርጉ እና ባዶ መለያ ያስገቡ

ከዚህ ክፍል ጋር (ምሳሌ 3.28).

ምሳሌ 3፡28. ግልጽ በመጠቀም

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

በዚህ ምሳሌ, ግልጽ የሆነው ክፍል ለሁለቱም የተቀመጠ ግልጽ ንብረቱ አለው. የተለያዩ እሴቶችን መጠቀም ከፈለጉ ብዙ ክፍሎችን ማስገባት እና እንደ አስፈላጊነቱ መተግበር ይችላሉ.

ይህ ዘዴ በቀላል እና በተለዋዋጭነት ምክንያት በአቀማመጥ ውስጥ በጣም ታዋቂ ከሆኑት ውስጥ አንዱ ነው። ግን እንደገና ፣ አንዳንድ ጊዜ ግልፅ አለመሳካት የሚጠቀሙባቸው ውህዶች አሉ። ይሄ የሚሆነው የእርስዎ ኮድ በተመሳሳይ ጊዜ የተለያዩ ተንሳፋፊዎችን ሲያገኝ ነው። ስለዚህ, በምሳሌ 3.29, ተንሳፋፊ ሁለት ዓምዶችን ለመፍጠር ጥቅም ላይ ይውላል, እና በቀኝ ዓምድ ውስጥ, ተንሳፋፊ ፎቶዎችን ያዘጋጃል.

ምሳሌ 3፡29. ተንሳፋፊዎችን መጠቀም

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ምናሌ

ምርጥ ፎቶዎች

በአስተያየቶች

ቅድስት ሶፊያ ካቴድራል

የፖላንድ ቤተ ክርስቲያን

አዲስ መስመር

ምድር ቤት

የምሳሌው ውጤት በምስል ውስጥ ይታያል. 3.41. የንጹህ ንብረቱ የፎቶ ክፍልን ብቻ ሳይሆን የ col1 ክፍልንም ጭምር ይነካል, ማለትም. ተንሳፋፊ ስብስብ ባላቸው ከላይ ባሉት ሁሉም ንጥረ ነገሮች ላይ። ስለዚህ "አዲሱ መስመር" ከፎቶግራፎች በኋላ ወዲያውኑ አይጀምርም, ነገር ግን ከግራው ዓምድ መጨረሻ በኋላ.

ሩዝ. 3.41. ሕብረቁምፊን ማሳየት ላይ ስህተት

በእንደዚህ ዓይነት ሁኔታዎች ውስጥ የተለያዩ ዘዴዎች ጥምረት ይረዳል. ስለዚህ, ፎቶዎች ከመጠን በላይ እና ግልጽ በሆነ ግራ ተወግዶ ወደ መያዣ ውስጥ ሊጨመሩ ይችላሉ. ዓምዱ የሚከተለውን ቅጽ ይወስዳል.

ቅድስት ሶፊያ ካቴድራል

የፖላንድ ቤተ ክርስቲያን

አዲስ መስመር

አስመሳይ አካል፡ በኋላ

ባዶ መለያ ተደጋጋሚ ማካተት

ከንጹህ ንብረቱ ጋር በተለይም ተንሳፋፊውን ንብረት በንቃት ሲጠቀሙ ኮዱን ያበላሻሉ። ሁሉንም ነገር ወደ ቅጦች ማዛወር, አላስፈላጊ መለያዎችን ማስወገድ ምክንያታዊ ነው. ይህንን ለማድረግ፡ ከ pseudo-element (pseudo-element) በኋላ እንጠቀማለን፣ እሱም ከይዘቱ ንብረቱ ጋር በማጣመር፣ ከኤለመንት በኋላ ጽሑፍን ይጨምራል። ለእንደዚህ አይነት ጽሑፍ የቅጥ ባህሪያትን መተግበር ይችላሉ, በተለይም ግልጽ . የቀረው የሚታየውን ጽሑፍ ከአሳሹ መደበቅ ብቻ ነው።

Clearleft: በኋላ (ይዘት: "."; /* ጽሑፉን ከኤለመንት (ነጥብ) በኋላ አሳይ */ ግልጽ: ግራ; /* መጠቅለያውን ሰርዝ */ ታይነት: ተደብቋል; /* ጽሑፉን ደብቅ */ ማሳያ: አግድ; / * አግድ አካል * / ቁመት: 0;

የትኛውን ቁምፊ ለማሳየት ምንም ችግር የለውም, በማንኛውም ሁኔታ በታይነት ከተጠቃሚው ተደብቋል, ነገር ግን በሚደበቅበት ጊዜ እንኳን, ጽሑፉ የተወሰነ ቁመት ይይዛል እና በአቅራቢያ ያሉ አካላትን ይነካል. ስለዚህ የውጤት ጽሁፍ አሁንም ወደ አግድ አካል መቀየር እና ወደ ዜሮ ቁመት መቀናበር ያስፈልጋል።

ምክንያቱም በ: after pseudo-element የመነጨው ጽሑፍ ከኤለመንቱ በኋላ ስለሚመጣ በቀላሉ ግንባታውን ይተካዋል.

. በሚፈለግበት ቦታ፣ በምሳሌ 3.30 ላይ እንደሚታየው የግራ ግራ ክፍልን ማከል ብቻ ያስፈልግዎታል።

ምሳሌ 3.30. አስመሳይ አካል፡ በኋላ

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Winnie the Pooh ጥንቸሏን እየጎበኘች ነው።

IE አሳሽ አይደግፍም: በኋላ እና ስሪት 7.0 ጨምሮ, ስለዚህ ከላይ ያለው ምሳሌ በእነዚህ ስሪቶች ውስጥ አይሰራም. ማጉላትን ማከል፡ 1 ወደ ተንሳፋፊ አካል መጠቅለልን ይሰርዛል።

ከላይ የተጠቀሰው ዘዴ ምቾቱ በክሊፍት ግራፍ ክፍል አጠቃቀም ላይ ነው, ይህም አስፈላጊ ከሆነ በማንኛውም መለያ ላይ ሊጨመር ይችላል. እንዲሁም ተጨማሪ ክፍሎችን ማስተዋወቅ ይችላሉ, የአጻጻፍ ዘይቤው ከሌሎች ግልጽ እሴቶች ጋር ይለያያል.

ብዙውን ጊዜ, የአቀማመጥ ዲዛይነር የተወሰኑ መደበኛ ያልሆኑ ተግባራትን ይሰጠዋል. ግባችን በጣም ምክንያታዊ እና ትክክለኛ መፍትሄ ማቅረብ ነው። ዛሬ በምስል ዙሪያ ስለ ጽሑፍ መጠቅለል ባህሪያት እንነጋገራለን.

የችግሩ መግለጫ

ለመረጃ ምንጭዎ ወይም ብሎግዎ ጽሑፍ መጻፍ ብዙውን ጊዜ በመንገድ ላይ ስዕሎችን ከማካተት ጋር አብሮ ይመጣል። የፍለጋው ሮቦት ሁልጊዜ በጣቢያው ላይ ስዕሎችን መኖሩን ስለሚያከብር ተጠቃሚው በደማቅ ምስሎች ጽሑፍ የበለጠ ይደሰታል. ስለዚህ በጽሑፍ እና በስዕሎች መካከል ቆንጆ መስተጋብርን የሚያረጋግጥ ልዩ የቅርጸት ዘዴን መጫን አስፈላጊ ነው.

የጽሑፍ መጠቅለል በማይፈለግበት ጊዜ ጉዳዩን እናስብ። ከዚህም በላይ, እኔ ሁለንተናዊ አማራጭ አቀርባለሁ - ስዕል በሌለበት, ጽሑፉ በጠቅላላው የማገጃው ስፋት ላይ ተዘርግቷል (ሁሉም ጽሑፎችዎ በምሳሌዎች አይያዙም). የጽሑፍ እገዳው ስፋት በጥብቅ አልተስተካከለም. ከታች የእኛ ብሎክ ምን መምሰል አለበት.

ትክክለኛው ውሳኔ

ተግባሩን ለመተግበር ሁለት ብሎኮችን እንፈጥራለን-አንዱ ለምስሉ ፣ ሁለተኛው ለጽሑፉ። በምስሉ ስር ያሉ ሌሎች ንጥረ ነገሮች ሊኖሩ እንደሚችሉ ግምት ውስጥ በማስገባት ለምስሉ የተለየ መያዣ እንፈጥራለን, አለበለዚያ ይህ አያስፈልግም, በቀላሉ አስፈላጊውን ክፍል ለምስሉ መለያ መስጠት ይችላሉ.

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >የጽሑፍ እገዳ

ማሳያ: መስመር ውስጥ;

)

የተንሳፋፊ ነገር ባህሪያትን ለጽሁፉ ለመመደብ ሀሳብ መስጠት በጣም ምክንያታዊ ይሆናል. የእቃው ስፋቶች ካልተዘጋጁ, የሚከተለውን ስዕል እናገኛለን:

ይህንን ውጤት ለማስወገድ በቀላሉ የጽሑፍ እገዳውን ስፋት መግለፅ ያስፈልግዎታል, ነገር ግን ይህ የተግባራችንን ሁኔታዎች አያሟላም.

የሚቀጥለው ጥሩ አማራጭ ከህዳግ-ግራ ያለውን ንብረት መጠቀም ነው። ለብሎግ ፣ ምናልባትም ፣ በዚህ ብሎክ ውስጥ ያሉት ሁሉም ስዕሎች በመጠን አንድ ይሆናሉ ፣ መፍትሄው በመርህ ደረጃ ፣ መጥፎ እና ውጤታማ አይደለም። ሆኖም ፣ ይህ ልዩ ጉዳይ ነው ፣ ምክንያቱም በአንቀጹ ውስጥ ምንም ሥዕል ከሌለ በቀላሉ በግራ በኩል ባዶ ንጣፍ ይኖራል። ይህ አይስማማንም። ሁለንተናዊ መፍትሔ እየፈለግን ነው!

እና በጣም ትክክለኛው መፍትሄ, ብዙውን ጊዜ እንደሚከሰት, በጣም ቀላል ነው. የተፈለገውን የጽሑፍ እገዳን ለመቅረጽ፣ የተትረፈረፈ ንብረትን ከዋጋው ጋር መድረስ ያስፈልግዎታል ተደብቋል. ስለ ልዩ ኢንተርኔት ኤክስፕሎረር አይርሱ። እንደተለመደው እሱ ያሳያል እና ተጨማሪ ትኩረት ይፈልጋል! የእኛ አሮጌው ሰው በተለመደው ሁኔታ እንዲሠራ, የተንሳፋፊውን ንብረት ወደ ጽሁፍ እገዳ እንጨምራለን (የተትረፈረፈ ንብረቱን ከደረስን በኋላ, ቋሚ ስፋቱን መወሰን አያስፈልግም).

ስለዚህ, ወደ ትክክለኛው መፍትሄ ደርሰናል, ይህም በተግባራችን ሁኔታዎች ላይ በተገለጸው ንዑስ ክፍል ውስጥ በምስሉ ላይ የተመለከተውን ውጤት ያመጣል.

ምስል (ተንሳፋፊ: ግራ; /* መጠቅለያ */ ህዳግ: 10 ፒክስል; /*ውጫዊ ንጣፍ ለውበት */ማሳያ፡ inline; /* ለ IE6, የግራ ህዳግ በእጥፍ እንዳይጨምር */) . ጽሑፍ (ትርፍ: የተደበቀ; ተንሳፋፊ: ግራ;)

ዘዴው እና አማራጭ ጉዳቶች

የአጠቃቀም ቀላልነት እና ሁለገብነት ቢኖረውም የተትረፈረፈ: የተደበቀ, አንድ ጉድለት አለ. ተቆልቋይ አባሎች በጽሁፉ ክፍል ውስጥ ጥቅም ላይ ከዋሉ ንብረቱ ከአሁን በኋላ ተግባራቱን ማከናወን አይችልም።

በዚህ አጋጣሚ ተፈላጊውን ቅርጸት ለማዋቀር አማራጭ ያስፈልግዎታል. ይህ ዘዴ በቅንጅቱ ተግባራዊነት ላይ የተመሰረተ ይሆናል ማሳያ: ጠረጴዛ-ሴል;. ይህ መፍትሔ ልክ እንደ ውጤታማ ነው, ነገር ግን ከመጀመሪያው ዘዴ ቀላልነት ትንሽ ያነሰ ነው. ይህንን ዘዴ በሚደውሉበት ጊዜ በበይነመረብ ኤክስፕሎረር አካባቢ ውስጥ ለመስራት አቀማመጡን ማዘጋጀት ያስፈልግዎታል

Img ( ተንሳፋፊ: ግራ; /* መጠቅለያውን ያዘጋጁ */ህዳግ: 10 ፒክስል; /* ለውበት ማስገባቱ */ማሳያ፡ inline; /* ለ IE6, የግራ ህዳግ በእጥፍ እንዳይጨምር */) . ጽሑፍ (ማሳያ፡ ሠንጠረዥ-ሴል፤ አጉላ፡ 1; /* በጥንቃቄ! ሕብረቁምፊው ልክ ያልሆነ ነው */ }

እና ይህ መፍትሄ በአቀማመጥ ወቅት ግምት ውስጥ መግባት ያለበት የራሱ ባህሪያት አለው. የጽሑፍ ክፍሉ በቂ አጭር ከሆነ, የሚቀጥለው እገዳ ከጽሑፍ ክፍል ጋር በስተቀኝ በኩል ይታያል. ይህንን ለማስቀረት የጽሑፍ እገዳውን እና ምስሉን በተለየ መያዣ ውስጥ ማስገባት ያስፈልግዎታል.

በየትኛው አሳሾች ነው የሚሰራው?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

በዚህ ጽሑፍ ውስጥ ጽሑፍን በሥዕሉ ላይ ለመጠቅለል አማራጮችን እንመለከታለን. በርካታ መንገዶች አሉ። እያንዳንዳቸውን እንመልከታቸው። ለመጀመር, ጽሑፉን እንዲያነቡ እመክራችኋለሁ html መለያ በኤችቲኤምኤል ገፆች ላይ የምስሎች መሰረታዊ እውቀት እንዲኖራት።

1. በመለያ ቅጦች መጠቅለል

ምስሉ ከሲኤስኤስ መለያ ቅጦች ጋር በመስራት ብቻ ሊጣመር ይችላል። . እንደሚያውቁት፣ የመለያው አገባብ የምስሉን አሰላለፍ በባህሪያት እንዲያዘጋጁ ይፈቅድልዎታል።

VALUE እሴቶችን የሚወስድበት

• የግራ - የግራ አሰላለፍ
• ቀኝ - ትክክለኛ አሰላለፍ
• ከታች - ወደ መጀመሪያው የጽሑፍ መስመር አሰላለፍ (ይህ ነባሪው ነው)
• ከላይ - ወደ ጽሑፍ የላይኛው መስመር አሰላለፍ
• መካከለኛ - ከጽሑፉ መሰረታዊ መስመር ጋር ማመጣጠን

ለምሳሌ

የጽሑፍ ጽሑፍ የጽሑፍ ጽሑፍ ጽሑፍ ጽሑፍ የጽሑፍ ጽሑፍ የጽሑፍ ጽሑፍ ጽሑፍ ጽሑፍ

ስዕሉ ከጽሑፉ ጋር የተጣበቀ ይመስላል, ስለዚህ ውስጠ-ገብ እንሰራለን. ከዚህም በላይ ይህንን እንዴት ማድረግ እንደሚቻል ሁለት አማራጮች አሉ.

አማራጭ 1.1. በሲኤስኤስ ንብረት በኩል - hspace እና vspace
ይህንን ለማድረግ, በመለያ ባህሪያት ውስጥ ሁለት እሴቶችን ይጨምሩ

በገጹ ላይ እንደዚህ ይሆናል-

የ hspace ባህሪ አግድም ንጣፍ በፒክሰሎች, vspace - ቀጥ ያለ ንጣፍ, በቅደም ተከተል ይገልጻል.

አማራጭ 1.2. በሲኤስኤስ ንብረት በኩል - ንጣፍ እና ህዳግ
ይህንን ለማድረግ, በመለያ ባህሪያት ውስጥ ሁለት እሴቶችን ይጨምሩ

በገጹ ላይ እንደዚህ ይሆናል-

በግራ በኩል ባለማስገባታችን የተሻለ ይመስላል። ከህዳግ ይልቅ, ንጣፍን መጠቀም ይችላሉ, ውጤቱም ተመሳሳይ ይሆናል.

ከመደርደር ይልቅ ተንሳፋፊውን ንብረት መጠቀም

በመለያ ባህሪያት ውስጥ ካለው አሰላለፍ ንብረት በተጨማሪ ቅጦች የሲኤስኤስ ተንሳፋፊ ንብረት አላቸው፣ እሱም ደግሞ የማጣጣም ሃላፊነት አለበት። አገባቡ እንደሚከተለው ነው።

መንሳፈፍ : ቀኝ; //ትክክለኛ አሰላለፍ መንሳፈፍ : ግራ;

//

የግራ አሰላለፍ

ለምሳሌ የስዕሉን ውጤት በቀደመው ምሳሌ ላይ እንደሚከተለው ከጻፉት፡-

ይህ ወደሚከተለው ይቀየራል፡-

ለመንሳፈፍ ምስጋና ይግባውና ለምስሎች አንድ ነጠላ ክፍልን መግለጽ ይችላሉ, ይህም በጣም ምቹ ነው.

2. ምስሉን በማፍሰስ

ሁሉም ምስሎች በብሎኮች ውስጥ ሊቀመጡ ይችላሉ

. እና ወደ መለያው ራሱ ከገጽ አሰላለፍ እና ከመግባት ጋር ቅጥ ያዘጋጁ።

በ MS Word ውስጥ በሚሰሩበት ጊዜ ብዙውን ጊዜ ምስሎችን በመጠቀም ሰነድን የመግለጽ አስፈላጊነት ሊያጋጥሙዎት ይችላሉ። ስዕልን ለመጨመር ምን ያህል ቀላል እንደሆነ እና በላዩ ላይ ጽሑፍ እንዴት እንደሚቀመጥ አስቀድመን ጽፈናል. ነገር ግን፣ አንዳንድ ጊዜ በተጨመረው ምስል ዙሪያ ጽሁፍ መጠቅለል ሊያስፈልግህ ይችላል፣ ይህም ትንሽ የተወሳሰበ ነገር ግን በጣም ቆንጆ ነው። በዚህ ጽሑፍ ውስጥ ስለዚህ ጉዳይ እንነጋገራለን.

በመጀመሪያ, በስዕሉ ዙሪያ ጽሑፍን ለመጠቅለል ብዙ አማራጮች እንዳሉ መረዳት አለብዎት. ለምሳሌ, ጽሑፍ ከሥዕሉ በስተጀርባ, ከፊት ለፊቱ ወይም በስዕሉ ላይ ሊቀመጥ ይችላል. የኋለኛው ምናልባት በአብዛኛዎቹ ጉዳዮች በጣም ተቀባይነት ያለው ሊሆን ይችላል። ሆኖም ፣ ዘዴው ለሁሉም ዓላማዎች አጠቃላይ ነው ፣ እና ወደ እሱ እንቀጥላለን።

1. የጽሁፍ ሰነድዎ እስካሁን ምስል ከሌለው መመሪያዎቻችንን በመጠቀም ያስገቡት።

2. አስፈላጊ ከሆነ, በስዕሉ ላይ የሚገኙትን ጠቋሚዎች ወይም ማርከሮች በመጎተት የምስሉን መጠን ይለውጡ. እንዲሁም, ምስሉን መከርከም, የሚገኝበትን አካባቢ መጠን እና ዝርዝር መለወጥ ይችላሉ. የእኛ ትምህርት በዚህ ረገድ ይረዳዎታል.

3. በመቆጣጠሪያ ፓነል ላይ ያለውን ትር ለማሳየት የተጨመረው ምስል ላይ ጠቅ ያድርጉ "ቅርጸት", በዋናው ክፍል ውስጥ ይገኛል "ከሥዕሎች ጋር መሥራት".

4. በ "ቅርጸት" ትር ውስጥ አዝራሩን ጠቅ ያድርጉ "የጽሑፍ መጠቅለያ"በቡድኑ ውስጥ የሚገኝ "አደራጁ".

5. ከተቆልቋይ ምናሌ ውስጥ ተገቢውን የጽሑፍ መጠቅለያ አማራጭ ይምረጡ፡-

• "በጽሑፉ ውስጥ"- ምስሉ በጠቅላላው አካባቢ በጽሑፍ "ይሸፍናል";

• "በፍሬም ዙሪያ"("ካሬ") - ጽሑፉ ምስሉ በሚገኝበት የካሬው ክፈፍ ዙሪያ ይሆናል;

• "ከላይ ወይም ከታች"- ጽሑፉ በምስሉ አናት እና / ወይም ታች ላይ ይቀመጣል ፣ በጎኖቹ ላይ ያለው ቦታ ባዶ ሆኖ ይቀራል ።

• "ኮንቱር አጠገብ"- ጽሑፉ በምስሉ ዙሪያ ይቀመጣል. ምስሉ ክብ ወይም ያልተስተካከለ ቅርጽ ያለው ከሆነ ይህ አማራጭ በተለይ ጥሩ ነው;

• "በኩል"- ጽሑፉ ከውስጥ ውስጥ ጨምሮ በጠቅላላው ዙሪያ ዙሪያ በተጨመረው ምስል ዙሪያ ይፈስሳል;

• "ከጽሑፉ ጀርባ"- ስዕሉ ከጽሑፉ በስተጀርባ ይገኛል. በዚህ መንገድ በ MS Word ውስጥ ከሚገኙ መደበኛ የውሃ ምልክቶች በተለየ የጽሑፍ ሰነድ ላይ የውሃ ምልክት ማከል ይችላሉ;

ማስታወሻ፡-ጽሑፍ ለመጠቅለል አማራጩን ከመረጡ "ከጽሑፉ ጀርባ", ምስሉን ወደ ተፈለገው ቦታ ካዘዋወሩ በኋላ, ምስሉ የሚገኝበት ቦታ ከጽሑፉ በላይ ካልሆነ ማረም አይችሉም.

• "ከጽሑፉ በፊት"- ምስሉ በጽሁፉ አናት ላይ ይቀመጣል. በዚህ ሁኔታ, ጽሑፉ የሚታይ እና የሚነበብ ሆኖ እንዲቆይ ለማድረግ የንድፍ ቀለም እና ግልጽነት መለወጥ አስፈላጊ ሊሆን ይችላል.

ማስታወሻ፡-የተለያዩ የጽሑፍ መጠቅለያ ቅጦች ስሞች በተለያዩ የማይክሮሶፍት ዎርድ ስሪቶች ሊለያዩ ይችላሉ፣ ነገር ግን የመጠቅለያ ዓይነቶች ሁልጊዜ ተመሳሳይ ናቸው። በቀጥታ በእኛ ምሳሌ, Word 2016 ጥቅም ላይ ይውላል.

6. ወደ ሰነዱ ጽሁፍ ገና ካልተጨመረ ያስገቡት። ሰነድዎ ቀድሞውኑ ለመጠቅለል የሚፈልጉትን ጽሑፍ ከያዘ ምስሉን በጽሁፉ ላይ ያንቀሳቅሱ እና ቦታውን ያስተካክሉ።

ምክር፡-በአንድ ጉዳይ ላይ ተስማሚ ሊሆን የሚችለው በሌላኛው ተስማሚ ላይሆን ስለሚችል በተለያዩ የጽሑፍ መጠቅለያ ዓይነቶች ይሞክሩ።

እንደምታየው በ Word ውስጥ ጽሑፍን በምስል ዙሪያ መጠቅለል በጭራሽ አስቸጋሪ አይደለም። በተጨማሪም, የማይክሮሶፍት ፕሮግራም ድርጊቶችዎን አይገድበውም እና ለመምረጥ ብዙ አማራጮችን ይሰጣል, እያንዳንዱም በተለያዩ ሁኔታዎች ውስጥ ጥቅም ላይ ሊውል ይችላል.