સીએસએસ સ્ટાઇલના 3 પ્રકારોને સમજવું

ઇનલાઇન, એમ્બેડેડ અને બાહ્ય સ્ટાઇલ શીટ્સ: અહીં તમને જે જાણવાની જરૂર છે તે છે

ફ્રન્ટ-એન્ડ વેબસાઇટ ડેવલપમેન્ટને ઘણીવાર 3-પગવાળું સ્ટૂલ તરીકે રજૂ કરવામાં આવે છે. આ પગ નીચે મુજબ છે:

• એક સાઇટના માળખું માટે HTML ;
• દ્રશ્ય શૈલીઓ માટે CSS ;
• વર્તણૂકો માટે જાવાસ્ક્રિપ્ટ

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

1. ઇનલાઇન શૈલીઓ
2. જડિત શૈલીઓ
3. બાહ્ય શૈલીઓ

આ પ્રકારની દરેક પ્રકારની CSS શૈલીઓના લાભો અને ખામીઓ છે, તેથી ચાલો તેમને પ્રત્યેક વ્યક્તિગત રૂપે વ્યક્તિગત રીતે જુઓ.

ઇનલાઇન સ્ટાઇલ

ઇનલાઇન શૈલીઓ એવી શૈલીઓ છે જે HTML દસ્તાવેજમાં ટેગમાં સીધી લખાય છે. ઇનલાઇન શૈલીઓ ફક્ત તે વિશિષ્ટ ટૅગ પર અસર કરે છે જે તેઓ લાગુ પડે છે. અહીં એક માનક લિંક, અથવા એન્કર, ટેગ પર લાગુ ઇનલાઇન શૈલીનું ઉદાહરણ છે:

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

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

આખરે, ઇનલાઇન શૈલી ખરેખર ખરેખર યોગ્ય છે જ્યારે ખૂબ જ ઓછા ઉપયોગમાં લેવામાં આવે છે.

હકીકતમાં, મેં ભાગ્યે જ ક્યારેય મારી વેબપૃષ્ઠો પર ઇનલાઇન શૈલીઓનો ઉપયોગ કર્યો નથી

જડિત શૈલીઓ

જડિત શૈલીઓ શૈલીઓ છે જે દસ્તાવેજના વડામાં જડિત છે. જડિત શૈલીઓ તે જ પૃષ્ઠ પરના ટૅગ્સને માત્ર અસર કરે છે. જેમાં ફરી એકવાર, આ અભિગમ એ CSS ની મજબૂતાઇને નકારી છે. ત્યારથી દરેક પૃષ્ઠમાં શૈલીઓ હશે

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

સ્ટાઇલશીટ્સ કે જે માં ઉમેરવામાં આવે છે

દસ્તાવેજની તે પૃષ્ઠમાં માર્કઅપ કોડનો નોંધપાત્ર જથ્થો પણ ઉમેરે છે, જે ભવિષ્યમાં તેને મેનેજ કરવા માટેનું પૃષ્ઠ સખત બનાવી શકે છે.

જડિત સ્ટાઇલ શીટ્સનો ફાયદો એ છે કે પૃષ્ઠની સાથે તરત લોડ થવું, અન્ય બાહ્ય ફાઇલોને લોડ થવાની જરૂર હોવાને બદલે. આ ડાઉનલોડ ઝડપ અને પ્રભાવ પરિપ્રેક્ષ્યમાંથી લાભ હોઈ શકે છે.

બાહ્ય સ્ટાઇલ શીટ્સ

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

આ લાંબા ગાળાના સાઇટ મેનેજમેન્ટને વધુ સરળ બનાવે છે.

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

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

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