તમે દરેક ઘટક દીઠ એક સીએસએસ વર્ગ સુધી મર્યાદિત નથી.
કેસ્કેડીંગ સ્ટાઇલ શીટ્સ (CSS) તમને તે તત્વ પર લાગુ થતી વિશેષતાઓને હૂક કરીને તત્વના દેખાવને વ્યાખ્યાયિત કરવા દે છે આ લક્ષણો ક્યાં છે અને ID અથવા એક વર્ગ હોઈ શકે છે અને, બધા લક્ષણો જેમ, તેઓ જે ઘટકો સાથે જોડાયેલા છે તેમને સહાયરૂપ માહિતી ઉમેરે છે. તમે જે તત્વ પર ઍટ્રેબિટ ઉમેરશો તેના પર આધાર રાખીને, તમે આવશ્યક દ્રશ્ય શૈલીઓ લાગુ કરવા માટે એક CSS પસંદગીકાર લખી શકો છો, જે તે દેખાવ અને સમગ્ર વેબસાઇટ માટે દેખાવ અને લાગણી પ્રાપ્ત કરવા માટે જરૂરી છે.
જ્યારે ક્યાં તો ID અથવા વર્ગો તેમને સીએસએસ નિયમો સાથે hooking કરવા માટે કામ કરે છે, આધુનિક વેબ ડિઝાઇન પદ્ધતિઓ આઇડી પર ભાગો તરફેણ કરે છે, કારણ કે તેઓ એકસાથે કામ કરવા માટે ઓછા વિશિષ્ટ અને સરળ છે. હા, તમે હજી પણ ઘણી સાઇટ્સ શોધી શકશો જે આઇડીનો ઉપયોગ કરે છે, પરંતુ ભૂતકાળની સરખામણીમાં તે લક્ષણો વધુ સુસ્પષ્ટ રીતે લાગુ પાડી રહ્યા છે જ્યારે વર્ગો આધુનિક વેબ પેજ પર લેવામાં આવ્યા છે.
CSS માં એક અથવા બહુવિધ વર્ગો?
મોટાભાગના કિસ્સાઓમાં તમે એક ઘટક માટે એક વર્ગના લક્ષણને અસાઇન કરી શકો છો, પરંતુ તમે વાસ્તવમાં માત્ર એક જ વર્ગ સુધી મર્યાદિત નથી કે જે રીતે તમે ID સાથે છો. જ્યારે એક તત્વ પાસે ફક્ત એક ID લક્ષણ હોઈ શકે છે, તમે ચોક્કસપણે એક ઘટક બહુવિધ વર્ગો આપી શકો છો અને, કેટલાક કિસ્સાઓમાં, આમ કરવાથી તમારા પૃષ્ઠને શૈલીમાં સરળ બનાવશે અને વધુ લવચીક થશે!
જો તમારે તત્વને બહુવિધ વર્ગો આપવાની જરૂર હોય, તો તમે વધારાની વર્ગોને ઉમેરી શકો છો અને ફક્ત તમારા લક્ષણમાં ખાલી જગ્યા સાથે તેમને અલગ કરી શકો છો.
ઉદાહરણ તરીકે, આ ફકરામાં ત્રણ વર્ગો છે:
pullquote left left "> આ પેરાગ્રાફનો ટેક્સ્ટ હશે
આ ફકરા ટેગ પર નીચેના ત્રણ વર્ગો સુયોજિત કરે છે:
- પુલક્વોટ
- ફીચર્ડ
- ડાબે
આ વર્ગ મૂલ્યોની દરેક જગ્યા વચ્ચે જગ્યાઓ નોટિસ કરો. તે જગ્યાઓ એ છે જે તેમને અલગ અલગ, વ્યક્તિગત વર્ગો તરીકે સેટ કરે છે. આ પણ શા માટે વર્ગના નામોમાં તેમને જગ્યા નથી હોતી, કારણ કે આમ કરવાથી તેમને અલગ વર્ગો તરીકે સેટ કરી શકાય છે.
ઉદાહરણ તરીકે, જો તમે ખાલી જગ્યા વગર "પુલક્વોટ-ફીચર્ડ-ડાબે" નો ઉપયોગ કર્યો હોય, તો તે એક વર્ગનું મૂલ્ય હશે, પરંતુ ઉપરનું ઉદાહરણ, જ્યાં આ ત્રણ શબ્દો એક જગ્યાથી અલગ છે, તેમને વ્યક્તિગત મૂલ્યો તરીકે સેટ કરે છે આ વિચારને સમજવું મહત્ત્વનું છે કારણ કે તમે નક્કી કરો કે તમારા વેબપૃષ્ઠો પર કઇ વર્ગના મૂલ્યોનો ઉપયોગ કરવો.
એકવાર તમારી પાસે એચટીએમએલમાં તમારી ક્લાસ વેલ્યુ છે, પછી તમે તેને તમારા CSS માં વર્ગો તરીકે સોંપી શકો છો અને તમે ઍડ કરવા માંગો છો તે સ્ટાઇલ લાગુ કરો. દાખ્લા તરીકે.
.pullquote {...}
.featured {...}
p.left {...}
આ ઉદાહરણોમાં, સીએસએસ ઘોષણાઓ અને મૂલ્યો જોડી સર્પાકાર કૌંસની અંદર હશે, જે યોગ્ય પસંદગીકર્તાને તે શૈલીઓ પર કેવી રીતે લાગુ કરવામાં આવશે.
નોંધ - જો તમે ચોક્કસ ઘટક (ઉદાહરણ તરીકે, p.left) માટે વર્ગ સેટ કરો છો, તો તમે તેને ક્લાસની સૂચિના એક ભાગ તરીકે પણ વાપરી શકો છો; જોકે, ધ્યાન રાખો કે તે ફક્ત તે ઘટકો પર અસર કરશે જે CSS માં ઉલ્લેખિત છે. બીજા શબ્દોમાં કહીએ તો, p.left શૈલી ફક્ત આ વર્ગ સાથેના ફકરાઓને જ લાગુ કરશે કારણ કે તમારા પસંદગીકાર વાસ્તવમાં તે 'ડાબી' વર્ગના મૂલ્ય સાથે ફકરાઓને લાગુ કરવા કહે છે ''. તેનાથી વિપરીત, ઉદાહરણમાં અન્ય બે પસંદગીકારો ચોક્કસ તત્વને સ્પષ્ટ નથી કરતા, તેથી તેઓ તે વર્ગના મૂલ્યોનો ઉપયોગ કરતા કોઈપણ ઘટક પર લાગુ થશે.
મલ્ટિપલ વર્ગોના ફાયદા
મલ્ટીપલ વર્ગો તે તત્વ માટે સંપૂર્ણ નવી શૈલી બનાવતા વગર તત્વો પર વિશિષ્ટ અસરો ઉમેરવા માટે સરળ બનાવી શકે છે
ઉદાહરણ તરીકે, તમે ઝડપથી અથવા ડાબેથી જમણા તત્વોને ફ્લોટ કરવાની ક્ષમતા ધરાવી શકો છો તમે ખાલી ફ્લોટ સાથે બે વર્ગો ડાબી અને જમણી લખી શકો છો: ડાબે; અને ફ્લોટ: અધિકાર; તેની અંદર. પછી, જ્યારે પણ તમારી પાસે તત્વ હતું ત્યારે તમને ડાબી બાજુ ફ્લોટ કરવાની જરૂર છે, તો તમે વર્ગ "ડાબે" ને તેના વર્ગની સૂચિમાં ઉમેરશો.
અહીં ચાલવા માટે એક સુંદર લાઇન છે, તેમ છતાં યાદ રાખો કે વેબ ધોરણો શૈલી અને માળખાના અલગ સૂચવે છે. માળખું એચટીએમએલ દ્વારા નિયંત્રિત થાય છે જ્યારે શૈલી CSS માં હોય છે.
જો તમારા HTML દસ્તાવેજને એવા ઘટકોથી ભરવામાં આવે છે કે જેમની પાસે "લાલ" અથવા "ડાબે" જેવા ક્લાસ નામો છે, જે નામો છે જે નિર્દેશન કરે છે કે તત્વો શું છે તેના કરતાં તમે કેવી રીતે જોવું જોઈએ, તમે માળખું અને શૈલી વચ્ચેની તે રેખાને પાર કરી રહ્યાં છો. હું આ કારણોસર મારા બિન સિમેન્ટીક ક્લાસ નામોને શક્ય એટલું મર્યાદિત કરવાનો પ્રયાસ કરું છું.
મલ્ટીપલ ક્લાસ, સિમેન્ટિક્સ, અને જાવાસ્ક્રિપ્ટ
બહુવિધ વર્ગોનો ઉપયોગ કરવા માટેનો એક ફાયદો એ છે કે તે તમને વધુ અરસપરસની શક્યતાઓ આપે છે.
તમે પ્રારંભિક વર્ગોમાંથી કોઈપણને દૂર કર્યા વિના JavaScript નો ઉપયોગ કરીને અસ્તિત્વમાં રહેલા તત્વોને નવા ક્લાસ લાગુ કરી શકો છો. તત્વના સિમેન્ટિક્સને વ્યાખ્યાયિત કરવા માટે તમે ક્લાસનો પણ ઉપયોગ કરી શકો છો. આનો મતલબ એ કે તમે એ તત્વનો અર્થ શું છે તે વ્યાખ્યાયિત કરવા માટે વધારાના વર્ગો પર ઉમેરી શકો છો. માઇક્રોફોર્મ્સ કેવી રીતે કામ કરે છે તે આ છે.
મલ્ટીપલ વર્ગો ગેરફાયદા
તમારા ઘટકો પર બહુવિધ વર્ગોનો ઉપયોગ કરવા માટે સૌથી મોટો ગેરલાભ એ છે કે તે સમયને જોવા અને તેનું સંચાલન કરવા માટે થોડી અતિભારે બનાવી શકે છે. એક તત્વ પર શું શૈલીઓ અસર કરી રહ્યા છે તે નિર્ધારિત કરવાનું મુશ્કેલ બની શકે છે અને જો કોઈ સ્ક્રિપ્ટો તેના પર અસર કરી રહ્યા હોય. આજે ઉપલબ્ધ ઘણા માળખા, જેમ કે બુટસ્ટ્રેપ, બહુવિધ વર્ગો સાથે ઘટકોનો ભારે ઉપયોગ કરે છે. જો કોડ સાવચેત ન હોય તો તે કોડ ખૂબ જ ઝડપથી કામ કરવા માટે હાથથી બહાર નીકળી શકે છે.
જ્યારે તમે બહુવિધ વર્ગોનો ઉપયોગ કરો છો, ત્યારે તમે એક ક્લાસ માટે સ્ટાઇલ રાખવાની જોખમ પણ ચલાવી શકો છો, જ્યારે તમે આ માટે કોઈ ઇરાદો નથી કર્યો. આ પછી તે સમજવું મુશ્કેલ બની શકે છે કે શા માટે તમારી શૈલીઓ લાગુ પડતી નથી ત્યારે પણ જ્યારે તે દેખાય છે કે તેઓ જોઈએ.
તે વિશિષ્ટતા વિશે સાવચેત રહેવાની જરૂર છે, તે ઘટકો પર લાગુ થયેલા લક્ષણો સાથે પણ!
Chrome માં વેબમાસ્ટર સાધનો જેવા સાધનોનો ઉપયોગ કરીને, તમે વધુ સરળતાથી જોઈ શકો છો કે કેવી રીતે તમારા વર્ગો તમારી શૈલીઓ પર અસર કરી રહ્યાં છે અને વિરોધાભાસી શૈલીઓ અને વિશેષતાઓની આ સમસ્યાને દૂર કરે છે.
જેનિફર કિનાન દ્વારા મૂળ લેખ. 8/7/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત