તમારી વેબસાઇટની દૃષ્ટિ સુધારવામાં શીખો
CSS સાથે શૈલી સ્વરૂપો કેવી રીતે શીખવું એ તમારી વેબસાઇટનું દેખાવ સુધારવા માટે એક સરસ રીત છે. મોટા ભાગનાં વેબ પૃષ્ઠો પર સૌથી વધુ ખરાબ વસ્તુઓમાં HTML સ્વરૂપો દલીલ કરે છે. તેઓ ઘણીવાર કંટાળાજનક અને ઉપયોગિતાવાદી છે અને શૈલીના પ્રકારમાં ખૂબ જ પ્રસ્તુત કરતા નથી.
CSS સાથે, તે બદલી શકાય છે વધુ એડવાન્સ્ડ ફોર્મ ટેગ સાથે CSS મિશ્રણ કેટલાક સરસ-દેખાતા સ્વરૂપો આપી શકે છે.
રંગો બદલો
ટેક્સ્ટની જેમ, તમે ફોર્મ તત્વોના ફોરગ્રાઉન્ડ અને બેકગ્રાઉન્ડ રંગને બદલી શકો છો.
લગભગ દરેક ફોર્મ એલિમેન્ટનો પૃષ્ઠભૂમિ રંગ બદલવા માટેની સરળ રીત ઇનપુટ ટૅગ પર બેકગ્રાઉન્ડ રંગની મિલકતનો ઉપયોગ કરવો છે. ઉદાહરણ તરીકે, આ કોડ બધા ઘટકો પર વાદળી પૃષ્ઠભૂમિ રંગ (# 9 સીએફ) લાગુ પડે છે.
ઇનપુટ {
બેકગ્રાઉન્ડ રંગ: # 9cf;
રંગ: # 000;
}
માત્ર ચોક્કસ ફોર્મ એલિમેન્ટ્સનો બેકગ્રાઉન્ડ રંગ બદલવા માટે, ફક્ત ટેક્સ્ટરી ઉમેરો અને શૈલી પસંદ કરો. દાખ્લા તરીકે:
ઇનપુટ, ટેક્સારિયા, પસંદ કરો {
બેકગ્રાઉન્ડ રંગ: # 9cf;
રંગ: # 000;
}
જો તમે તમારા બેકગ્રાઉન્ડ રંગને શ્યામ બનાવતા હોવ તો ટેક્સ્ટનો રંગ બદલવાની ખાતરી કરો વિરોધાભાસી રંગો ફોર્મ તત્વોને વધુ સુવાચ્ય બનાવવા મદદ કરે છે. ઉદાહરણ તરીકે, ટેક્સ્ટનો રંગ સફેદ હોય તો ઘાટા લાલ પાતળા રંગની ટેક્સ્ટ વધુ સરળતાથી વાંચવામાં આવે છે. ઉદાહરણ તરીકે, આ કોડ લાલ પૃષ્ઠભૂમિ પર સફેદ પાઠ્યને દર્શાવે છે.
ઇનપુટ, ટેક્સારિયા, પસંદ કરો {
બેકગ્રાઉન્ડ રંગ: # c00;
રંગ: #fff;
}
તમે ફોર્મ ટેગ પર પૃષ્ઠભૂમિ રંગ પણ મૂકી શકો છો. યાદ રાખો કે ફોર્મ ટેગ એક બ્લોક ઘટક છે , તેથી રંગ આખા લંબચોરસમાં ભરે છે, માત્ર તત્વોના સ્થાનો નહીં.
વિસ્તારને બહાર ઊભા કરવા માટે તમે બ્લોક ઘટકમાં પીળો પૃષ્ઠભૂમિ ઉમેરી શકો છો, આની જેમ:
ફોર્મ {
બેકગ્રાઉન્ડ રંગ: #ffc;
}
બોર્ડર્સ ઉમેરો
રંગો સાથે, તમે વિવિધ ફોર્મ તત્વોની સરહદો બદલી શકો છો. તમે સમગ્ર ફોર્મની આસપાસ એક સીમા ઉમેરી શકો છો ગાદી ઉમેરવાનું સુનિશ્ચિત કરો, અથવા તમારા ફોર્મ તત્વોને સરહદની બાજુમાં જમણા કરવામાં આવશે.
અહીં 5 પિક્સેલ પેડિંગની સાથે 1-પિક્સેલ કાળા સરહદ માટે કોડનું ઉદાહરણ છે:
ફોર્મ {
સરહદ: 1px ઘન # 000;
ગાદી: 5 પીએક્સ;
}
તમે માત્ર ફોર્મ પોતે કરતાં વધુની આસપાસ સરહદો મૂકી શકો છો. ઇનપુટ આઇટમ્સની સરહદને તેમને ઉભા કરવા માટે બદલો:
ઇનપુટ {
સરહદ: 2 પીએક્સ ડેશા # c00;
}
જ્યારે તમે ઇનપુટ બોકસ પર સરહદો મૂકશો ત્યારે તેઓ ઇનપુટ બોક્સ જેવા ઓછા દેખાશે ત્યારે સાવચેત રહો, અને કેટલાક લોકોને ખ્યાલ આવે કે તેઓ ફોર્મ ભરી શકે છે.
પ્રકાર લક્ષણો ભેગું
વિચાર અને કેટલાક સીએસએસ સાથે તમારા ફોર્મ એલિમેન્ટ્સને એકસાથે મૂકીને, તમે તમારી સાઇટની ડિઝાઇન અને ગોઠવણીને યોગ્ય બનાવે છે તે એક સરસ દેખાવ ફોર્મ સેટ કરી શકો છો.