નમૂના પ્રકાર શીટ સાથે કેસ્કેડીંગ સ્ટાઇલ શીટ્સનું વિહંગાવલોકન
જ્યારે તમે સ્ક્રેચથી વેબસાઇટ બનાવતા હોવ, ત્યારે તે મૂળભૂત શૈલીઓથી શરૂ કરવા માટે સ્માર્ટ છે તે શુધ્ધ કેનવાસ અને તાજા પીંછીઓથી શરૂ થવાના જેવું છે. વેબ ડીઝાઇનરોનો સામનો કરવો તે પહેલી સમસ્યાઓમાંની એક એવી છે કે વેબ બ્રાઉઝર તમામ અલગ અલગ છે. ડિફૉલ્ટ ફૉન્ટ કદ પ્લેટફોર્મથી પ્લેટફોર્મ કરતા અલગ છે, ડિફૉલ્ટ ફોન્ટ કુટુંબ અલગ છે, કેટલાક બ્રાઉઝર્સ શરીર ટૅગ પર માર્જિન અને પેડિંગને વ્યાખ્યાયિત કરે છે જ્યારે અન્ય લોકો નથી કરતા, અને તેથી વધુ. તમારા વેબ પૃષ્ઠો માટે ડિફૉલ્ટ શૈલીઓ નિર્ધારિત કરીને આ અસાતત્યતા મેળવો
CSS અને અક્ષર સેટ
પ્રથમ પ્રથમ વસ્તુઓ, તમારા સીએસએસ દસ્તાવેજોની પાત્રને utf-8 માં સુયોજિત કરો. તે સંભવિત છે કે તમે ડિઝાઇન કરો છો તે મોટાભાગનાં પૃષ્ઠોને અંગ્રેજીમાં લખવામાં આવે છે, કેટલાક સ્થાનીકૃત-વિવિધ ભાષાકીય અને સાંસ્કૃતિક સંદર્ભ માટે અનુકૂળ થઈ શકે છે. જ્યારે તેઓ UTF-8 પ્રક્રિયા સરળ બનાવે છે. બાહ્ય શૈલી શીટમાં અક્ષર સમૂહને સેટ કરવાથી HTTP હેડર પર પ્રાધાન્ય નહીં મળે, પરંતુ અન્ય તમામ પરિસ્થિતિઓમાં, તે ચાલશે.
અક્ષર સેટને સેટ કરવું સહેલું છે CSS દસ્તાવેજની પ્રથમ લીટી માટે લખો:
@ ચેટસેટ "utf-8";આ રીતે, જો તમે સામગ્રીની મિલકતમાં અથવા વર્ગ અને ID ને નામોમાં આંતરરાષ્ટ્રીય પાત્રોનો ઉપયોગ કરો છો, તો શૈલી પત્રક હજુ પણ યોગ્ય રીતે કામ કરશે.
પૃષ્ઠ શારીરિક સ્ટાઇલ
આગલી વસ્તુ મૂળભૂત સ્ટાઇલ શીટને માર્જિન, પેડિંગ, અને બોર્ડર્સને બહાર કાઢવા શૈલીઓની જરૂર છે. આ સુનિશ્ચિત કરે છે કે બધા બ્રાઉઝર્સ સામગ્રીને એક જ સ્થાને મૂકો અને બ્રાઉઝર અને સામગ્રી વચ્ચે કોઈ છુપાયેલા જગ્યાઓ નથી. મોટાભાગનાં વેબ પૃષ્ઠો માટે, આ ટેક્સ્ટની ધારની નજીક છે, પરંતુ અહીં પ્રારંભ કરવાનું મહત્વનું છે જેથી પૃષ્ઠભૂમિ છબીઓ અને લેટેગ પ્રભાગોને યોગ્ય રીતે રેખાંકિત કરી શકાય.
html, શરીર {ગાળો: 0 પીએક્સ; ગાદી: 0 પીએક્સ; સરહદ: 0 પીએક્સ; }ડિફૉલ્ટ ફોરગ્રાઉન્ડ અથવા ફૉન્ટ રંગને કાળા અને ડિફૉલ્ટ પૃષ્ઠભૂમિ રંગને સફેદ પર સેટ કરો જ્યારે મોટાભાગના વેબપૃષ્ઠ ડિઝાઇન્સ માટે આ મોટા ભાગે બદલાશે, પ્રથમ ધોરણ પરના આ ધોરણવાળા રંગો અને એચટીએમએલ ટેગ પર પહેલાથી પૃષ્ઠને સરળ વાંચવા અને સાથે કામ કરવા માટે બનાવે છે.
html, શરીર {રંગ: # 000; પૃષ્ઠભૂમિ: #fff; }મૂળભૂત ફૉન્ટ શૈલીઓ
ફોન્ટ કદ અને ફૉન્ટ પરિવાર એ કંઈક છે જે ડિઝાઇનને પકડી લેશે તે પછી અનિવાર્યપણે બદલાશે પરંતુ પ્રારંભિક ફૉન્ટનું કદ 1 એમ અને એરિયલ, જિનીવા અથવા કોઈ અન્ય સાન્સ-સેરીફ ફોન્ટના ડિફૉલ્ટ ફોન્ટ કુટુંબથી શરૂ થશે. ઈએમએસનો ઉપયોગ પૃષ્ઠને શક્ય તેટલી સુલભ રાખે છે, અને સ્ક્રીન પર સાન્સ-સેરીફ ફોન્ટ વધુ સુવાચ્ય છે.
html, body, p, th, td, li, dd, dt {font: 1em એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; }ત્યાં અન્ય સ્થાનો હોઈ શકે છે કે જ્યાં તમને ટેક્સ્ટ મળી શકે છે, પરંતુ p , th , td , li , dd અને dt બેઝ ફૉન્ટને વ્યાખ્યાયિત કરવા માટે એક સારી શરૂઆત છે. ફક્ત એચટીએમએલ અને બૉડીને શામેલ કરો, પરંતુ તમે ફક્ત એચટીએમએલ અથવા બોડી માટે ફોન્ટ્સ વ્યાખ્યાયિત કરો છો તો ઘણા બ્રાઉઝરો ફોન્ટ પસંદગીઓ પર ફરીથી લખે છે.
હેડલાઇન્સ
તમારી સાઇટની રૂપરેખામાં મદદ કરવા અને શોધ એન્જિનો તમારી સાઇટમાં વધુ ઊંડાઈ લાવવા માટે HTML શીર્ષકોનો ઉપયોગ કરવો મહત્વપૂર્ણ છે. શૈલીઓ વગર, તે બધા એકદમ નીચ, તેથી તે બધા પર મૂળભૂત શૈલીઓ સેટ કરો અને દરેક માટે ફોન્ટ કુટુંબ અને ફોન્ટ માપ વ્યાખ્યાયિત કરે છે.
h1, h2, h3, h4, h5, h6 {ફોન્ટ-કુટુંબ: એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }લિંક્સ ભૂલી જાઓ નહીં
લિંક રંગો સ્ટાઇલ લગભગ હંમેશાં ડિઝાઇનનો જટિલ ભાગ છે, પરંતુ જો તમે તેમને મૂળભૂત શૈલીમાં વ્યાખ્યાયિત ન કરો તો, તમે ઓછામાં ઓછા એક સ્યુડો-વર્ગો ભૂલી જશો. વાદળી પર કેટલાક નાના તફાવત સાથે તેમને વ્યાખ્યાયિત કરો અને તમારી પાસે સાઇટ વ્યાખ્યાયિત કરવા માટે તમારી પાસે રંગ રંગની છે તે પછી તેમને બદલો.
વાદળી રંગમાં લિંક્સ સેટ કરવા, સેટ કરો:
- વાદળી તરીકે લિંક્સ
- ઘેરા વાદળી તરીકે મુલાકાત લીધેલ કડીઓ
- પ્રકાશ વાદળી તરીકે લિંક્સને હૉવર કરો
- સક્રિય કડીઓ પણ પોલર વાદળી તરીકે
આ ઉદાહરણમાં બતાવ્યા પ્રમાણે:
a: લિંક {color: # 00f; } a: મુલાકાત લીધી {color: # 009; } a: હોવર {color: # 06f; } a: સક્રિય {color: # 0cf; } એકદમ નિરુપદ્રવી રંગ યોજના સાથે લિંક્સને સ્ટાઇલ કરીને તે ખાતરી કરે છે કે હું કોઈ પણ વર્ગને ભૂલી નથી શકતો અને ડિફૉલ્ટ વાદળી, લાલ અને જાંબલી કરતાં તેને થોડો ઓછો અવાજ આપે છે.સંપૂર્ણ સ્ટાઇલ શીટ
અહીં સંપૂર્ણ શૈલી શીટ છે:
@ ચેટસેટ "utf-8"; html, શરીર {ગાળો: 0 પીએક્સ; ગાદી: 0 પીએક્સ; સરહદ: 0 પીએક્સ; રંગ: # 000; પૃષ્ઠભૂમિ: #fff; } html, body, p, th, td, li, dd, dt {font: 1em એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } h1, h2, h3, h4, h5, h6 {font-family: એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: લિંક {color: # 00f; } a: મુલાકાત લીધી {color: # 009; } a: હોવર {color: # 06f; } a: સક્રિય {color: # 0cf; }