በ CSS2 እና በ CSS3 መካከል ያለውን ልዩነት

የ CSS3 ዋና ለውጦችን መረዳት

በ CSS2 እና በ CSS3 መካከል ትልቁ ልዩነት የ CSS3 ክፍል ወደ ተለያዩ ክፍሎች የተከፈተ ነው. እያንዳንዱ ሞጁል በ W3C በሂደቱ ውስጥ በተለያዩ ደረጃዎች እየሰራ ነው. ይህ ሂደት የተለያዩ የ CSS3 ክፍሎች እንዲቀበሉ አድርጓቸዋል እንዲሁም በአሳሽ ውስጥ በተለያዩ አምራቾች እንዲተገበሩ አስችሏል.

ይህን ሂደት በ CSS2 ከተከሰተው ጋር, ይህም ሁሉም ነገር እንደ አንድ ሰነድ በሞላ ውስጥ በሁሉም የውስጣዊ ቅፅ ጽሁፍ መረጃዎች ውስጥ ያስገባ ከሆነ, ምክሩን ወደ አነስተኛ, የተለያዩ ክፍሎች የመተግበር ጥቅሞችን ማየት ይጀምራሉ. እያንዳንዱ ሞጁሎች በተናጠል በመሥራት ላይ ስለሆኑ ለ CSS3 ሞጁሎች እጅግ በጣም ሰፋ ያለ የአሳሽ ድጋፍ አለን.

እንደ ማንኛውም አዲስ እና ተለዋዋጭ መግለጫ እንደ የ CSS3 ገጾችህን በተቻለህ መጠን ብዙ አሳሾች እና ስርዓተ ክወናዎች መሞከርህን እርግጠኛ ሁን. አላማው በእያንዳንዱ አሳሽ ላይ በትክክል ተመሳሳይ የሚመስሉ ድረ ገጾችን ለመፍጠር አይደለም, ነገር ግን የሚጠቀሙባቸው ማንኛውም ቅጦች, የ CSS3 ቅጦችን ጨምሮ, በሚደግፏቸው አሳሾች ላይ ምርጥ ሆነው ይመለከታሉ እና ከዚያ ለሚጎበኙ ለአሳሽ አሳሾች ተመቻችተው ይመለሳሉ. አትሥራ.

አዲስ የ CSS3 መራጭዎች

CSS3 የሲ.ኤስ. ደንቦችን ከአዲስ የሲ ኤስ ሲ መምረጫዎች, እንዲሁም አንድ አዲስ አጣምር እና አንዳንድ አዲስ የሐሰት-አባሎች መፃፍ የሚችሉበት አዲስ መንገዶች ስብስብ ያቀርባል.

ሶስት አዲስ ባህሪያት መራጭ

• ዓይነታ መጀመሪያው በትክክል ኤሌሜን [foo ^ = "bar"] ጋር ይገጣጠማል አባላቱ በ "አሞሌ" የሚጀምሩ አይነታ ባህርይ አላቸው
• በአይነቱ ውስጥ በትክክል የተዛመዱ መገለጫዎች [foo $ = "bar"] አባልው በ "አሞሌ" መጨረሻ የሚያበቃ አይነታ አለው
• መለያው የንጥል ክፍሉን ይዟል [foo * = "bar"] አባልው የ

16 አዲስ የዘር-ጎራዎች-

• : ስር
  • የሰነዱ ዋናው ክፍል. በኤች ቲ ኤም ኤል ውስጥ ይሄ ሁልጊዜ ነው.
• nth-child (n)
  • ተለዋጭ ግጥቶችን ለማግኘት ከትክክለኛ የልጆችን ክፍሎች ጋር ለማዛመድ ወይም ተለዋዋጭዎችን ተጠቀም.
• : n--የመጨረሻ-ልጅ (n)
  • ከመጨረሻው ቁጥሩ የሚመጡ ትክክለኛ የልጅ ክፍሎችን ያዛምዱ.
• : nth-of-type (n)
  • በእሱ የሰነድ ዛፍ ውስጥ ከእሱ ጋር ተመሳሳይ ስም ያለው ተመሳሳይ የእህት ክፍሎችን ያዛምዱ.
• : nth-last-of-type (n)
  • ከተመሳሳይ ስም ጋር ተመሳሳይ ተመሳሳይ ስም ያላቸው የእህት ክፍሎችን ያዛውቱ.
• : የመጨረሻ ልጅ
  • የወላጅውን የመጨረሻው የወቅለው አባል ያዛምዱ.
• : የመጀመሪያው-አይነት-አይነት
  • የዚህ አይነት የመጀመሪያ የወንድም / እህት አባል ያዛምዱ.
• : የመጨረሻ -ው-አይነት
  • የዚህን የመጨረሻው የወንድም / እህት አባል ያዛምዱ.
• :ብቸኛ ልጅ
  • የወላጅ ብቸኛው ልጅ የሆነውን ኤለመንት ያዛምዱት.
• : ብቻ-ተኮር
  • የእሱ ዓይነት ብቸኛ የሆነውን ኤለመንት ያዛምዱ.
• : ባዶ
  • ልጆች የሌላቸውን አባወራ (የጽሑፍ ሥፍራዎችን ጨምሮ) ያዛምዱ.
• የሚያያዙት ገጾች መልዕክት
  • የመጠቆም URI ግብ ያለው ኤለመንት ያዛምዱ.
• : ነቅቷል
  • ሲነቃ አባሪውን ያዛምዱት.
• : ተሰናክሏል
  • አባልነቱ ሲሰናከል ዓውዱን ያዛምዱ.
• : ታይቷል
  • ከተመረጡ በኋላ ኤለሙን ያዛምዱት (የሬዲዮ አዝራር ወይም አመልካች ሳጥን).

• : አይደለም (ዎች)
  • ኤለፊው ከተቀማጭ መምረጫው ጋር የማይዛመዱ ከሆነ ይዛመዱ .

አንድ አዲስ አጣምር:

• elementA ~ elementB
  • ኤለመንት ኤ ከአንደአን በኋላ ከሚከተላቸው በኋላ ተከታትሎ, ወዲያውኑ የግድ አይደለም.

አዲስ ባህሪያት

CSS3 በርካታ አዲስ የ CSS ባህሪያትን አስተዋውቋል. አብዛኛዎቹ እነዚህ ባህሪያት እንደ Photoshop የመሳሰሉ የግራፊክስ ፕሮግራሞችን የበለጠ ሊያያይዙ የሚችሉ የሚታዩ ቅጦች መፍጠር አለባቸው. ከእነዚህ መካከል አንዳንዶቹ የድንበር-ራዲየስ ወይም የሳር-ጥላ, እንደ CSS3 ከሆነ መግቢያ ጀምሮ እንደነበሩ ናቸው. ሌሎች, ልክ እንደ ፋንፋየር ወይም የሲ.ኤስ.ኤስ ፍርግርግ የመሳሰሉት እንደ አሁንም ብዙ ጊዜ የሲ.ሲ.ኤል ተጨማሪዎች ናቸው.

በ CSS3 ውስጥ, የሳጥን ሞዴል አልተለወጠም. ነገር ግን የሳጥኖቹን ዳራዎች እና ወሰኖች ለመቅረጽ የሚያግዙ የአዳዲስ ባህሪያት አሉ.

በርካታ ዳራዎች እኔ ነኝ

የዳራ-ምስል, የጀርባ-አቀማመጥ እና የጀርባ-ድግግሞሾችን በመጠቀም የተለያዩ የጀርባ ምስሎችን በሳጥኑ ውስጥ እርስ በእርሳቹ ላይ እንዲተያዩ ማድረግ ይችላሉ. የመጀመሪያው ምስሉ ለተጠቃሚው ቅርብ ነው, ከሚከተሉት የሚከተሏቸው ከታች ናቸው. የጀርባ ቀለም ካለ ከታች በሁሉም የምስል ንብርብሮች ይገለጻል.

አዲስ የጀርባ ገጽታ ባህሪያት

በተጨማሪም በ CSS3 ውስጥ አዲስ አዲስ ባህሪ ይኖራቸዋል.

• ጀርባ-ቅንጥብ
  • ይህ ንብረት የጀርባ ምስል እንዴት እንደሚቆራረጠው ይገልፃል. ነባሪው የጠርዝ ሳጥን ነው, ነገር ግን ወደ ማስረከቢያ ሳጥኑ ወይም የይዘቱ ሳጥን ሊለወጥ ይችላል.
• የጀርባ ምንጭ
  • ይህ ንብረት በስተጀርባ ሳጥን ውስጥ, የጠረጠር ሳጥን ወይም የይዘት ሳጥኑ ቦታ መሆን አለበት ብሎ ይወስናል.
• የዳራ-መጠን
  • ይህ ንብረት የበስተጀርባውን ምስል እንዲገልፁ ያስችልዎታል. ከገጹ ጋር ለመገጣጥል ትናንሽ ምስሎችን እንዲያሳልፉ ያስችልዎታል.

አሁን ባለው የጀርባ አይነት ባህሪያት ላይ ለውጦች

በነባር ጀርባ ስነ-ቁምፊ ባህሪያት ላይ ጥቂት ለውጦች አሉ:

• ጀርባ-ድግግሞሽ
  • ለዚህ ንብረት ሁለት አዳዲስ እሴቶች አሉ-ቦታ እና ክብ. የተሰራውን ምስልም ሳጥኑ ውስጥ ሳሉ በተመሳሳይ መልኩ የቦታ ቦታዎች ክፍተቶች. ዙሪያ የጀርባውን ምስል ዳግመኛ ያስቀምጣል.
• ዳራ-አባሪ
  • አዲሱ እሴት «አካባቢያዊ» ታክሎ በማያው የአርእስት ክፍል ከኤለመንት ጋር በማሸብለብ ይህ ኤለመንት የቁራጭ ጥቅል ሲኖረው.
• ዳራ
  • የጀርባ አረፍተ ነገሮች ባህሪዎች በመጠን እና በመነፅ ባህሪያት ውስጥ ይጨምራሉ.

የ CSS3 የመስመሮች ባህሪያት

በ CSS3 ጠርዞች እኛ የምንጠቀምባቸው ቅጦች (ጠንካራ, ድርብ, የተደለደለ, ወዘተ) ወይም ምስል መሆን ይችላሉ. በተጨማሪ CSS3 የተጠጋ ማዕዘን ለመፍጠር ችሎታ ያመጣል. የድንበር ምስሎች አስገራሚ ናቸው ምክንያቱም የሁሉም አራቱን ክፈፎች ምስል ስለፈጠሩ እና ለዚያ ክፈፍዎ ይህንን ምስል እንዴት ተግባራዊ እንደሚያደርጉ ለ CSS ይንገሩ.

አዲስ የድንበር ቅጥ ባህሪያት

በ CSS3 አንዳንድ አዲስ የድንበር ባህሪያት አሉ:

• የድንበር-ራዲየስ
  • የላይኛው-ቀኝ-ከቀኝ-ራዲየስ , ጠርዝ-ታች-የቀኝ-ራዲየስ , ከግራ-ታች-ግራ-ራዲየስ , የላይኛው-የላይ-ቀኝ-ራዲየስ
  • እነዚህ ባህርያት ወሰኖችዎ ላይ የተጠጋ ማዕዘን እንዲፈጥሩ ያስችሉዎታል.
• የድንበር-ምስል-ምንጭ
  • Already defined by border styles instead of used image source source ይገልጻል.
• ድንበር-ምስል-ስኬት
  • ከውስጠኛ ምስሎች ጠረጴዛዎች ውስጣዊ ቅርፊቶችን ይወክላል
• የድንበር-ምስል-ስፋት
  • ለፊደልዎ ምስል ስፋቱ እሴት ነው.
• ድንበር-ምስል-መውጫ
  • የድንበር ምስሉ ቦታ ከጠረፍ ሳጥኑ የሚበልጥ መጠን ይገልጻል.
• የድንበር-ምስል-ዘንግ
  • የድንበር ምስሎች ጥንዶች እና መካከለኛ ክፍሎች እንዴት መስፋት እንዳለባቸው ወይም እንደ ሚዛን ለመለየት.
• የድንበር-ምስል
  • የሁሉም ድንበሮች ምስል ባህሪያት የቁምፊ ንብረት.

ተጨማሪ የ CSS3 ባህሪያት ከድንበር እና ዳራዎች ጋር

በአንድ ገጽ ስብስብ ላይ አንድ ሳጥን ሲሰበር, የመስመር መግቻ (የአሰራር መስመር ዓምዶች) የአምድ እሰከሳ የሳጥን-ማስነሻ-መግደያ ባህሪያቸው አዲሶቹ ሳጥኖች በደብል እና በጋድል እንዴት እንደሚጠቅለሉ ይገልፃል. ዳራዎች እነዚህን ንብረቶች በመጠቀም በተደጋጋሚ በተሰሩ ሳጥኖች መካከለው ሊከፋፈሉ ይችላሉ.

በሳጥን ንጥረ ነገሮች ላይ ጥላዎችን ለማከል ጥቅም ላይ ሊውል የሚችል የሳጥን-የጅምላ ንብረትም አለ.

በ CSS3, አሁን ሰንጠረዦች ወይም ውስብስብ የገቢ መለያዎች መዋቅሮች ያለብዙ ዓምዶች በቀላሉ አንድ የድር ገጽ ማዘጋጀት ይችላሉ. የአሳሽ አካል ምን ያህል ዓምዶች እና ምን ያህል ስፋ መኖር እንዳለባቸው ለአሳሾቹ በቀላሉ ይናገሩ. በተጨማሪም ሰንጠረዦችን (ደንብ), የአምዱን ቁመት የሚሸፍኑ የጀርባ ቀለሞች, እና ጽሁፎችዎ በሁሉም ዓምዶች ውስጥ በራስ-ሰር ይፈስሳል.

CSS3 Columns - የአምዶች ቁጥር እና ስፋትን ለይ

የአምዶችዎን ብዛት እና ስፋት እንዲያወጡ የሚያስችሉዎ ሶስት አዲስ ባህሪያት አሉ:

• የአምድ-ስፋት
  • የእርስዎ ዓምዶች ስፋታቸው መሆን አለበት. ከዚያም አሳሹ ወዘተ በሚመስሉ ዓምዶች ዙሪያ ያለውን ቦታ ይሞላል.
• የአምድ-ቆጠራ
  • በገጹ ላይ የአምዶች ብዛት መለየት. ማሰሻው በክፍሉ ውስጥ እንዲመጣጠን ሰፋፊዎችን ይፈጥራል, ግን እርስዎ የገለፁት ቁጥር ብቻ ነው.
• አምዶች
  • የትራፊክ ባህሪን ወይንም ስፋቱን ወይም ቁጥርን (ወይም ሁለቱንም, ነገር ግን ብዙ ትርጉሞች) ሊገለጹ ይችላሉ.

የ CSS3 የአምድ ክፍተቶች እና መመሪያዎች

ክፍተቶች እና ደንቦች በተመሳሳይ የብዙ ካሊፎርኒያ ማሳያ / columns መካከል ይቀመጣሉ. ክፍተቶች ዓምዶችን ይገለብጧቸዋል, ነገር ግን ደንቦች ምንም ቦታ አይወስዱም. የአምድ አምድ ከክልል ክፍፍል የበዛ ከሆነ, ከአጠማዎቹ አምዶች ጋር ይደራረባል. የአና አምዶች እና ክፍተቶች አምስት አዲስ ባህሪያት አሉ:

• የዓምድ-ክፍተት
  • በአምዶች መካከል ያለውን ክፍተቶች ስፋት ይገልጻል.
• አምድ-ደንብ-ቀለም
  • የደንብቱን ቀለም ይገልጻል.
• የአምድ-ደንብ-ቅጥ
  • የደንብ አወጣጥን (ጠንካራ, ነጠብጣብ, ድርብ, ወዘተ) ነው.
• አምድ - ህግ-ስፋት
  • የደንብቱን ስፋት ይገልጻል.
• የአምድ-ደንብ
  • ሁሉንም የሶስት ዓምድ ደንብን ባህሪያት በአንድ ጊዜ የሚያብራራ የአረፍ-ሆሄ ንብረት.

የሲኤስ 3 የዓምድ ዕረፍት, የተንጠለጠሉ ዓምዶች እና የምላስ ዓምዶች

የአምዶች እሰከቶች ተመሳሳይ የሆኑ የ CSS2 አማራጮችን በፒጂ ይዘት ውስጥ መቁጠሪያን ለመግለፅ ጥቅም ላይ የሚውሉ ሲሆን, ነገር ግን በሶስት አዳዲስ ባህሪያት -ከፊት ለፊት ይቋረጡ, ይፋረዱ, እና ሰብራቸውን ያጥላሉ.

ልክ ከሠንጠረዦች ጋር እንደ ዓምድ ፍሰት ንብረቶች ያሉ ዓምዶችን ለማቀናጀት ይችላሉ. ይሄ በብዙ አምዶች ልክ እንደ ጋዜጣ ብዙ ርዝመት ያላቸው ርዕሰ ዜናዎችን እንዲፈጥሩ ያስችልዎታል.

የሚሟሉ ዓምዶች በእያንዳንዱ አምድ ውስጥ ምን ያህል ይዘት እንደሚኖራቸው ይወስናል. ሚዛናዊ ዓምዶች በእያንዳንዱ አምድ ውስጥ ተመሳሳይ መጠን ያለው ይዘት ለማኖር ይሞክሩ እና ራስ-አቡድን ሙሉ በሙሉ እስኪጨርስ ድረስ ይዘቱ ሲከሰት እና ወደ ቀጣዩ አንድ ይሂዳል.

በ CSS3 ላይ ተጨማሪ ባህሪያት በ CSS2 የተካተቱ ናቸው

በ CSS3 ውስጥ የሌሉ በ CSS3 ውስጥ በርካታ ተጨማሪ ባህሪያት አሉ, የሚከተሉትንም ጨምሮ:

• የሲኤስኤል አብነት ገጽታ አቀማመጥ እና CSS3 የግዴታ አቀማመጥ ሞጁል በሲኤስኤል ውስጥ ፍርግሞችን መፍጠር.
• CSS3 የፅሁፍ ሞዱል : የቅርፅ ጽሁፍ እና የ CSS ሽግግሮችን ይፍጠሩ.
• የ CSS3 ቀለም ሞዴል : አሁን ከብር አስይፍ.
• በቦክስ ሞዴል ላይ የተደረጉ ለውጦች : እንደ IE ትር የሚሠራ ጠቋሚ ባህሪን ያካትቱ .
• የ CSS3 የተጠቃሚ ገላጭ ሞጁል አዲስ ርግመቶችን, ለድርጊቶች ምላሾችን, አስፈላጊ መስኮችን እና እንዲያውም አንዳንድ ነገሮችን መቀየር .
• የሚዲያ መጠይቆች : የመገናኛ ጥያቄዎች እንዴት የቅጥ ሉህ እንዴት ጥቅም ላይ እንደሚውል ሲገልጹ የበለጠ ቅንጦችን ይፈቅዱልዎታል. ለምሳሌ, ከ 20ማ በላይ የመመልከቻ መያዣ ላላቸው መሳሪያዎች ብቻ የተሰራ ቅጥ ሉጠጡ ይችላሉ.
• የ CSS3 ሩቢ ሞጁል ሰነዶችን ለማብራራት የጽሑፍ ቅርፅን ለሚጠቀሙ ቋንቋዎች ድጋፍ ያቀርባል.
• CSS3 Paged Media ሞጁል : ለገመዱ ማህደረመረጃ ተጨማሪ ድጋፍ (ወረቀት, ሽፋን, ወዘተ).
• የመነጨ ይዘት : ራስጌዎች እና ግርጌዎች, የግርጌ ማስታወሻዎች እና ሌሎች በተፈቀደ ሚዲያ የተገኘው ይዘት.
• የ CSS3 የንግግር ሞጁል : በአካለ-መጠይቅ የሲኤስኤስ ለውጦች.