સ્પાન ટૅગ અને CSS સાથે શબ્દના રંગને કેવી રીતે બદલવો

CSS સાથે, દસ્તાવેજમાં ટેક્સ્ટનો રંગ સેટ કરવું સરળ છે. જો તમે તમારા પૃષ્ઠ પર ફકરો ચોક્કસ રંગમાં રેન્ડર કરવા માંગો છો, તો તમે સ્પષ્ટ કરો કે તમારી બાહ્ય શૈલી શીટમાં અને બ્રાઉઝર તે લખાણમાં તમારા ટેક્સ્ટને પ્રદર્શિત કરશે. પછી જ્યારે તમે ટેક્સ્ટના ફકરામાં માત્ર એક શબ્દ (અથવા કદાચ થોડાક શબ્દો) ના રંગને બદલવા માંગો ત્યારે શું થાય છે? તે માટે, તમારે ટૅગની જેમ એક ઇનલાઇન તત્વ વાપરવાની જરૂર પડશે.

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

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

પગલું સૂચના દ્વારા પગલું

1. તમે તમારા મનપસંદ ટેક્સ્ટ HTML એડિટરમાં અપડેટ કરવા માંગો છો તે વેબ પૃષ્ઠ ખોલો. આ એડોબ ડ્રીમવેઅર અથવા નોટપેડ, નોટપેડ ++, ટેક્સ્ટ એડિટ વગેરે જેવા સરળ ટેક્સ્ટ સંપાદક જેવા પ્રોગ્રામ હોઈ શકે છે.
2. દસ્તાવેજમાં, તે શબ્દોને સ્થિત કરો કે જેને તમે પૃષ્ઠ પર કોઈ અલગ રંગમાં પ્રદર્શિત કરવા માંગો છો. આ ટ્યુટોરીયલ માટે, કેટલાક શબ્દોનો ઉપયોગ કરો જે ટેક્સ્ટના મોટા ફકરામાં છે. તે ટેક્સ્ટનેટેગ જોડીમાં સમાવવામાં આવશે. બે શબ્દોમાંથી એક શોધો, જેના રંગને તમે સંપાદિત કરવા માગો છો.
3. તમારા કર્સરને શબ્દના પ્રથમ અક્ષર અથવા શબ્દના સમૂહમાં મૂકો જે તમે રંગ બદલવા માંગો છો. યાદ રાખો, જો તમે ડ્રીમવિવર જેવા WYSIWYG એડિટરનો ઉપયોગ કરી રહ્યા હો, તો તમે "કોડ વ્યુ" રિગથમાં કામ કરી રહ્યા છો.
4. ટેક્સ્ટને લપેટી દો જેનો રંગ અમે ટેગ સાથે બદલવા માંગીએ છીએ, જેમાં ક્લાસ એટ્રીબ્યુટનો સમાવેશ થાય છે. સમગ્ર ફકરો આના જેવી દેખાશે: આ એક ટેક્સ્ટ છે જે વાક્ય પર ધ્યાન કેન્દ્રિત કરે છે.
5. અમે હમણાં જ એક ઇનલાઇન ઘટકનો ઉપયોગ કર્યો છે, જે, તે ચોક્કસ ટેક્સ્ટને "હુક" આપવા માટે કે જે અમે સીએસએસમાં વાપરી શકીએ છીએ. અમારું આગળનું પગલું એ નવો નિયમ ઉમેરવા માટે અમારા બાહ્ય CSS ફાઇલમાં કૂદવાનું છે.

1. અમારી સીએસએસ ફાઇલમાં, ચાલો ઉમેરીએ:
   1. . ફૉકસ-ટેક્સ્ટ {
   2. રંગ: # F00;
   3. }
   4. '
2. આ નિયમ તે રંગને લાલ રંગમાં પ્રદર્શિત કરવા માટે, ઇનલાઇન તત્વને સેટ કરશે. જો અમારી પાસે પહેલાની શૈલી હતી જે અમારા દસ્તાવેજના ટેક્સ્ટને કાળા પર સેટ કરી છે, તો આ ઇનલાઇન શૈલી સ્પાન ટેક્સ્ટ પર ધ્યાન કેન્દ્રિત કરે છે અને અલગ રંગથી બહાર ઊભા કરે છે. અમે આ નિયમ માટે અન્ય શૈલીઓને પણ ઉમેરી શકીએ છીએ, કદાચ ટેક્સ્ટ ત્રાંસા અથવા બોલ્ડ બનાવવા માટે તેને વધુ પર ભાર મૂકે છે?
3. તમારા પૃષ્ઠને સાચવો
4. અસરમાં ફેરફાર જોવા માટે તમારા મનપસંદ વેબ બ્રાઉઝરમાં પૃષ્ઠને ચકાસો .
5. નોંધો કે ઉપરાંત, કેટલાક વેબ વ્યાવસાયિકો અથવા ટેગ જોડીઓ જેવા અન્ય તત્વોનો ઉપયોગ કરવાનું પસંદ કરે છે. આ ટૅગ્સ ખાસ કરીને "બોલ્ડ" અને "ત્રાંસા" માટે ઉપયોગમાં લેવાતા હતા, પરંતુ તેમને દૂર કરવામાં આવ્યાં હતાં અને સાથે બદલાયા હતા. ટેગ્સ હજી પણ આધુનિક બ્રાઉઝર્સમાં કાર્ય કરે છે, જો કે, ઘણા વેબ ડેવલપરો તેને ઇનલાઇન સ્ટાઇલ હુક તરીકે ઉપયોગ કરે છે. આ સૌથી ખરાબ અભિગમ નથી, પરંતુ જો તમે કોઇપણ નાપસંદ કરેલ તત્વોને ટાળવા માંગો છો, તો હું આ પ્રકારની સ્ટાઇલની જરૂરિયાતો માટે ટેગ સાથે ચોંટતા હોવાનો સૂચન કરું છું.

ટિપ્સ અને વસ્તુઓ માટે જુઓ આઉટ

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