በአንድ ኤለመንት ውስጥ ለአንድ ነጠላ የሲ ኤስ ኤል ምደባ አልተገደቡም.
የውስጠኛ ቅጥ የሉሆች (ሲኤስኤስ) ለዚያ ኤለመንት በሚተገበሩ ባህሪዎች ላይ በማጣመድ የአንድን አባል ገጽታ እንዲገልጹ ያስችልዎታል. እነዚህ ባህሪያት አንድ ወይም መታወቂያ ወይም ክፍል ሊሆኑ ይችላሉ እና እንደ ሁሉም ባህርያት, ለተያያዙባቸው አባሎች ጠቃሚ መረጃዎችን ያክላሉ. በአንድ አባል ላይ በሚያክሉት ባህሪ ላይ በመመስረት, ለዚያ ኤለመንት እና ለድር ጣቢያው በሙሉ ለመፈለግ አስፈላጊዎቹን የእይታ ቅጦች ተግባራዊ ለማድረግ የ CSS መራጭን መጻፍ ይችላሉ.
ምንም እንኳን መታወቂያዎች ወይም መደብሮች በሲሲኤስ ሕጎች ውስጥ ለመጣጣም ቢሰሩ, ዘመናዊ የዌብ ዲዛይን ዘዴዎች በመታወቂያዎች ላይ ያሉ ክፍሎችን ይደግፋሉ, በከፊል, ምክንያቱም እነሱ እምብዛም ዝርዝር ስለማያገኙ እና ከአጠቃላይ ጋር ለመስራት የቀለለ ናቸው. አዎ, አሁንም መታወቂያዎችን የሚጠቀሙ ብዙ ጣቢያዎችን ያገኛሉ, ነገር ግን እነዚህ ባህሪያት ባለፈው ጊዜ ዘመናዊ የሆኑ ድረ-ገጾችን ሲወስዱ ከመደበኛው ይልቅ በጥቅም ላይ የዋሉ ናቸው.
በሲኤስ ውስጥ ነጠላ እና ብዙ ክፍሎች?
በአብዛኛው አጋጣሚዎች የአንድ ክፍል ባህሪን ለአንድ ኤለመንት ልትመድቡ ትችሉ ይሆናል, ነገር ግን በእውነቱ በ ID መደብ ውስጥ እርስዎ በሚገኙበት አንድ ክፍል ብቻ አይደሉም. ኤለመንት አንድ ነጠላ የመለያ አይነታ ብቻ ሊኖረው የሚችለው ኤለመንት ብዙ ክፍሎች እንዲኖሩት እና በአንዳንድ አጋጣሚዎች የእርስዎን ገጽ ቅጥ እና በቀላሉ ሊለወጥ ይችላል!
በርካታ ክፍሎችን ለአንድ ኤሌመንት ለመመደብ ከፈለጉ, ተጨማሪ ክፍሎችን ማከል እና በቀላሉ ባዶ ባህሪዎ ውስጥ ክፍተት መለየት ይችላሉ.
ለምሳሌ, ይህ አንቀጽ ሦስት ክፍሎች አሉት
pull depots featured left "> ይህ የአንቀጹ ጽሑፍ ይሆናል
ይህ የሚከተሉትን አንቀጽ ክፍሎች በአንቀፁ ላይ ያስቀምጣል
- Pullquote
- ተለይቶ የቀረበ
- ግራ
በነዚህ የእያንዳንዳቸው የክፍል እሴቶች መካከል ክፍተቶችን ያስተውሉ. እነዚህ ቦታዎች እነሱን እንደ የተለያዩ የተለያየ መደብ ያዘጋጃቸዋል. ይህ የክፍል ስሞች በውስጣቸው ቦታ ሊኖራቸው የማይገባበት ምክንያት ስለሆነ እነሱን እንደ ተለየ ክፍሎቹ ያስቀምጣቸዋል.
ለምሳሌ, ባዶ ቦታ «ተኩላ-ጥቅስ-ወደ-ግራ» ከተጠቀሙበት, አንድ የክፍል እሴቱ ይሆናል, ነገር ግን ከላይ ያሉት ምሳሌ, እነዚህ ሦስት ቃላት ከቦታ ጋር የሚለያቸው, እንደ የግል እሴት ያቀናጃቸዋል. በየትኛው የክፍል ደረጃዎች በድረ-ገጾችዎ ላይ ጥቅም ላይ እንደሚውሉ ሲወስኑ ይህንን ጽንሰ-ሃሳብ መረዳት አስፈላጊ ነው.
አንዴ የክፍል ደረጃዎችዎን በኤች ቲ ኤም ውስጥ ካገኙ በኋላ እነዚህን በ CSSዎ ውስጥ እንደ መደብድ ሊመድቡዋቸው እና ሊጨምቁት የሚፈልጉትን ቅጾች ይተግብሩ. ለምሳሌ.
.pullquote {...}
. ተለይቷል {...}
p.left {...}
በነዚህ ምሳሌዎች, የሲ.ኤስ.ኤስ መግለጫዎች እና እሴቶች ጥንድ በተርብ ጥርስ ውስጥ እንደሚሆኑ, እነዚህ ቅጦች ወደ ተገቢው መምረጫ እንዴት እንደሚተገበሩ ነው.
ማሳሰቢያ- አንድን ክፍል አንድን የተወሰነ ክፍል (ለምሳሌ, p.left) ካዘጋጁ, አሁንም እንደ አንድ የክፍል ዝርዝር አካል መጠቀም ይችላሉ; ይሁን እንጂ በሲኤስኤል ውስጥ የተገለጹትን ክፍሎች ብቻ ነው የሚወስደው. በሌላ አነጋገር, የ p.left ቅየራ የሚጠቀመው ከ "ግራኝ" የክፍል እሴት ጋር ለ "አንቀጾች" የሚሠራውን አንቀጾች ላይ ተግባራዊ ለማድረግ እየሞከረ ነው. በተቃራኒው በምርጡ ውስጥ የነበሩት ሌሎቹ ሁለት ፈታኞች የተወሰነውን የተወሰነ ክፍል አይጠቅሱም ስለዚህ እነዚህ የክፍል እሴቶች የሚጠቀም ማናቸውም አካል ላይ ይሠሩ ነበር.
የበርካታ የክፍል ጥቅሞች
ብዙ ክፍሎች የዚያ ኤለመንት ሙሉ አዲስ ቅፅ መፍጠር ሳያስፈልጋቸው ለውጦችን ለመጨመር ቀላል ያደርጉታል.
ለምሳሌ, ነገሮችን ወደ ግራ ወይም ቀኝ በፍጥነት ለመሳብ ችሎታ ሊኖርዎት ይችላል. ሁለት ክፍሎችን ለቀኝ እና ለቀኝ ብቻ በመጻፍ ታንዛቅ-ግራ; እና ተንሳሳቂ; ቀኝ; በውስጣቸው. በመቀጠል, አንድ አካል ሲኖርዎት ቀስ ብለው ማንጠልጠል ያስፈልግዎታል, ክፍሉን "በግራ" ወደ መማሪያ ዝርዝሩ ብቻ ያክሉት.
ይሁን እንጂ እዚህ ላይ አንድ ጥሩ መስመር አለ. የድረ-ገጽ ደረጃዎች የቃና እና አወቃቀይን መለየት የሚወስኑ መሆኑን ያስታውሱ. ውስጣዊ መዋቅር በኤች ቲ ኤም ኤል በኩል ሲሆን በሲኤስኤል ውስጥ ስልት ነው.
የኤች ቲ ኤም ኤል ሰነድዎ ሁሉም እንደ "ቀይ" ወይም "በግራ" ያሉ የመደርደሪያ ስሞች ባሉ አባሎች የተሞላ ከሆነ, እነዚህ አካላት ምን መሆን እንዳለባቸው የሚወስኑ ስሞች የሆኑባቸው ስሞች, በእውነተኛው መዋቅር እና ቅጥ መካከል ያለውን መስመር እያቋረጡ ነው. ለዚህ ምክንያት ያልውን የስሜል ስማቸውን ስያሜዎች ለመገደብ እሞክራለሁ.
በርካታ ክፍሎች, ንባብ እና ጃቫስክሪፕት
ብዙ መደቦችን መጠቀም ጥሩ ጠቀሜታ ብዙ ተጨማሪ የበይነመረብ እድሎችን ይሰጠዎታል.
ጃቫስክሪፕትን ማንኛውንም የመጀመሪያ ክፍሎችን ሳይወሰድ አዲስ ክፍሎችን በነባሮቹ ክፍሎች ላይ ማመልከት ይችላሉ. እንዲሁም የአንድን አባል ተዛማች ለመወሰን ክፍሎችን መጠቀም ይችላሉ. ይህ ማለት ኤለመንት የሚለው ቃል በቅደም ተከተል ማለት ምን ማለት እንደሆነ ለመወሰን ተጨማሪ ክፍሎችን ማከል ይችላሉ ማለት ነው. ይህ ማይክሮፎን እንዴት እንደሚሰራ ነው.
ብዙ የክፍል ጥቅሞች
በአዕላፍዎ ላይ ብዙ ፈርጅዎችን መጠቀም እጅግ የከፋው ጊዜው በጊዜ ሂደት ለመመልከት እና ለማስተዳደር ትንሽ ስራ ላይ ሊጥላቸው ይችላል. የትኞቹ ቅጦች በአንድ ነገር ላይ ተጽዕኖ እንደሚያሳድሩ እና ማንኛውም ስክሪፕቶች ተጽዕኖ እያሳደሩበት ለመወሰን አስቸጋሪ ሊሆን ይችላል. ዛሬ እንደ አብዛኛው መሰረታዊ ስርዓተ ክወናዎች, እንደ Bootstrap, በርካታ ክፍሎችን በበርካታ ክፍሎች ይጠቀማሉ. ይህ ኮንቴንት ከእጅህ መውጣት እና ጥንቃቄ ካላደረግህ በፍጥነት ለመስራት ከባድ ነው.
ብዙ ምድቦችን በሚጠቀሙበት ጊዜ, ለማያው ባልፈለጉት እንኳን ሌላኛው የሽምግልና ስልት ለክፍል ደረጃ የራስዎን ቅደም ተከተል ያስኬዱታል. ይህ የአንተ ዓይነቶች ለምን እንደሚገባ በሚታይበት ጊዜ እንኳን ለምን እንዳልተሟላ ለማወቅ አስቸጋሪ ሊሆን ይችላል.
በዛ አንድ ኤለመንት ላይ በተጠቀሱት ባህሪያት ላይ እንኳን ግልጽነትን ማወቅ አለብዎት.
በ Chrome ውስጥ ያሉ የድር አስተዳዳሪዎች መሳሪያዎችን በመጠቀም መሳሪያዎ እንዴት የእርስዎን ቅጦች ቅኝቶች እንደሚነካ እና ይህን የተጋጫጭ ቅጦች እና ባህሪያት ችግርን ማስወገድ ይችላሉ.
የመጀመሪያ ጽሑፍ በጄኒፈር ክርኒን. በ 8/7/17 በጄረሚ ጊራርድ የተስተካከለው