01 ના 10
CSS સ્ટાઇલ શીટ બનાવો
એ જ રીતે આપણે એચટીએમએલ માટે એક અલગ ટેક્સ્ટ ફાઇલ બનાવી છે, તમે CSS માટે એક ટેક્સ્ટ ફાઇલ બનાવશો. જો તમને આ પ્રક્રિયા માટે વિઝ્યુઅલ્સની જરૂર હોય તો પ્રથમ ટ્યુટોરીયલ જુઓ. નોટપેડમાં તમારી CSS સ્ટાઇલશીટ બનાવવા માટેનાં પગલાંઓ અહીં છે:
- ખાલી વિંડો મેળવવા માટે ફાઇલ> નોટપેડમાં નવું પસંદ કરો
- ફાઇલને ક્લિક કરીને સીએસએસ તરીકે ફાઇલ સાચવો ... આ રીતે સાચવો ...
- તમારી હાર્ડ ડ્રાઈવ પર my_website ફોલ્ડર પર નેવિગેટ કરો
- "બધી ફાઇલો" તરીકે "સેવ કરો પ્રકાર" બદલો
- તમારી ફાઇલ "styles.css" ને નામ આપો (અવતરણો છોડો) અને સેવ કરો ક્લિક કરો
10 ના 02
તમારા HTML પર CSS સ્ટાઇલ શીટને લિંક કરો
એકવાર તમારી વેબ સાઇટ માટે સ્ટાઇલ શીટ મળી જાય પછી, તમારે તેને વેબ પેજ પર સાંકળવું પડશે. આ કરવા માટે તમે લિંક ટેગનો ઉપયોગ કરો છો. તમારા પાળેલા પ્રાણીઓના
ટૅગ્સની અંદર ગમે ત્યાં નીચે આપેલ લિંક ટેગ મૂકો: htm દસ્તાવેજ:10 ના 03
પૃષ્ઠ માર્જિન ફિક્સ કરો
જ્યારે તમે વિવિધ બ્રાઉઝર્સ માટે એક્સએચટીએમએલ લખી રહ્યાં છો, ત્યારે તમે શીખી શકશો કે તેઓ બધા વસ્તુઓને કેવી રીતે પ્રદર્શિત કરે છે તે માટે અલગ માર્જિન અને નિયમો હોય છે. તમારી સાઇટ મોટાભાગના બ્રાઉઝર્સમાં સમાન દેખાય છે તેની ખાતરી કરવા માટેનો શ્રેષ્ઠ માર્ગ એ છે કે માર્જિન જેવી વસ્તુઓને બ્રાઉઝર પસંદગીમાં ડિફોલ્ટ કરવાની મંજૂરી આપવી નહીં.
હું ઉપલા ડાબા ખૂણામાં મારા પૃષ્ઠો શરૂ કરવાનું પસંદ કરું છું, ટેક્સ્ટની ફરતે કોઈ વધારાનું પેડિંગ અથવા માર્જિન નહીં. જો હું સમાવિષ્ટોને પેડ કરવા જઇ રહ્યો છુ, તો મેં માર્જિનને શૂન્યમાં સુયોજિત કર્યું છે જેથી હું તે જ ખાલી સ્લેટથી શરૂ કરી શકું. આ કરવા માટે, તમારા styles.css દસ્તાવેજને નીચેનામાં ઉમેરો:
html, શરીર {
માર્જિન: 0 પીએક્સ;
ગાદી: 0 પીએક્સ;
સરહદ: 0 પીએક્સ;
ડાબી: 0 પીએક્સ;
ટોચ: 0 પીએક્સ;
}
04 ના 10
પૃષ્ઠ પર ફૉન્ટ બદલવાનું
ફૉન્ટ એ ઘણીવાર પહેલી વસ્તુ છે કે જેને તમે વેબ પૃષ્ઠ પર બદલવા માગો છો. વેબ પેજ પરનો મૂળભૂત ફૉન્ટ બેડોળ બની શકે છે, અને વાસ્તવમાં તે વેબ બ્રાઉઝર પોતે જ છે, તેથી જો તમે ફોન્ટ વ્યાખ્યાયિત ન કરો, તો તમે ખરેખર જાણતા નથી કે તમારું પૃષ્ઠ આના જેવો દેખાશે.
લાક્ષણિક રીતે, તમે ફકરા પર ફોન્ટ બદલી શકો છો, અથવા કેટલીક વખત સમગ્ર દસ્તાવેજમાં પોતે. આ સાઇટ માટે આપણે હેડર અને ફકરા સ્તર પર ફોન્ટને વ્યાખ્યાયિત કરીશું. તમારા styles.css દસ્તાવેજને નીચે ઉમેરો:
પી, લી {
ફોન્ટ: 1em એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ;
}
h1 {
ફોન્ટ: 2em એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ;
}
h2 {
ફોન્ટ: 1.5મ એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ;
}
h3 {
ફોન્ટ: 1.25em એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ;
}
હું ફકરા અને સૂચિ આઇટમ્સ માટે મારું આધાર કદ તરીકે 1em સાથે શરૂ કર્યું, અને તે પછી મારા હેડલાઇન્સ માટે માપ સુયોજિત કરવા માટે વપરાય છે હું હેડલાઇનને h4 કરતા વધુ ઊંડો ઉપયોગ કરવાની અપેક્ષા રાખતો નથી, પરંતુ જો તમે ઇચ્છો છો કે તમે તે શૈલીને પણ ગમશો તો.
05 ના 10
તમારી કડીઓ વધુ રસપ્રદ બનાવી રહ્યા છે
કડીઓ માટે ડિફૉલ્ટ રંગ અનુક્રમે unvisited અને મુલાકાત લીધેલા કડીઓ માટે વાદળી અને જાંબલી છે. જ્યારે આ પ્રમાણભૂત છે, તે તમારા પૃષ્ઠોની રંગ યોજનાને ફિટ ન કરી શકે, તો ચાલો તેને બદલીએ. તમારા styles.css ફાઇલમાં, નીચેનાને ઉમેરો:
a: link {
ફોન્ટ-ફેમિલી: એરિયલ, હેલ્વેટિકા, સાન્સ-સેરીફ;
રંગ: # એફએફ 9900;
ટેક્સ્ટ-શણગાર: રેખાંકિત;
}
a: મુલાકાત લીધી {
રંગ: # એફએફસીસીસી;
}
a: હોવર {
પૃષ્ઠભૂમિ: #FFFFCC;
ફોન્ટ વજન: બોલ્ડ;
}
મેં ત્રણ લિન્ક શૈલીઓ સુયોજિત કરી, એ: ડિફોલ્ટ તરીકે કડી: a: જ્યારે તેની મુલાકાત લીધી હોય ત્યારે મુલાકાત લીધી, હું રંગ બદલી, અને: હોવર એક સાથે: હૉવર મારી પાસે લિંક પૃષ્ઠભૂમિ રંગ મળી અને તેને ક્લિક કરવા માટે એક લિંક છે પર ભાર મૂકે બોલ્ડ જાઓ.
10 થી 10
નેવિગેશન વિભાગ સ્ટાઇલ
કારણ કે આપણે HTML માં પ્રથમ નેવિગેશન (id = "nav") વિભાગ મુક્યું છે, ચાલો આપણે તેને પ્રથમ શૈલીમાં મૂકીએ. અમને સૂચવવાની જરૂર છે કે તે કેવી રીતે વિશાળ છે અને જમણી બાજુએ વિશાળ માર્જિન મૂકશે જેથી મુખ્ય ટેક્સ્ટ તેની વિરુદ્ધ બાંધી ન શકે. મેં તેની આસપાસ સરહદ પણ મૂકી.
તમારા styles.css દસ્તાવેજને નીચેના CSS ઉમેરો:
#nav {
પહોળાઈ: 225 પીએક્સ;
હાંસિયો-જમણા: 15 પીએક્સ;
સરહદ: મધ્યમ ઘન # 000000;
}
#nav li {
સૂચિ-શૈલી: કોઈ નહીં;
}
.ફ્ટર {
ફોન્ટ કદ: .75 અં;
સ્પષ્ટ: બંને;
પહોળાઈ: 100%;
ટેક્સ્ટ-સંરેખિત: કેન્દ્ર;
}
સૂચિ-શૈલીની સંપત્તિ યાદીને ગોળીઓ અથવા સંખ્યાઓ માટે, નેવિગેશન વિભાગની અંદર સુયોજિત કરે છે, અને .footer શૈલીઓ કૉપિરાઇટ વિભાગ નાના અને કેન્દ્રમાં કેન્દ્રિત છે.
10 ની 07
મુખ્ય વિભાગને સ્થાન આપવું
નિશ્ચિત સ્થિતિ સાથે તમારા મુખ્ય વિભાગની સ્થિતિને આધારે તમે ખાતરી કરી શકો છો કે તે ચોક્કસ રહેશે જ્યાં તમે તેને તમારા વેબ પૃષ્ઠ પર રહેવા માંગો છો. મોટા મોનિટરને સમાવવા માટે મેં મારી 800px પહોળું બનાવ્યું છે, પરંતુ જો તમારી પાસે એક નાનું મોનિટર છે, તો તમે તે સાંકડો બનાવવા માંગશો.
તમારા styles.css દસ્તાવેજમાં નીચે આપેલાને મૂકો:
#મુખ્ય {
પહોળાઈ: 800px;
ટોચ: 0 પીએક્સ;
સ્થિતિ: નિરપેક્ષ;
ડાબી: 250px;
}
08 ના 10
તમારા ફકરા સ્ટાઇલ
મેં ઉપરોક્ત ફકરા ફોન્ટ પહેલેથી જ સેટ કર્યા હોવાથી, હું દરેક ફકરોને થોડું વધારે "કિક" આપવા માગું છું જેથી તે વધુ સારી રીતે ઊભી થાય. મેં ટોચ પરની સરહદ મૂકીને આ કર્યું છે કે ફકત એકમાત્ર છબી કરતાં ફકરોને પ્રકાશિત કર્યો છે.
તમારા styles.css દસ્તાવેજમાં નીચે આપેલાને મૂકો:
.topline {
સીમા-ટોચ: જાડા ઘન # એફએફસીસીસી;
}
મેં તે રીતે બધા ફકરાને વ્યાખ્યાયિત કરવાને બદલે "ટોપલાઈન" નામના ક્લાસ તરીકે કરવાનું નક્કી કર્યું છે. આ રીતે, જો હું નક્કી કરું કે ટોચની પીળો લીટી વિના હું ફકરો માગો તો, હું ફકરો ટેગમાં ખાલી વર્ગ = "ટોપલાઈન" છોડી દઈ શકું છું અને તેની ટોચની સીમા નહી હશે
10 ની 09
છબીઓ સ્ટાઇલ
છબીઓ સામાન્ય રીતે તેમની આસપાસની સરહદ ધરાવે છે, જ્યાં સુધી છબી એક લિંક નથી ત્યાં સુધી તે હંમેશાં દૃશ્યક્ષમ હોતો નથી, પણ મારી CSS સ્ટાઇલશીટમાં એક વર્ગ હોવું ગમે છે જે આપમેળે સરહદ બંધ કરે છે. આ સ્ટાઇલશીટ માટે, મેં "noborder" વર્ગ બનાવ્યું છે, અને દસ્તાવેજની મોટાભાગની ઈમેજો આ વર્ગનો ભાગ છે.
આ ઈમેજોનો બીજો ખાસ ભાગ એ તેમનું સ્થાન છે. હું ઇચ્છું છું કે તે કોષ્ટકનો ઉપયોગ કરીને તેમને સંરેખિત કર્યા વગર ફકરોનો એક ભાગ બનશે. આ કરવા માટેનો સૌથી સરળ માર્ગ છે ફ્લોટ સીએસએસ પ્રોપર્ટીનો ઉપયોગ કરવો.
તમારા styles.css દસ્તાવેજમાં નીચે આપેલાને મૂકો:
#main img {
ફ્લોટ: ડાબે;
હાંસિયો-જમણે: 5 પીએક્સ;
હાંસિયો નીચે: 15px;
}
.noborder {
સરહદ: 0 પીએક્સ કંઈ નહીં;
}
જેમ તમે જોઈ શકો છો, છબીઓ પર સેટ માર્જિન પ્રોપર્ટીઓ પણ છે, ફકરામાં તેમને બાજુના લખાણવાળા લખાણ સામે તોડવામાં ન આવે તે સુનિશ્ચિત કરવા માટે.
10 માંથી 10
હવે તમારું પૂર્ણ પૃષ્ઠ જુઓ
એકવાર તમે તમારું સીએસએસ સાચવી લો તે પછી તમે તમારા વેબ બ્રાઉઝરમાં pets.htm પૃષ્ઠ ફરીથી લોડ કરી શકો છો. તમારું પૃષ્ઠ આ ચિત્રમાં બતાવેલ એકની જેમ જોવું જોઈએ, ચિત્રને ગોઠવાયેલ અને પૃષ્ઠની ડાબી બાજુએ યોગ્ય રીતે સંશોધક રાખેલું છે.
આ સાઇટ માટેના તમારા બધા આંતરિક પૃષ્ઠો માટે આ જ પગલાઓ અનુસરો. તમે તમારા નેવિગેશનમાં દરેક પૃષ્ઠ માટે એક પાનું માંગો છો.