માસ્ટર સ્ટાઈલશીટ સાથે ડિફૉલ્ટ બ્રાઉઝર સ્ટાઇલ કેવી રીતે દૂર કરવું?

હકીકતો આ ટિપ્સ સાથે મેળવો

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

ડિફૉલ્ટ બ્રાઉઝર શૈલીઓ મદદરૂપ થઈ શકે છે, પરંતુ ઘણા કિસ્સાઓમાં વેબ ડિઝાઇનરો આ શૈલીઓને દૂર કરવા માગે છે, જેથી તેઓ શૈલીઓ સાથે તાજી શરૂઆત કરી શકે છે કે તેઓ 100% નિયંત્રણમાં છે. આ "માસ્ટર સ્ટાઈલશીટ" તરીકે ઓળખાય છે તે ઉપયોગ કરીને કરવામાં આવે છે.

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

વૈશ્વિક ડિફોલ્ટ્સ

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

html, શરીર {ગાળો: 0 પીએક્સ; ગાદી: 0 પીએક્સ; સરહદ: 0 પીએક્સ; }

તમે ફોન્ટ સુસંગત બનાવવા માંગો છો. ફૉન્ટનું કદ 100 ટકા અથવા 1em પર સેટ કરવાનું પણ ખાતરી કરો, જેથી તમારું પૃષ્ઠ સુલભ હોય, પરંતુ કદ હજી પણ સુસંગત છે. અને લાઇન-ઊંચાઈ શામેલ કરવાની ખાતરી કરો

શરીર {ફૉન્ટ: 1EM / 1.25 એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; }

હેડલાઇન ફોર્મેટિંગ

હેડલાઇન અથવા હેડર ટેગ્સ (H1, H2, H3, વગેરે.) સામાન્ય રીતે બોલ્ડ ટેક્સ્ટમાં ડિફૉલ્ટ હોય છે જેમાં તેમને મોટા માર્જિન અથવા પેડિંગ દેખાય છે. વજન, માર્જિન અને પેડિંગ સાફ કરીને, તમે સુનિશ્ચિત કરો કે આ ટેગ્સ હજુ પણ વધારાની શૈલીઓ વિના તેમના આસપાસની ટેક્સ્ટ કરતાં મોટા (અથવા નાના) રહે છે:

h1, h2, h3, h4, h5, h6 {હાંસિયા: 0; પેડિંગ: 0; ફોન્ટ વજન: સામાન્ય; ફોન્ટ-ફેમિલી: એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; }

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

સાદા ટેક્સ્ટ ફોર્મેટિંગ

હેડલાઇન્સ ઉપરાંત, ત્યાં અન્ય ટેક્સ્ટ ટેગ્સ છે જે તમારે સાફ કરવાની ખાતરી આપવી જોઈએ. એક સમૂહ જે લોકો વારંવાર ભૂલી જાય છે તે ટેબલ સેલ ટેગ્સ (TH અને TD) અને ફોર્મ ટૅગ્સ (SELECT, TEXTAREA અને INPUT) છે. જો તમે તે તમારા શરીર અને પેરાગ્રાફ ટેક્સ્ટના સમાન કદ પર સેટ ન કરો, તો તમે કેવી રીતે બ્રાઉઝર્સ તેમને કેવી રીતે રેન્ડર કરે છે તેનાથી અસ્પષ્ટપણે આશ્ચર્ય થઈ શકે છે

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; પેડિંગ: 0; ફોન્ટ: સામાન્ય સામાન્ય સામાન્ય 1em / 1.25 એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; }

તમારા ક્વોટેશન (BLOCKQUOTE અને Q), મીતાક્ષરો, અને સંક્ષિપ્ત શબ્દોને થોડો વધારે શૈલી આપવા માટે તે સરસ છે, જેથી તેઓ થોડું વધારે ઊભા કરે છે:

બ્લોકક્વોટ {માર્જીન: 1.25ેમ; પેડિંગ: 1.25em} q {font-style: ઇટાલિક; } ટૂંકાક્ષર, abbr {cursor: help; સીમા-તળિયું: 1 પૅક્સ ડૅશ; }

લિંક્સ અને છબીઓ

તે લિંક્સ મેનેજ કરવા માટે સરળ છે અને તે ઉપરોક્ત તેજસ્વી વાદળી રેખાંકિત ટેક્સ્ટમાંથી બદલવા માટે છે. હું હંમેશાં મારી લિંક્સને અધોરેખિત રાખવાનું પસંદ કરું છું, પરંતુ જો તમે તેને અલગ રીતે પસંદ કરો છો તો તમે આ વિકલ્પો અલગથી સેટ કરી શકો છો. હું માસ્ટર સ્ટાઈલ શીટમાં રંગો પણ શામેલ કરતો નથી, કારણ કે તે ડિઝાઇન પર આધાર રાખે છે.

a, a: લિંક, a: મુલાકાત લીધી, a: સક્રિય, a: હોવર {text-decoration: underline; }

છબીઓ સાથે, બોર્ડર્સને બંધ કરવાનું મહત્વનું છે. જ્યારે મોટાભાગના બ્રાઉઝર્સ કોઈ સાદા છબીની આસપાસ સરહદ પ્રદર્શિત કરતા નથી, ત્યારે છબી સંકળાયેલી હોય છે, બ્રાઉઝર્સ સરહદ ચાલુ કરે છે. આને ઠીક કરવા માટે:

img {સરહદ: કંઈ નહીં; }

કોષ્ટકો

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

કોષ્ટક {ગાળો: 0; પેડિંગ: 0; સરહદ: કોઈ નહીં; }

ફોર્મ્સ

અન્ય તત્વોની જેમ, તમારે તમારા સ્વરૂપોની આસપાસના માર્જિન અને પેડિંગ્સને સાફ કરવું જોઈએ. બીજું એક વસ્તુ જે હું કરું છું તે ફોર્મ ટૅગને " ઇનલાઇન " તરીકે ફરીથી લખવું છે જેથી તે કોડમાં ટૅગ મૂકતી વધારાની જગ્યા ઉમેરતી નથી. અન્ય ટેક્સ્ટ ઘટકોની જેમ, હું પસંદ કરેલી ટેક્સ્ટરીઅને ઉપર ઇનપુટ માટે ફોન્ટ માહિતીને વ્યાખ્યાયિત કરું છું, જેથી તે બાકીના ટેક્સ્ટની જેમ જ છે

ફોર્મ {માર્જીન: 0; પેડિંગ: 0; પ્રદર્શન: ઇનલાઇન; }

તમારા લેબલ્સ માટે કર્સરને બદલવાનો એક સારો વિચાર પણ છે. આ લોકોને તે જોવાનું મદદ કરે છે કે લેબલ કંઈક કરશે જ્યારે તેઓ તેને ક્લિક કરશે

લેબલ {cursor: pointer; }

સામાન્ય વર્ગો

માસ્ટર સ્ટાઈલશીટના આ ભાગ માટે, તમારે વર્ગોને વ્યાખ્યાયિત કરવી જોઈએ જે તમને સમજાવશે. આ એવા કેટલાક વર્ગો છે જેનો હું વારંવાર ઉપયોગ કરું છું. નોંધ કરો કે તેઓ કોઈ ચોક્કસ તત્વ પર સેટ નથી, તેથી તમારે તેમને જે ગમે તેટલું તેમને સોંપી શકો છો:

સાફ કરો. {સાફ: બન્ને; } .floatLeft {float: left; } .floatRight {ફ્લોટ: અધિકાર; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; માર્જિન ડાબે: ઑટો; માર્જિન-જમણે: ઓટો; } / * પહોળાઈ સુયોજિત કરવાનું યાદ રાખો * / .bold {font-weight: bold; } .italic {font-style: ઇટાલિક; } .ડાઇનલાઇન {ટેક્સ્ટ-શણગાર: રેખાંકિત; } .નિવાત {હાંસિયા-ડાબે: 0; પેડિંગ-ડાબું: 0; } .nomargin {margin: 0; }. નોપ્ડિંગ {પેડિંગ: 0; } .nobullet {list-style: none; યાદી-શૈલી-છબી: કંઈ નહીં; }

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

સમગ્ર માસ્ટર સ્ટાઈલશીટ

/ * વૈશ્વિક ડિફોલ્ટ્સ * / html, બોડી {માર્જીન: 0 પીએક્સ; ગાદી: 0 પીએક્સ; સરહદ: 0 પીએક્સ; } બોડી {ફૉન્ટ: 1em / 1.25 એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } / * હેડલાઇન્સ * / એચ 1, એચ 2, એચ 3, એચ 4, એચ 5, એચ 6 {માર્જીન: 0; પેડિંગ: 0; ફોન્ટ વજન: સામાન્ય; ફોન્ટ-ફેમિલી: એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } / * ટેક્સ્ટ સ્ટાઇલ * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; પેડિંગ: 0; ફોન્ટ: સામાન્ય સામાન્ય સામાન્ય 1em / 1.25 એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } બ્લોકક્વોટ {માર્જીન: 1.25ેમ; પેડિંગ: 1.25em} q {font-style: ઇટાલિક; } ટૂંકાક્ષર, abbr {cursor: help; સીમા-તળિયું: 1 પૅક્સ ડૅશ; } નાના {font-size: .85em; } મોટા {font-size: 1.2em; } / * લિંક્સ અને છબીઓ * / a, a: link, a: મુલાકાત લીધી, a: સક્રિય, a: હોવર {text-decoration: underline; } img {સરહદ: કંઈ નહીં; } / * કોષ્ટકો * / કોષ્ટક {ગાળો: 0; પેડિંગ: 0; સરહદ: કોઈ નહીં; } / * ફોર્મ * / ફોર્મ {હાંસિયા: 0; પેડિંગ: 0; પ્રદર્શન: ઇનલાઇન; } લેબલ {cursor: pointer; } / * સામાન્ય વર્ગો * /. સાફ કરો {સ્પષ્ટ: બન્ને; } .floatLeft {float: left; } .floatRight {ફ્લોટ: અધિકાર; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; માર્જિન ડાબે: ઑટો; માર્જિન-જમણે: ઓટો; } / * પહોળાઈ સુયોજિત કરવાનું યાદ રાખો * / .bold {font-weight: bold; } .italic {font-style: ઇટાલિક; } .ડાઇનલાઇન {ટેક્સ્ટ-શણગાર: રેખાંકિત; } .નિવાત {હાંસિયા-ડાબે: 0; પેડિંગ-ડાબું: 0; } .nomargin {margin: 0; }. નોપ્ડિંગ {પેડિંગ: 0; } .nobullet {list-style: none; યાદી-શૈલી-છબી: કંઈ નહીં; }

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