પ્રકાર વર્ગો અને ID નો ઉપયોગ કરીને

વર્ગો અને ID સહાય તમારી સીએસએસ વિસ્તૃત કરો

આજે વેબ પર વેબસાઇટ્સ બનાવીને CSS (કેસ્કેડીંગ સ્ટાઇલ શીટ્સ) ની ઊંડી સમજણની જરૂર છે. આ તે સૂચનાઓ છે જે તમે બ્રાઉઝર વિંડોમાં લેઆઉટ કેવી રીતે લેશે તે નિર્ધારિત કરવા માટે વેબસાઇટ આપો છો. તમે તમારા HTML દસ્તાવેજની "સ્ટાઇલ" ની શ્રેણીને લાગુ કરો જે તમારા વેબપૃષ્ઠનું દેખાવ અને લાગશે.

દસ્તાવેજ પર તે ઉપરોક્ત શૈલીઓ લાગુ પાડવાના ઘણા માર્ગો છે, પરંતુ ઘણી વાર તમે કોઈ દસ્તાવેજમાંના કેટલાક ઘટકો પર એક શૈલીનો ઉપયોગ કરવા માગો છો, પરંતુ તે તત્વના તમામ ઉદાહરણો નથી.

તમે એક શૈલી બનાવવાની ઇચ્છા રાખી શકો છો કે જે તમે દરેક વ્યક્તિગત ઉદાહરણ માટે સ્ટાઇલ નિયમ પુનરાવર્તન કર્યા વિના, દસ્તાવેજમાં વિવિધ ઘટકો પર અરજી કરી શકો છો. આ ઇચ્છિત શૈલીઓ પ્રાપ્ત કરવા માટે, તમે વર્ગ અને ID HTML વિશેષતાઓનો ઉપયોગ કરશો. આ લક્ષણો વૈશ્વિક લક્ષણો છે જે લગભગ દરેક એચટીએમએલ ટેગ પર લાગુ કરી શકાય છે .જેનો અર્થ છે કે તમે ડિલિવિઝન, ફકરા, લિંક્સ, લિસ્ટ્સ અથવા તમારા દસ્તાવેજમાં એચટીએમએલના અન્ય કોઈપણ ટુકડાઓ સ્ટાઇલ કરી રહ્યા છો, તો તમે ક્લાસ અને આઈડી એટ્રીબ્યૂટ્સમાં ફેરબદલ કરી શકો છો. તમે આ કાર્ય પૂર્ણ મદદ!

વર્ગ પસંદગીકારો

વર્ગ પસંદગીકાર તમને બહુવિધ સ્ટાઇલને એક જ ઘટક અથવા દસ્તાવેજમાં ટૅગ સેટ કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે તમારા ટેક્સ્ટના ચોક્કસ વિભાગોને દસ્તાવેજનાં બાકીના ટેક્સ્ટથી અલગ રંગમાં બોલાવવા માગો છો. આ પ્રકાશિત વિભાગો એક "ચેતવણી" હોઈ શકે છે કે જે તમે પૃષ્ઠ પર સેટ કરી રહ્યાં છો. તમે આ પ્રકારના વર્ગો સાથે તમારા ફકરાઓને સોંપી શકો છો:

પૃષ્ઠ {color: # 0000ff; }
p.alert {color: # ff0000; }

આ શૈલીઓ તમામ ફકરાઓનો રંગ વાદળી (# 0000 એફએફ) પર સેટ કરશે, પરંતુ "ચેતવણી" ના વર્ગની વિશેષતા સાથે કોઈપણ ફકરો લાલ (# એફએફ 0000) માં રીતની જગ્યાએ હશે. આનું કારણ એ છે કે વર્ગના લક્ષણમાં પ્રથમ સીએસએસ નિયમ કરતા ઊંચી વિશિષ્ટતા છે, જે ફક્ત ટેગ પસંદગીકારનો ઉપયોગ કરે છે.

CSS સાથે કામ કરતી વખતે, વધુ વિશિષ્ટ નિયમ ઓછા ચોક્કસ એક પર ફરીથી લખશે. તેથી આ ઉદાહરણમાં, વધુ સામાન્ય નિયમ બધા ફકરાઓનો રંગ સુયોજિત કરે છે, પરંતુ બીજા, વધુ વિશિષ્ટ નિયમ કરતાં ઓવરરાઇડ કરે છે કે જે ફક્ત કેટલાક ફકરાઓ પર જ સુયોજિત કરે છે.

અહીં કેટલાક HTML માર્કઅપમાં તેનો ઉપયોગ કેવી રીતે થાય છે તે અહીં છે:

આ ફકરો વાદળીમાં પ્રદર્શિત થશે, જે પૃષ્ઠ માટે ડિફૉલ્ટ છે.

આ ફકરો પણ વાદળી હશે.

અને આ ફકરા લાલ રંગમાં દર્શાવવામાં આવશે કારણ કે વર્ગની વિશેષતા તત્વ પસંદગીકાર શૈલીમાંથી પ્રમાણભૂત વાદળી રંગ પર ફરીથી લખશે.

તે ઉદાહરણમાં, "p.alert" ની શૈલી ફક્ત "ચેતવણી" વર્ગનો ઉપયોગ કરતા ફકરા ઘટકો પર જ લાગુ પડશે. જો તમે તે HTML નો બહુવિધ HTML ઘટકોમાં ઉપયોગ કરવા માંગતા હો, તો તમે ફક્ત HTML ઘટકની શરૂઆતથી જ દૂર કરશો શૈલી કોલ (ફક્ત સમય (.) ને છોડી દેવાની ખાતરી કરો), આની જેમ:

.alert {background-color: # ff0000;}

આ વર્ગ હવે કોઈપણ ઘટક માટે ઉપલબ્ધ છે જે તેને જરૂર છે. તમારા HTML નો કોઈપણ ભાગ કે જેની પાસે "ચેતવણી" નું વર્ગ લક્ષણ મૂલ્ય છે તેને હવે આ શૈલી મળશે નીચે એચટીએમએલમાં, આપણી પાસે ફકરો અને મથાળું સ્તર 2 છે જે "ચેતવણી" વર્ગનો ઉપયોગ કરે છે. આ બંનેમાં CSS પર આધારિત લાલ રંગનો બેકગ્રાઉન્ડ રંગ હશે.

આ ફકરો લાલ લખવામાં આવશે

અને આ h2 પણ લાલ હશે.

આજે વેબસાઇટ્સ પર, વર્ગના લક્ષણોનો ઉપયોગ મોટાભાગના તત્વો પર થાય છે કારણ કે તેઓ વિશિષ્ટતાની પરિપ્રેક્ષ્યથી કામ કરવાનું સરળ છે કે જે ID છે. તમે ક્લાસ એટ્રીબ્યૂટ્સ સાથે ભરવા માટે સૌથી વર્તમાન HTML પૃષ્ઠો શોધી શકશો, જેમાંથી કેટલાકને ડોક્યુમેન્ટમાં અન્ય ઘણી વાર પુનરાવર્તિત કરવામાં આવે છે અને અન્ય જે માત્ર એક જ વાર દેખાશે.

ID પસંદગીકારો

ID પસંદકર્તા તમને ટૅગ અથવા અન્ય HTML ઘટક સાથે સાંકળતા વગર કોઈ ચોક્કસ શૈલી માટે નામ આપવા દે છે. કહો કે તમારી પાસે તમારા HTML માર્કઅપમાં વિભાગ છે જેમાં ઇવેન્ટ વિશેની માહિતી શામેલ છે.

તમે આ પ્રભાગને "ઇવેન્ટ" ના ID લક્ષણને આપી શકો છો, અને પછી જો તમે 1-પિક્સલની વિશાળ કાળા સરહદ સાથે તે ડિવિઝનને સમજવા માંગતા હો તો તમે આના જેવી ID કોડ લખો છો:

# ઇવેન્ટ {સરહદ: 1 પીએક્સ ઘન # 000; }

ID પસંદગીકારો સાથેની પડકાર એ છે કે તેઓ HTML દસ્તાવેજમાં પુનરાવર્તિત થઈ શકતા નથી. તેઓ અનન્ય હોવા જોઈએ (તમે તમારી સાઇટનાં બહુવિધ પૃષ્ઠો પર એજ ID નો ઉપયોગ કરી શકો છો, પરંતુ ફક્ત દરેક વ્યક્તિગત HTML દસ્તાવેજમાં એક જ વખત). તેથી જો તમારી પાસે આ ઇવેન્ટની 3 ઇવેન્ટ્સ હતી, તો તમારે તેમને "ઇવેન્ટ 1", "ઇવેન્ટ 2" અને "ઇવેન્ટ 3" ની ID એટ્રીબ્યુટ્સ અને તેમને દરેક શૈલીની જરૂર પડશે. તેથી, "ઇવેન્ટ" ના ઉપરોક્ત વર્ગના વિશેષતાનો ઉપયોગ કરવો અને તેને એક જ સમયે શૈલીમાં વધુ સરળ બનાવવું પડશે.

ID વિશેષતાઓ સાથેનો બીજો પડકાર એ છે કે તે વર્ગના વિશેષતાઓ કરતાં ઊંચી વિશિષ્ટતા ધરાવે છે. આનો અર્થ એ થાય કે જો તમારી પાસે પહેલાથી સ્થાપિત કરેલ શૈલીને ઓવરરાઇડ કરેલા CSS હોવાની જરૂર છે, તો તે કરવું મુશ્કેલ બની શકે છે જો તમે ID પર ખૂબ જ ભરોસો રાખ્યો હોય. તે આ કારણોસર ઘણા વેબ ડેવલપર્સે તેમના માર્કઅપમાં ID નો ઉપયોગ કરવાથી દૂર ખસેડ્યું છે, પછી ભલે તેઓ તે મૂલ્યનો એકવાર ઉપયોગ કરવા માગે છે, અને તેના બદલે લગભગ બધી શૈલીઓ માટે ઓછી-વિશિષ્ટ વર્ગના લક્ષણો તરફ વળ્યા છે.

એક એવો વિસ્તાર કે જ્યાં ID વિશિષ્ટતાઓ નાટકમાં આવે છે તે જ્યારે તમે એક પૃષ્ઠ બનાવવું હોય જે ઇન-પૃષ્ઠ એન્કર લિંક્સ ધરાવે છે. હમણાં પૂરતું, જો તમારી પાસે એક લંબન શૈલીની વેબસાઇટ છે જે લિંક્સ સાથે એક પૃષ્ઠ પરની બધી સામગ્રી ધરાવે છે જે તે પૃષ્ઠના વિવિધ ભાગોમાં "જમ્પ" કરે છે. આ ID લક્ષણો અને ટેક્સ્ટ લિંક્સનો ઉપયોગ કરીને કરવામાં આવે છે જે આ એન્કર લિંક્સનો ઉપયોગ કરે છે.

તમે ફક્ત તે લક્ષણનું મૂલ્ય, # પ્રતીકથી આગળ, લિંકના href એટ્રિએટમાં, આની જેમ ઉમેરશો:

આ લિંક છે

જ્યારે ક્લિક અથવા સ્પર્શ કર્યો હોય, ત્યારે આ લિંક પૃષ્ઠના ભાગમાં કૂદી જશે જે આ ID લક્ષણ ધરાવે છે. જો પૃષ્ઠ પરના કોઈ ઘટકએ આ ID મૂલ્યનો ઉપયોગ કર્યો ન હોય, તો લિંક કશું કરશે નહીં.

યાદ રાખો, જો તમે કોઈ સાઇટ પર લિંક-ઇન પૃષ્ઠ બનાવવું હોય તો, આઇડી વિશેષતાઓનો ઉપયોગ જરૂરી રહેશે, પરંતુ તમે હજુ પણ સામાન્ય CSS સ્ટાઇલ હેતુઓ માટે વર્ગો ચાલુ કરી શકો છો. આ રીતે હું આજે પૃષ્ઠોને માર્ક કરું છું - મેં વર્ગ પસંદગીકારોને શક્ય તેટલો વધુ ઉપયોગ કર્યો હતો અને માત્ર ત્યારે જ ID ને ચાલુ કર્યું છે જ્યારે મને એટ્રિબ્યુટની જરૂર નથી કે જે ફક્ત CSS માટે હૂક તરીકે પણ ઇન-પૃષ્ઠ લિંક તરીકે કાર્ય કરે.

જેનિફર કિનાન દ્વારા મૂળ લેખ. 8/9/17 પર જેરેમી ગીરર્ડ દ્વારા સંપાદિત