ഒരു നോട്ട്പാഡ് ശൈലി CSS ഉപയോഗിച്ച് വെബ് പേജ് സൃഷ്ടിച്ചു

10/01

CSS ശൈലി ഷീറ്റ് സൃഷ്ടിക്കുക

അതേപോലെ ഞങ്ങൾ HTML- നായി ഒരു പ്രത്യേക ടെക്സ്റ്റ് ഫയൽ സൃഷ്ടിച്ചു, നിങ്ങൾ CSS- നായി ഒരു പാഠ ഫയൽ സൃഷ്ടിക്കും. ഈ പ്രക്രിയയ്ക്കായി നിങ്ങൾക്ക് വിഷ്വൽ ആവശ്യമുണ്ടെങ്കിൽ ആദ്യ ട്യൂട്ടോറിയൽ കാണുക. നോട്ട്പാഡിൽ നിങ്ങളുടെ CSS ശൈലി ഷീറ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഘട്ടങ്ങൾ ഇതാ:

1. ഒഴിഞ്ഞ വിൻഡോ ലഭിക്കാൻ ഫയൽ> ന്യൂട്രോഡിൽ പുതിയത് തിരഞ്ഞെടുക്കുക
2. ഫയൽ ഫയൽ ക്ലിക്ക് ചെയ്തുകൊണ്ട് CSS ആയി ഫയൽ സംരക്ഷിക്കുക <ഇതായി സംരക്ഷിക്കുക ...
3. നിങ്ങളുടെ ഹാര്ഡ് ഡ്രൈവിലുള്ള my_website ഫോണ്ടിലേക്ക് നാവിഗേറ്റുചെയ്യുക
4. "എല്ലാ ഫയലുകളും" എന്നതിലേക്ക് "സംരക്ഷിക്കുക തരം:" മാറ്റുക
5. നിങ്ങളുടെ ഫയലിനെ "styles.css" എന്ന് വിളിക്കുക (ഉദ്ധരണികൾ വിട്ടുകളയുക) കൂടാതെ സംരക്ഷിക്കുക ക്ലിക്കുചെയ്യുക

02 ൽ 10

നിങ്ങളുടെ HTML ലേക്ക് CSS സ്റ്റൈൽ ഷീറ്റ് ലിങ്കുചെയ്യുക

നിങ്ങളുടെ വെബ് സൈറ്റിനായി നിങ്ങൾക്ക് ഒരു ശൈലി ഷീറ്റ് ലഭിച്ചാൽ, അത് വെബ് പേജിലേക്ക് നിങ്ങൾ ബന്ധപ്പെടുത്തേണ്ടതുണ്ട്. ഇതിനായി നിങ്ങൾ ലിങ്ക് ടാഗ് ഉപയോഗിക്കുക. നിങ്ങളുടെ pets.htm പ്രമാണത്തിന്റെ ടാഗുകൾക്കുള്ളിൽ എവിടെയും ലിങ്ക് ടാഗ് സ്ഥാപിക്കുക:

10 ലെ 03

പേജ് മാർജിനുകൾ ശരിയാക്കുക

നിങ്ങൾ വ്യത്യസ്ത ബ്രൌസറുകൾക്കായി എക്സ്.എച്ച്.റ്റി.എം.എൽ എഴുതുന്ന സമയത്ത്, നിങ്ങൾ പഠിക്കുന്ന ഒരു കാര്യം, അവർക്കെല്ലാം വ്യത്യസ്തമായ മാർജിനുകളും ചട്ടങ്ങളും എങ്ങനെ പ്രദർശിപ്പിക്കാമെന്നതാണ്. മിക്ക ബ്രൗസറുകളിലും നിങ്ങളുടെ സൈറ്റ് സമാനമാണെന്നത് ഉറപ്പുവരുത്താനുള്ള മികച്ച മാർഗം മാർജിനുകളെ ബ്രൌസർ ചോയിസിലേക്ക് സ്ഥിരമായി അനുവദിക്കാതിരിക്കലാണ്.

മുകളിലുള്ള ഇടത് മൂലയിൽ എന്റെ പേജുകൾ ആരംഭിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, ടെക്സ്റ്റിന് ചുറ്റുമുള്ള അധിക പാഡിംഗ് അല്ലെങ്കിൽ മാർജിൻ ഇല്ല. ഞാൻ ഉള്ളടക്കങ്ങൾ പാഡ് ചെയ്യാൻ പോകുകയാണെങ്കിൽ, ഞാൻ മാർജിനുകളെ പൂജ്യത്തിലേക്ക് സജ്ജീകരിച്ചു, അങ്ങനെ ഞാൻ അതേ ശൂന്യ കഷണം ആരംഭിക്കുകയാണ്. ഇതിനായി, നിങ്ങളുടെ styles.css പ്രമാണത്തിൽ ഇനിപ്പറയുന്നവ ചേർക്കുക:

html, body {
മാർജിൻ: 0px;
പാഡിംഗ്: 0px;
അതിർത്തി: 0px;
ഇടത്: 0px;
മുകളിൽ: 0px;
}

10/10

പേജിൽ ഫോണ്ട് മാറ്റുന്നത്

നിങ്ങൾ ഒരു വെബ് പേജിൽ മാറ്റാൻ ആഗ്രഹിക്കുന്ന ആദ്യത്തെ കാര്യമാണ് ഫോണ്ട്. വെബ് പേജിലെ സ്ഥിരസ്ഥിതി ഫോണ്ട് വൃത്തികെട്ടതാവാം, യഥാർത്ഥത്തിൽ വെബ് ബ്രൌസറാണ്, നിങ്ങൾ ഫോണ്ട് നിർവചിച്ചിട്ടില്ലെങ്കിൽ, നിങ്ങളുടെ പേജ് എങ്ങനെയിരിക്കും എന്ന് നിങ്ങൾക്ക് ശരിക്കും അറിയാൻ കഴിയില്ല.

സാധാരണയായി, നിങ്ങൾ ഫോണ്ടുകൾ, ഖണ്ഡികകളിലോ അല്ലെങ്കിൽ ചിലപ്പോൾ മുഴുവൻ പ്രമാണത്തിലോ മാറ്റം വരുത്താവുന്നതാണ്. ഈ സൈറ്റിനായി ഹെഡ്ഡർ, ഖണ്ഡിക തലത്തിലെ ഫോണ്ട് ഞങ്ങൾ നിർവചിക്കും. നിങ്ങളുടെ styles.css പ്രമാണത്തിലേക്ക് ഇനിപ്പറയുന്നവ ചേർക്കുക:

പി, li {
ഫോണ്ട്: 1em ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്;
}
h1 {
ഫോണ്ട്: 2 ആം ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്;
}
h2 {
ഫോണ്ട്: 1.5em ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്;
}
h3 {
ഫോണ്ട്: 1.25 ഏരിയ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്;
}

ഞാൻ ഒരു ഉപവിഭാഗം എന്ന നിലയിൽ ഖണ്ഡികകൾക്കും ലിസ്റ്റ് ഇനങ്ങൾക്കും വേണ്ടിയുള്ള എന്റെ അടിസ്ഥാന വലുപ്പമായി ഞാൻ ആരംഭിച്ചു, തുടർന്ന് എന്റെ തലക്കെട്ടുകളുടെ വലുപ്പം സജ്ജമാക്കി. ഞാൻ H4 ൽ കൂടുതൽ ആഴമുള്ള ഒരു തലക്കെട്ട് ഉപയോഗിക്കാറില്ല, എന്നാൽ നിങ്ങൾ പ്ലാൻ ചെയ്യണമെങ്കിൽ ഇത് നിങ്ങൾക്ക് ശൈലിയിൽ വയ്ക്കാം.

10 of 05

നിങ്ങളുടെ ലിങ്കുകൾ കൂടുതൽ രസകരമാക്കുന്നു

ലിങ്കുകൾക്കായി സ്വതവേയുള്ള നിറങ്ങൾ യഥാക്രമം അവിശ്വസനീയവും സന്ദർശിക്കുന്ന ലിങ്കുകൾക്കുമായി നീലയും ധൂമ്രപ്പുമാണ്. ഇത് സാധാരണമാണെങ്കിലും, അത് നിങ്ങളുടെ പേജുകളുടെ വർണ്ണ സ്കീമിൽ ഉൾപ്പെടുന്നില്ല, അതിനാൽ അത് മാറ്റാം. നിങ്ങളുടെ styles.css ഫയലിൽ, ഇനി പറയുന്നവ ചേർക്കുക:

a: ലിങ്ക് {
ഫോണ്ട്-കുടുംബം: ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്;
നിറം: # FF9900;
പാഠ-അലങ്കരണം: അടിവരയിടുക;
}
a: സന്ദര്ശിച്ച {
നിറം: # FFCC66;
}
a: hover {
പശ്ചാത്തലം: #FFFFCC;
ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്;
}

ഞാൻ മൂന്ന് ലിങ്ക് ശൈലികൾ, ഒരു: ലിങ്ക് സ്ഥിരമായി, ഒരു ലിങ്ക് സന്ദർശിച്ചു: ഞാൻ സന്ദർശിച്ചപ്പോൾ സന്ദർശിച്ചു, ഞാൻ നിറം മാറ്റിയത്, ഒരു: ഹോവർ. ഒരു: ഹോവർ ഞാൻ ഒരു പശ്ചാത്തല നിറം ലഭിക്കുകയും ക്ലിക്ക് ലേക്കുള്ള ഒരു ലിങ്ക് ഊന്നിപ്പറയുന്നത് ധൈര്യമായി പോയി.

10/06

നാവിഗേഷൻ വിഭാഗം സ്റ്റൈലിംഗ്

ഞങ്ങൾ നാവിഗേഷൻ (id = "nav") എന്ന ഭാഗത്ത് വെറും HTML യിൽ തന്നെ ചേർത്തിട്ടുണ്ട്. പ്രധാന വാചകം അതിനെ എതിർക്കുന്നില്ലെങ്കിൽ അത് എത്രമാത്രം വലുതാണെന്ന് സൂചിപ്പിക്കാനും വലതുവശത്ത് ഒരു വിശാലമായ മാർജിൻ നൽകും. ഞാനും അതിനെ ഒരു അതിർ - ചുറ്റും നിരോധിച്ചു.

നിങ്ങളുടെ CSS styles.css പ്രമാണത്തിലേക്ക് ഇനിപ്പറയുന്ന CSS ചേർക്കുക:

#nav {
വീതി: 225px;
മാർജിൻ-വലത്: 15px;
ബോർഡർ: മീഡിയം സോളിഡ് # 000000;
}
#nav li {
പട്ടിക-ശൈലി: ഒന്നുമില്ല;
}
.footer {
ഫോണ്ട്-വലിപ്പം: .75;
വ്യക്തമാക്കുക: രണ്ടും;
വീതി: 100%;
ടെക്സ്റ്റ് അലൈൻ: കേന്ദ്രം;
}

ലിസ്റ്റ് ശൈലിയിലുള്ള പ്രോപ്പർട്ടി നാവിഗേഷൻ വിഭാഗത്തിനുള്ളിൽ ബുള്ളറ്റുകൾ അല്ലെങ്കിൽ സംഖ്യകൾ ഇല്ലെങ്കിൽ, വിഭാഗത്തിൽ വിഭാഗത്തെ ചെറുതും കേന്ദ്രീകരിച്ചിരിക്കുന്നതുമായ ഫൂട്ടർ ശൈലികൾ.

07/10

പ്രധാന ഭാഗം സ്ഥാനപ്പെടുത്തുന്നതാണ്

നിങ്ങളുടെ പ്രധാന വിഭാഗത്തെ പൂർണ്ണമായ സ്ഥാനനിർണ്ണയം കൊണ്ട് സ്ഥാനപ്പെടുത്തുന്നതിലൂടെ അത് നിങ്ങളുടെ വെബ് പേജിൽ തുടരണമെന്ന് നിങ്ങൾ കൃത്യമായി തീർച്ചപ്പെടുത്തും. വലിയ മോണിറ്ററുകൾ ലഭ്യമാക്കാൻ ഞാൻ 800px വീതിച്ചു, പക്ഷേ ചെറിയൊരു മോണിറ്റർ ഉണ്ടെങ്കിൽ, ആ ഇടുങ്ങിയതാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും.

നിങ്ങളുടെ styles.css പ്രമാണത്തിൽ ഇനിപ്പറയുന്നവ പാലിക്കുക:

#main {
വീതി: 800px;
മുകളിൽ: 0px;
സ്ഥാനം: കേവലമായ;
ഇടത്: 250px;
}

08-ൽ 10

നിങ്ങളുടെ ഖണ്ഡികകൾ രൂപപ്പെടുത്തുക

ഞാൻ ഇതിനകം മുകളിൽ ഖണ്ഡിക ഫോണ്ട് സജ്ജമാക്കിയതിനു ശേഷം, ഓരോ ഖണ്ഡികയും മെച്ചപ്പെട്ട നിലയിലേക്ക് മാറ്റാൻ എനിക്ക് അല്പം അധിക "കിക്ക്" നൽകാൻ ഞാൻ ആഗ്രഹിച്ചു. ചിത്രത്തിന്റെ മാത്രം വശത്തേക്കാൾ കൂടുതൽ ഖണ്ഡിക എടുത്തുപറയുന്നു.

നിങ്ങളുടെ styles.css പ്രമാണത്തിൽ ഇനിപ്പറയുന്നവ പാലിക്കുക:

. ടോപ്ലൈൻ {
ബോർഡർ-ടോപ്പ്: കട്ടിയുള്ള ദൃഢത # FFCC00;
}

ഞാൻ ആ വിധത്തിൽ എല്ലാ ഖണ്ഡികകളും നിർവചിക്കുന്നതിനു പകരം "ടോപ്പ്ലൈൻ" എന്ന ഒരു ക്ലാസായി അത് ചെയ്യാൻ തീരുമാനിച്ചു. ഈ വിധത്തിൽ, മുകളിൽ മഞ്ഞ വരി ഇല്ലാതെ ഒരു ഖണ്ഡിക കിട്ടാൻ ഞാൻ തീരുമാനിച്ചെങ്കിൽ, ക്ലോസ് ടാഗിൽ class = "topline" എന്ന ഒരിനം എനിക്ക് ഒഴിവാക്കാം, അതിനു മുകളിലത്തെ ബോർഡർ ഇല്ല.

10 ലെ 09

ഇമേജുകൾ സ്റ്റൈലിംഗ് ചെയ്യുക

ചിത്രങ്ങൾ സാധാരണയായി അവയ്ക്കു ചുറ്റും ഒരു ബോർഡർ ഉണ്ട്, ഇമേജ് ഒരു ലിങ്കിലാണെങ്കിൽ ഇത് എല്ലായ്പ്പോഴും ദൃശ്യമാകില്ല, പക്ഷെ എന്റെ CSS സ്റ്റൈലിൽ ഒരു ക്ലാസ് ഉണ്ടായിരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. ഈ സ്റ്റൈൽഷീറ്റിനായി ഞാൻ "nobder" ക്ലാസ് സൃഷ്ടിച്ചു, പ്രമാണത്തിലെ മിക്ക ചിത്രങ്ങളും ഈ വിഭാഗത്തിന്റെ ഭാഗമാണ്.

ഈ ചിത്രങ്ങളുടെ മറ്റ് പ്രത്യേക ഭാഗം പേജിലെ അവരുടെ സ്ഥാനമാണ്. അവ അവരോടൊപ്പം ചേർത്ത് പട്ടികകളില്ലാതെ ഉപയോഗിക്കാത്ത ഖണ്ഡികയുടെ ഭാഗമായിരിക്കണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു. ഫ്ലോട്ട് കോസ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുക എന്നതാണ് ഏറ്റവും ലളിതമായ മാർഗം.

നിങ്ങളുടെ styles.css പ്രമാണത്തിൽ ഇനിപ്പറയുന്നവ പാലിക്കുക:

#main img {
ഫ്ലോട്ട്: ഇടത്;
മാർജിൻ-വലത്: 5px;
മാർജിൻ-അടിയിൽ: 15px;
}
.noborder {
അതിർത്തി: 0px ഒന്നുമില്ല;
}

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ചിത്രങ്ങളിൽ സെറ്റ് ചെയ്ത മാർജിൻ പ്രോപ്പർട്ടികൾ ഉണ്ട്, അവരോടൊപ്പമുള്ള അവശേഷിപ്പിച്ച വാചകത്തിനെതിരെ അവ തകർക്കപ്പെട്ടില്ലെന്ന് ഉറപ്പ് വരുത്തുക.

10/10 ലെ

നിങ്ങളുടെ പൂർത്തിയായ പേജ് നോക്കുക

നിങ്ങൾ നിങ്ങളുടെ CSS സംരക്ഷിച്ചു ഒരിക്കൽ നിങ്ങളുടെ വെബ് ബ്രൌസറിൽ pets.htm പേജ് റീലോഡ് ചെയ്യാം. ചിത്രത്തിൽ ക്രമീകരിച്ചിട്ടുള്ള ചിത്രങ്ങൾ, പേജിന്റെ ഇടതുവശത്ത് നാവിഗേഷൻ ശരിയായി ക്രമീകരിച്ചിരിക്കുന്നതിനാൽ നിങ്ങളുടെ പേജിൽ ഈ ചിത്രം കാണിച്ചിരിക്കുന്നതിന് സമാനമായിരിക്കണം.

ഈ സൈറ്റിനായി നിങ്ങളുടെ എല്ലാ ആന്തരിക പേജുകൾക്കും ഒരേ ഘട്ടങ്ങൾ പാലിക്കുക. നിങ്ങളുടെ നാവിഗേഷനിൽ ഓരോ പേജിനും ഒരു പേജ് ഉണ്ടായിരിക്കണം.