CSS (കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ), അല്ലെങ്കിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ, ഒരു മാർക്ക്അപ്പ് ഭാഷയിൽ എഴുതിയ ഒരു പ്രമാണത്തിൻ്റെ രൂപം വിവരിക്കാൻ ഉപയോഗിക്കുന്നു. HTML, XHTML എന്നിവയിൽ എഴുതിയിട്ടുള്ള വെബ് പേജുകളുടെയും ഉപയോക്തൃ ഇൻ്റർഫേസുകളുടെയും ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നതിനും സ്റ്റൈൽ ചെയ്യുന്നതിനും CSS ശൈലികൾ സാധാരണയായി ഉപയോഗിക്കുന്നു, എന്നാൽ XML, SVG, XUL എന്നിവയുൾപ്പെടെ ഏത് തരത്തിലുള്ള XML പ്രമാണത്തിലും ഇത് പ്രയോഗിക്കാവുന്നതാണ്.
കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ ഫോർമാറ്റ് ചെയ്യുന്നതിനുള്ള നിയമങ്ങളും ആ പ്രോപ്പർട്ടികൾക്കുള്ള അനുവദനീയമായ മൂല്യങ്ങളും വിവരിക്കുന്നു. ഓരോ മൂലകത്തിനും, നിങ്ങൾക്ക് പരിമിതമായ ഒരു കൂട്ടം പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കാം; മറ്റ് പ്രോപ്പർട്ടികൾ അതിൽ ഒരു ഫലവും ഉണ്ടാക്കില്ല.
ഒരു സ്റ്റൈൽ ഡിക്ലറേഷൻ രണ്ട് ഭാഗങ്ങൾ ഉൾക്കൊള്ളുന്നു: വെബ് പേജ് ഘടകം - സെലക്ടർ, ഫോർമാറ്റിംഗ് കമാൻഡുകൾ - പരസ്യ ബ്ലോക്ക്. ഏത് ഘടകമാണ് ഫോർമാറ്റ് ചെയ്യേണ്ടതെന്ന് സെലക്ടർ ബ്രൗസറിനോട് പറയുന്നു, ഡിക്ലറേഷൻ ബ്ലോക്ക് (ചുരുണ്ട ബ്രേസുകളിലെ കോഡ്) ഫോർമാറ്റിംഗ് കമാൻഡുകൾ - പ്രോപ്പർട്ടികളും അവയുടെ മൂല്യങ്ങളും ലിസ്റ്റുചെയ്യുന്നു.
അരി. 1. CSS ശൈലിയിലുള്ള പ്രഖ്യാപന ഘടന കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളുടെ തരങ്ങളും അവയുടെ പ്രത്യേകതകളും
1. സ്റ്റൈൽ ഷീറ്റുകളുടെ തരങ്ങൾ
1.1 ബാഹ്യ ശൈലി ഷീറ്റ്
ബാഹ്യ ശൈലി ഷീറ്റ്.css എക്സ്റ്റൻഷനുള്ള ഒരു ടെക്സ്റ്റ് ഫയലാണ്, അതിൽ ഘടകങ്ങൾക്കായുള്ള ഒരു കൂട്ടം CSS ശൈലികൾ അടങ്ങിയിരിക്കുന്നു. ഒരു HTML പേജ് പോലെ ഒരു കോഡ് എഡിറ്ററിലാണ് ഫയൽ സൃഷ്ടിച്ചിരിക്കുന്നത്. HTML മാർക്ക്അപ്പ് ഇല്ലാതെ ഫയലിൽ ശൈലികൾ മാത്രമേ ഉൾക്കൊള്ളാൻ കഴിയൂ. ഒരു ടാഗ് ഉപയോഗിച്ച് ഒരു വെബ് പേജിലേക്ക് ഒരു ബാഹ്യ സ്റ്റൈൽ ഷീറ്റ് ബന്ധിപ്പിച്ചിരിക്കുന്നു , വിഭാഗത്തിനുള്ളിൽ സ്ഥിതിചെയ്യുന്നു
. സൈറ്റിൻ്റെ എല്ലാ പേജുകൾക്കും ഈ ശൈലികൾ പ്രവർത്തിക്കുന്നു.ക്രമത്തിൽ ഒന്നിലധികം ടാഗുകൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് ഓരോ വെബ് പേജിലേക്കും ഒന്നിലധികം സ്റ്റൈൽ ഷീറ്റുകൾ അറ്റാച്ചുചെയ്യാനാകും , മീഡിയ ടാഗ് ആട്രിബ്യൂട്ടിൽ ഈ സ്റ്റൈൽ ഷീറ്റിൻ്റെ ഉദ്ദേശ്യം സൂചിപ്പിക്കുന്നു. rel="stylesheet" ലിങ്കിൻ്റെ തരം വ്യക്തമാക്കുന്നു (സ്റ്റൈൽ ഷീറ്റിലേക്കുള്ള ലിങ്ക്).
ടൈപ്പ്="ടെക്സ്റ്റ്/സിഎസ്എസ്" ആട്രിബ്യൂട്ട് HTML5 സ്റ്റാൻഡേർഡിന് ആവശ്യമില്ല, അതിനാൽ അത് ഒഴിവാക്കാവുന്നതാണ്. ആട്രിബ്യൂട്ട് ഇല്ലെങ്കിൽ, സ്ഥിര മൂല്യം type="text/css" ആണ്.
1.2 ആന്തരിക ശൈലികൾ
ആന്തരിക ശൈലികൾഒരു വിഭാഗത്തിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്
HTML പ്രമാണം ടാഗിനുള്ളിൽ നിർവചിച്ചിരിക്കുന്നു. ബാഹ്യ ശൈലികളേക്കാൾ ആന്തരിക ശൈലികൾ മുൻഗണന നൽകുന്നു, എന്നാൽ ഇൻലൈൻ ശൈലികളേക്കാൾ താഴ്ന്നതാണ് (സ്റ്റൈൽ ആട്രിബ്യൂട്ട് വഴി വ്യക്തമാക്കിയത്)....
1.3 അന്തർനിർമ്മിത ശൈലികൾ
നമ്മൾ എഴുതുമ്പോൾ ഇൻലൈൻ ശൈലികൾ, സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് എലമെൻ്റ് ടാഗിനുള്ളിൽ ഞങ്ങൾ HTML ഫയലിലേക്ക് CSS കോഡ് എഴുതുന്നു:
ഈ വാചകം ശ്രദ്ധിക്കുക.
അത്തരം ശൈലികൾ അവ സജ്ജീകരിച്ചിരിക്കുന്ന ഘടകത്തെ മാത്രമേ ബാധിക്കുകയുള്ളൂ.
1.4 @ഇറക്കുമതി നിയമം
@ഇറക്കുമതി നിയമംബാഹ്യ ശൈലി ഷീറ്റുകൾ ലോഡ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. @ഇറക്കുമതി നിർദ്ദേശം പ്രവർത്തിക്കുന്നതിന്, മറ്റെല്ലാ നിയമങ്ങൾക്കും മുമ്പായി അത് സ്റ്റൈൽ ഷീറ്റിൽ (ബാഹ്യമോ ആന്തരികമോ) ദൃശ്യമാകണം:
വെബ് ഫോണ്ടുകൾ ഉൾപ്പെടുത്താനും @import റൂൾ ഉപയോഗിക്കുന്നു:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. സെലക്ടർമാരുടെ തരങ്ങൾ
സെലക്ടർമാർഒരു വെബ് പേജിൻ്റെ ഘടനയെ പ്രതിനിധീകരിക്കുന്നു. വെബ് പേജ് ഘടകങ്ങൾ ഫോർമാറ്റ് ചെയ്യുന്നതിനുള്ള നിയമങ്ങൾ സൃഷ്ടിക്കാൻ അവ സഹായിക്കുന്നു. സെലക്ടറുകൾ ഘടകങ്ങൾ, അവയുടെ ക്ലാസുകൾ, ഐഡൻ്റിഫയറുകൾ, അതുപോലെ കപട-ക്ലാസ്സുകളും കപട ഘടകങ്ങളും ആകാം.
2.1 യൂണിവേഴ്സൽ സെലക്ടർ
ഏതെങ്കിലും HTML ഘടകവുമായി പൊരുത്തപ്പെടുന്നു. ഉദാഹരണത്തിന്, * (മാർജിൻ: 0;) എല്ലാ സൈറ്റ് ഘടകങ്ങൾക്കും മാർജിനുകൾ പുനഃസജ്ജമാക്കും. സെലക്ടർ ഒരു കപട-ക്ലാസ് അല്ലെങ്കിൽ കപട-ഘടകവുമായി സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം: *: after (CSS ശൈലികൾ) , *: ചെക്ക് ചെയ്ത (CSS ശൈലികൾ) .
2.2 എലമെൻ്റ് സെലക്ടർ
സൈറ്റിൻ്റെ എല്ലാ പേജുകളിലും നൽകിയിരിക്കുന്ന തരത്തിലുള്ള എല്ലാ ഘടകങ്ങളും ഫോർമാറ്റ് ചെയ്യാൻ എലമെൻ്റ് സെലക്ടറുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, h1 (font-family: Lobster, cursive;) എല്ലാ h1 തലക്കെട്ടുകൾക്കും മൊത്തത്തിലുള്ള ഫോർമാറ്റിംഗ് ശൈലി സജ്ജമാക്കും.
2.3 ക്ലാസ് സെലക്ടർ
ക്ലാസ് സെലക്ടർമാർ, ഒരേ ക്ലാസ് നാമത്തിൽ സ്ഥാപിച്ചിരിക്കുന്ന ഒന്നോ അതിലധികമോ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു പല സ്ഥലങ്ങൾപേജുകൾ അല്ലെങ്കിൽ സൈറ്റിൻ്റെ വ്യത്യസ്ത പേജുകളിൽ. ഉദാഹരണത്തിന്, ഹെഡ്‌ലൈൻ ക്ലാസ് ഉപയോഗിച്ച് ഒരു ശീർഷകം സൃഷ്ടിക്കാൻ, ഓപ്പണിംഗ് ടാഗിലേക്ക് മൂല്യ തലക്കെട്ടിനൊപ്പം ക്ലാസ് ആട്രിബ്യൂട്ട് ചേർക്കേണ്ടതുണ്ട്
കൂടാതെ നിർദ്ദിഷ്ട ക്ലാസിനായി ശൈലി സജ്ജമാക്കുക. ഒരു ക്ലാസ് ഉപയോഗിച്ച് സൃഷ്ടിച്ച ശൈലികൾ മറ്റ് ഘടകങ്ങളിലേക്ക് പ്രയോഗിക്കാൻ കഴിയും, ആ തരത്തിലായിരിക്കണമെന്നില്ല.
ഉപയോഗിക്കുന്നതിനുള്ള നിർദ്ദേശങ്ങൾ പെഴ്സണൽ കമ്പ്യൂട്ടർ
.തലക്കെട്ട് (ടെക്സ്റ്റ് രൂപാന്തരം: വലിയക്ഷരം; നിറം: ഇളംനീല; )2.4 ഐഡി സെലക്ടർ
ഐഡി സെലക്ടർ നിങ്ങളെ ഫോർമാറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു ഒന്ന്പ്രത്യേക ഘടകം. ഐഡി അദ്വിതീയമായിരിക്കണം കൂടാതെ ഒരു പേജിൽ ഒരിക്കൽ മാത്രമേ ദൃശ്യമാകൂ.
#സൈഡ്ബാർ (വീതി: 300px; ഫ്ലോട്ട്: ഇടത്; )
2.5 ഡിസെൻഡൻ്റ് സെലക്ടർ
ഒരു കണ്ടെയ്നർ എലമെൻ്റിനുള്ളിലെ ഘടകങ്ങളിൽ ഡിസെൻഡൻ്റ് സെലക്ടർമാർ ശൈലികൾ പ്രയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, ul li (ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം: വലിയക്ഷരം;) - എല്ലാ ul ഘടകങ്ങളുടെയും കുട്ടികളായ എല്ലാ ലി ഘടകങ്ങളും തിരഞ്ഞെടുക്കും.
ഒരു പ്രത്യേക ഘടകത്തിൻ്റെ പിൻഗാമികളെ ഫോർമാറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ ആ ഘടകത്തിന് ഒരു സ്റ്റൈൽ ക്ലാസ് നൽകേണ്ടതുണ്ട്:
p.first a (നിറം: പച്ച;) - ഈ ശൈലി ഒന്നാം ക്ലാസിലെ ഖണ്ഡികയുടെ പിൻഗാമികളുടെ എല്ലാ ലിങ്കുകളിലും പ്രയോഗിക്കും;
p .first a (color: green;) - നിങ്ങൾ ഒരു സ്‌പെയ്‌സ് ചേർക്കുകയാണെങ്കിൽ, ഘടകത്തിൻ്റെ ചൈൽഡ് ആയ ഏതെങ്കിലും .ഫസ്റ്റ് ക്ലാസ് ടാഗിനുള്ളിൽ സ്ഥിതിചെയ്യുന്ന ലിങ്കുകൾ സ്റ്റൈൽ ചെയ്യപ്പെടും.
ആദ്യം a (നിറം: പച്ച;) - class.first നിയുക്തമാക്കിയ മറ്റൊരു ഘടകത്തിനുള്ളിൽ സ്ഥിതിചെയ്യുന്ന ഏത് ലിങ്കിലേക്കും ഈ ശൈലി പ്രയോഗിക്കും.
2.6 ചൈൽഡ് സെലക്ടർ
ചൈൽഡ് എലമെൻ്റ് എന്നത് അതിൽ അടങ്ങിയിരിക്കുന്ന മൂലകത്തിൻ്റെ നേരിട്ടുള്ള കുട്ടിയാണ്. ഒരു മൂലകത്തിന് നിരവധി ഉണ്ടായിരിക്കാം കുട്ടികളുടെ ഘടകങ്ങൾ, കൂടാതെ ഓരോ ഘടകത്തിനും ഒരു രക്ഷകർത്താവ് മാത്രമേ ഉണ്ടാകൂ. ചൈൽഡ് സെലക്ടർപാരൻ്റ് എലമെൻ്റിന് തൊട്ടുപിന്നാലെ ചൈൽഡ് എലമെൻ്റ് വരികയും അവയ്ക്കിടയിൽ മറ്റ് ഘടകങ്ങളൊന്നും ഇല്ലാതിരിക്കുകയും ചെയ്താൽ മാത്രം ശൈലികൾ പ്രയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അതായത്, ചൈൽഡ് എലമെൻ്റ് മറ്റെന്തെങ്കിലും ഉള്ളിലല്ല.
ഉദാഹരണത്തിന്, p > strong എന്നത് p മൂലകത്തിൻ്റെ കുട്ടികളായ എല്ലാ ശക്തമായ ഘടകങ്ങളും തിരഞ്ഞെടുക്കും.
2.7 സഹോദരി സെലക്ടർ
ഒരു പൊതു രക്ഷിതാവിനെ പങ്കിടുന്ന ഘടകങ്ങൾക്കിടയിൽ സഹോദരബന്ധം സംഭവിക്കുന്നു. സെലക്ടർമാർ സഹോദരി ഘടകങ്ങൾഒരേ തലത്തിലുള്ള ഘടകങ്ങളുടെ ഒരു ഗ്രൂപ്പിൽ നിന്ന് ഘടകങ്ങൾ തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
h1 + p - ഏതെങ്കിലും ടാഗിന് ശേഷം ഉടൻ തന്നെ എല്ലാ ആദ്യ ഖണ്ഡികകളും തിരഞ്ഞെടുക്കും
ശേഷിക്കുന്ന ഖണ്ഡികകളെ ബാധിക്കാതെ;
h1 ~ p - ഏതെങ്കിലും h1 ശീർഷകത്തിൻ്റെ സഹോദരിയായ എല്ലാ ഖണ്ഡികകളും ഉടൻ തന്നെ തിരഞ്ഞെടുക്കും.
2.8 ആട്രിബ്യൂട്ട് സെലക്ടർ
ആട്രിബ്യൂട്ട് സെലക്ടർമാർ ആട്രിബ്യൂട്ട് നാമം അല്ലെങ്കിൽ ആട്രിബ്യൂട്ട് മൂല്യം അടിസ്ഥാനമാക്കി ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നു:
[ആട്രിബ്യൂട്ട്] - നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് അടങ്ങിയിരിക്കുന്ന എല്ലാ ഘടകങ്ങളും - alt ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയ എല്ലാ ഘടകങ്ങളും;
സെലക്ടർ[ആട്രിബ്യൂട്ട്] - നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് അടങ്ങുന്ന ഈ തരത്തിലുള്ള ഘടകങ്ങൾ, img - ആൾട്ട് ആട്രിബ്യൂട്ട് വ്യക്തമാക്കിയ ചിത്രങ്ങൾ മാത്രം;
സെലക്ടർ [ആട്രിബ്യൂട്ട് = "മൂല്യം"] - ഒരു നിർദ്ദിഷ്ട മൂല്യമുള്ള നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ട് അടങ്ങുന്ന ഈ തരത്തിലുള്ള ഘടകങ്ങൾ, img - പൂവ് എന്ന വാക്ക് ഉൾക്കൊള്ളുന്ന എല്ലാ ചിത്രങ്ങളും;
സെലക്ടർ[ആട്രിബ്യൂട്ട്~="മൂല്യം"] - ഭാഗികമായി അടങ്ങിയിരിക്കുന്ന ഘടകങ്ങൾ നൽകിയ മൂല്യം, ഉദാഹരണത്തിന്, ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിക്കുന്ന ഒരു ഘടകത്തിനായി നിരവധി ക്ലാസുകൾ വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, p - ഖണ്ഡികകൾ ക്ലാസിൻ്റെ പേരിൽ ഫീച്ചർ അടങ്ങിയിരിക്കുന്നു ;
സെലക്ടർ[ആട്രിബ്യൂട്ട്|==========================================================]
സെലക്ടർ[ആട്രിബ്യൂട്ട്^="മൂല്യം"] - ആട്രിബ്യൂട്ട് മൂല്യം നിർദ്ദിഷ്ട മൂല്യത്തിൽ ആരംഭിക്കുന്ന ഘടകങ്ങൾ, a - http:// ൽ ആരംഭിക്കുന്ന എല്ലാ ലിങ്കുകളും ;
സെലക്ടർ[ആട്രിബ്യൂട്ട്$="മൂല്യം"] - ആട്രിബ്യൂട്ട് മൂല്യം അവസാനിക്കുന്ന ഘടകങ്ങൾ നിർദ്ദിഷ്ട മൂല്യം, img - png ഫോർമാറ്റിലുള്ള എല്ലാ ചിത്രങ്ങളും;
സെലക്ടർ[ആട്രിബ്യൂട്ട്*="മൂല്യം"] - ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ എവിടെയും നിർദ്ദിഷ്ട പദം അടങ്ങിയിരിക്കുന്ന ഘടകങ്ങൾ, a - പുസ്തകം ഉൾക്കൊള്ളുന്ന എല്ലാ ലിങ്കുകളും.
2.9 കപട-ക്ലാസ് സെലക്ടർ
HTML ടാഗുകളിൽ യഥാർത്ഥത്തിൽ ഘടിപ്പിച്ചിട്ടില്ലാത്ത ക്ലാസുകളാണ് കപട ക്ലാസുകൾ. ഒരു ഇവൻ്റ് സംഭവിക്കുമ്പോഴോ ഒരു പ്രത്യേക നിയമം അനുസരിക്കുമ്പോഴോ ഘടകങ്ങളിലേക്ക് CSS നിയമങ്ങൾ പ്രയോഗിക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു. കപട ക്ലാസുകൾ ഇനിപ്പറയുന്ന ഗുണങ്ങളുള്ള മൂലകങ്ങളെ വിശേഷിപ്പിക്കുന്നു:
: ഹോവർ - മൗസ് കഴ്സർ ഹോവർ ചെയ്തിരിക്കുന്ന ഏതെങ്കിലും ഘടകം;
:ഫോക്കസ് - കീബോർഡ് ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്ത അല്ലെങ്കിൽ മൗസ് ഉപയോഗിച്ച് സജീവമാക്കിയ ഒരു സംവേദനാത്മക ഘടകം;
:ആക്ടീവ് - ഉപയോക്താവ് സജീവമാക്കിയ ഘടകം;
:സാധുവായ - നിർദ്ദിഷ്ട ഡാറ്റാ തരത്തിന് അനുസൃതമായി ബ്രൗസറിൽ ഉള്ളടക്കങ്ങൾ പരിശോധിച്ച ഫോം ഫീൽഡുകൾ;
:invalid — നിർദ്ദിഷ്ട ഡാറ്റ തരവുമായി പൊരുത്തപ്പെടാത്ത ഉള്ളടക്കമുള്ള ഫോം ഫീൽഡുകൾ;
: പ്രാപ്തമാക്കി - എല്ലാം സജീവ ഫീൽഡുകൾരൂപങ്ങൾ;
: disabled - തടഞ്ഞ ഫോം ഫീൽഡുകൾ, അതായത്, ഒരു നിഷ്ക്രിയ അവസ്ഥയിൽ;
: ഇൻ-റേഞ്ച് - നിർദ്ദിഷ്ട ശ്രേണിയിലുള്ള മൂല്യങ്ങളുള്ള ഫോം ഫീൽഡുകൾ;
: ഔട്ട്-ഓഫ്-റേഞ്ച് - നിർദ്ദിഷ്ട പരിധിക്കുള്ളിൽ മൂല്യങ്ങൾ ഇല്ലാത്ത ഫോം ഫീൽഡുകൾ;
:lang() - നിർദ്ദിഷ്ട ഭാഷയിൽ വാചകം ഉള്ള ഘടകങ്ങൾ;
:not(selector) - നിർദ്ദിഷ്ട സെലക്ടർ അടങ്ങിയിട്ടില്ലാത്ത ഘടകങ്ങൾ - ക്ലാസ്, ഐഡൻ്റിഫയർ, പേര് അല്ലെങ്കിൽ ഫോം ഫീൽഡ് തരം -:not() ;
പ്രമാണത്തിൽ പരാമർശിച്ചിരിക്കുന്ന # ചിഹ്നമുള്ള ഒരു ഘടകമാണ് ടാർഗെറ്റ്;
:checked — തിരഞ്ഞെടുത്ത (ഉപയോക്താവ് തിരഞ്ഞെടുത്ത) ഫോം ഘടകങ്ങൾ.
2.10 ഘടനാപരമായ കപട-ക്ലാസ് സെലക്ടർ
ഘടനാപരമായ കപട ക്ലാസുകൾ പരാൻതീസിസിൽ വ്യക്തമാക്കിയ പാരാമീറ്റർ അനുസരിച്ച് ചൈൽഡ് ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നു:
: nth-child (odd) - വിചിത്രമായ ശിശു ഘടകങ്ങൾ;
:nth-child(പോലും) - പോലും ശിശു ഘടകങ്ങൾ;
:nth-child(3n) - കുട്ടികളിലെ ഓരോ മൂന്നാമത്തെ മൂലകവും;
:nth-child(3n+2) - രണ്ടാമത്തെ കുട്ടി (+2) മുതൽ ആരംഭിക്കുന്ന എല്ലാ മൂന്നാമത്തെ ഘടകങ്ങളും തിരഞ്ഞെടുക്കുന്നു ;
:nth-child(n+2) - രണ്ടാമത്തേതിൽ നിന്ന് ആരംഭിക്കുന്ന എല്ലാ ഘടകങ്ങളും തിരഞ്ഞെടുക്കുന്നു;
:nth-child(3) - മൂന്നാമത്തെ ശിശു ഘടകം തിരഞ്ഞെടുക്കുന്നു;
:nth-last-child() - ചൈൽഡ് ഘടകങ്ങളുടെ പട്ടികയിൽ, ഉള്ള ഘടകം തിരഞ്ഞെടുക്കുന്നു നിർദ്ദിഷ്ട സ്ഥാനം, സമാനമായത്: nth-child() , എന്നാൽ അവസാനത്തേതിൽ നിന്ന് ആരംഭിക്കുന്നത്, വിപരീത ദിശയിൽ;
:ആദ്യ കുട്ടി - ടാഗിൻ്റെ ആദ്യ ചൈൽഡ് എലമെൻ്റ് മാത്രം സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു;
: ലാസ്റ്റ്-ചൈൽഡ് - ടാഗിൻ്റെ അവസാന ചൈൽഡ് എലമെൻ്റ് ഫോർമാറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു;
:Only-child - ഏക ശിശു ഘടകമായ ഒരു ഘടകം തിരഞ്ഞെടുക്കുന്നു;
:ശൂന്യം - കുട്ടികളില്ലാത്ത ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നു;
:root - പ്രമാണത്തിൻ്റെ റൂട്ട് ആയ ഘടകം തിരഞ്ഞെടുക്കുന്നു - html ഘടകം.
2.11 ഘടനാപരമായ തരം കപട-ക്ലാസ് സെലക്ടർ
ചൂണ്ടിക്കാണിക്കുക നിർദ്ദിഷ്ട തരംകുട്ടികളുടെ ടാഗ്:
:nth-of-type() - :nth-child() ന് സമാനമായ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നു, എന്നാൽ മൂലകത്തിൻ്റെ തരം മാത്രം കണക്കിലെടുക്കുന്നു;
:ആദ്യ-ഓഫ്-തരം - തന്നിരിക്കുന്ന തരത്തിലുള്ള ആദ്യത്തെ കുട്ടിയെ തിരഞ്ഞെടുക്കുന്നു;
: last-of-type - ഈ തരത്തിലുള്ള അവസാന ഘടകം തിരഞ്ഞെടുക്കുന്നു;
:nth-last-of-type() - നിർദിഷ്ട സ്ഥാനം അനുസരിച്ച് മൂലകങ്ങളുടെ പട്ടികയിൽ നൽകിയിരിക്കുന്ന തരത്തിലുള്ള ഒരു ഘടകം തിരഞ്ഞെടുക്കുന്നു, അവസാനം മുതൽ ആരംഭിക്കുന്നു;
:only-of-type - പാരൻ്റ് എലമെൻ്റിൻ്റെ ചൈൽഡ് എലമെൻ്റുകളിൽ നിർദ്ദിഷ്ട തരത്തിലുള്ള ഒരേയൊരു ഘടകം തിരഞ്ഞെടുക്കുന്നു.
2.12 സ്യൂഡോ എലമെൻ്റ് സെലക്ടർ
കപട ഘടകങ്ങൾ ഉള്ളടക്കം ചേർക്കാൻ ഉപയോഗിക്കുന്നു, ഇത് ഉള്ളടക്ക പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ജനറേറ്റുചെയ്യുന്നു:
:ആദ്യ-അക്ഷരം - ഓരോ ഖണ്ഡികയുടെയും ആദ്യ അക്ഷരം തിരഞ്ഞെടുക്കുന്നു, ഘടകങ്ങൾ തടയുന്നതിന് മാത്രം ബാധകമാണ്;
:ആദ്യ വരി - മൂലക വാചകത്തിൻ്റെ ആദ്യ വരി തിരഞ്ഞെടുക്കുന്നു, ഘടകങ്ങൾ തടയുന്നതിന് മാത്രം ബാധകമാണ്;
:മുമ്പ് - മൂലകത്തിന് മുമ്പ് സൃഷ്ടിച്ച ഉള്ളടക്കം ചേർക്കുന്നു;
:after - മൂലകത്തിന് ശേഷം സൃഷ്ടിച്ച ഉള്ളടക്കം ചേർക്കുന്നു.
3. സെലക്ടർ കോമ്പിനേഷൻ
ഫോർമാറ്റിംഗിനായി ഘടകങ്ങൾ കൂടുതൽ കൃത്യമായി തിരഞ്ഞെടുക്കുന്നതിന്, നിങ്ങൾക്ക് സെലക്ടറുകളുടെ കോമ്പിനേഷനുകൾ ഉപയോഗിക്കാം:
img:nth-of-type(even) - ഇതര വാചകത്തിൽ css എന്ന വാക്ക് അടങ്ങിയ എല്ലാ ഇരട്ട അക്കമുള്ള ചിത്രങ്ങളും തിരഞ്ഞെടുക്കും.
4. സെലക്ടർമാരെ ഗ്രൂപ്പുചെയ്യൽ
ഒരേ ശൈലി ഒരേ സമയം ഒന്നിലധികം ഘടകങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, ഡിക്ലറേഷൻ്റെ ഇടതുവശത്ത് കോമകളാൽ വേർതിരിച്ച ആവശ്യമായ സെലക്ടറുകൾ നിങ്ങൾ ലിസ്റ്റ് ചെയ്യേണ്ടതുണ്ട്:
H1, h2, p, span (നിറം: തക്കാളി; പശ്ചാത്തലം: വെള്ള; )
5. പാരമ്പര്യവും കാസ്കേഡും
പൈതൃകവും കാസ്കേഡും CSS-ലെ രണ്ട് അടിസ്ഥാന ആശയങ്ങളാണ്, അവ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്നു. മൂലകങ്ങൾക്ക് അവയുടെ രക്ഷിതാവിൽ നിന്ന് (അവ ഉൾക്കൊള്ളുന്ന മൂലകം) ഗുണങ്ങൾ ലഭിക്കുന്നിടത്താണ് അനന്തരാവകാശം. കാസ്കേഡ് എങ്ങനെ പ്രത്യക്ഷപ്പെടുന്നു വത്യസ്ത ഇനങ്ങൾസ്‌റ്റൈൽ ഷീറ്റുകൾ ഒരു ഡോക്യുമെൻ്റിൽ പ്രയോഗിക്കുന്നു, എങ്ങനെ പരസ്പരവിരുദ്ധമായ നിയമങ്ങൾ പരസ്പരം മറികടക്കുന്നു.
5.1 അനന്തരാവകാശം
അനന്തരാവകാശംഒരു പൂർവ്വികനിൽ നിന്ന് അതിൻ്റെ പിൻഗാമികളിലേക്ക് ചില ഗുണങ്ങൾ കൈമാറ്റം ചെയ്യപ്പെടുന്ന സംവിധാനമാണ്. CSS സ്പെസിഫിക്കേഷൻ പേജിൻ്റെ ടെക്സ്റ്റ് ഉള്ളടക്കവുമായി ബന്ധപ്പെട്ട വർണ്ണം, ഫോണ്ട്, ലെറ്റർ-സ്പെയ്സിംഗ്, ലൈൻ-ഹൈറ്റ്, ലിസ്റ്റ്-സ്റ്റൈൽ, ടെക്സ്റ്റ്-അലൈൻ, ടെക്സ്റ്റ്-ഇൻഡൻ്റ്, ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം, വിസിബിലിറ്റി, വൈറ്റ് എന്നിങ്ങനെയുള്ള പ്രോപ്പർട്ടികളുടെ അനന്തരാവകാശം അനുവദിക്കുന്നു. -സ്പേസും പദ-അകലവും. മിക്ക കേസുകളിലും, ഇത് സൗകര്യപ്രദമാണ്, കാരണം നിങ്ങൾ വെബ് പേജിലെ എല്ലാ ഘടകത്തിനും ഫോണ്ട് വലുപ്പവും ഫോണ്ട് ഫാമിലിയും സജ്ജീകരിക്കേണ്ടതില്ല.
ബ്ലോക്ക് ഫോർമാറ്റിംഗുമായി ബന്ധപ്പെട്ട പ്രോപ്പർട്ടികൾ പാരമ്പര്യമായി ലഭിക്കുന്നതല്ല. പശ്ചാത്തലം, ബോർഡർ, ഡിസ്പ്ലേ, ഫ്ലോട്ടും ക്ലിയറും, ഉയരവും വീതിയും, മാർജിൻ, ഏറ്റവും കുറഞ്ഞ ഉയരവും വീതിയും, ഔട്ട്‌ലൈൻ, ഓവർഫ്ലോ, പാഡിംഗ്, പൊസിഷൻ, ടെക്സ്റ്റ് ഡെക്കറേഷൻ, വെർട്ടിക്കൽ അലൈൻ, ഇസഡ് ഇൻഡെക്‌സ് എന്നിവയാണ് ഇവ.
നിർബന്ധിത അനന്തരാവകാശം
ഉപയോഗിച്ച് കീവേഡ് inherit ഒരു മൂലകത്തെ അതിൻ്റെ പാരൻ്റ് എലമെൻ്റിൻ്റെ ഏതെങ്കിലും പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കാൻ നിർബന്ധിക്കും. സ്ഥിരസ്ഥിതിയായി പാരമ്പര്യമായി ലഭിക്കാത്ത പ്രോപ്പർട്ടികളിൽ പോലും ഇത് പ്രവർത്തിക്കുന്നു.
എങ്ങനെ CSS ശൈലികൾ സജ്ജീകരിച്ചു പ്രവർത്തിക്കുന്നു
1) പാരൻ്റ് എലമെൻ്റിൽ നിന്ന് ശൈലികൾ പാരമ്പര്യമായി ലഭിക്കും (പൈതൃകമായി ലഭിച്ച പ്രോപ്പർട്ടികൾ അല്ലെങ്കിൽ പാരമ്പര്യ മൂല്യം ഉപയോഗിച്ച്);
2) മുകളിലെ പട്ടികയിൽ സ്ഥിതി ചെയ്യുന്ന ശൈലികൾ അസാധുവാക്കുന്നതിന് താഴെയുള്ള സ്റ്റൈൽ ഷീറ്റിൽ സ്ഥിതിചെയ്യുന്ന ശൈലികൾ;
3) ഒരു ഘടകത്തിൽ നിന്നുള്ള ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും വ്യത്യസ്ത ഉറവിടങ്ങൾ. ബ്രൗസർ ഡെവലപ്പർ മോഡിൽ ഏതൊക്കെ ശൈലികളാണ് പ്രയോഗിക്കുന്നതെന്ന് നിങ്ങൾക്ക് പരിശോധിക്കാം. ഇത് ചെയ്യുന്നതിന്, മൂലകത്തിൽ ക്ലിക്കുചെയ്യുക വലത് ക്ലിക്കിൽമൗസ്, "കോഡ് കാണുക" (അല്ലെങ്കിൽ സമാനമായത്) തിരഞ്ഞെടുക്കുക. വലത് കോളം ഈ ഘടകത്തിൽ സജ്ജീകരിച്ചിട്ടുള്ളതോ പാരൻ്റ് എലമെൻ്റിൽ നിന്ന് പാരമ്പര്യമായി ലഭിച്ചതോ ആയ എല്ലാ പ്രോപ്പർട്ടികളും അവ വ്യക്തമാക്കിയിട്ടുള്ള സ്റ്റൈൽ ഫയലുകൾക്കൊപ്പം ലിസ്റ്റ് ചെയ്യും, കൂടാതെ സീരിയൽ നമ്പർകോഡിൻ്റെ വരികൾ.
അരി. 2. ഡെവലപ്പർ മോഡ് ഇൻ ഗൂഗിൾ ബ്രൗസർക്രോം 4) ഒരു ശൈലി നിർവചിക്കുമ്പോൾ, നിങ്ങൾക്ക് സെലക്ടറുകളുടെ ഏത് സംയോജനവും ഉപയോഗിക്കാം - ഒരു എലമെൻ്റ് സെലക്ടർ, ഒരു എലമെൻ്റ് സ്യൂഡോ-ക്ലാസ്, ഒരു ക്ലാസ് അല്ലെങ്കിൽ ഒരു എലമെൻ്റ് ഐഡൻ്റിഫയർ.
div (ബോർഡർ: 1px സോളിഡ് #eee;) #wrap (വീതി: 500px;).box (float: left;).clear (clear: two;)
5.2 കാസ്കേഡ്
കാസ്കേഡിംഗ്ഒരേ ഘടകത്തിന് വ്യത്യസ്ത CSS നിയമങ്ങൾ പ്രയോഗിക്കുന്ന സാഹചര്യത്തിൽ അന്തിമ ഫലത്തെ നിയന്ത്രിക്കുന്ന ഒരു സംവിധാനമാണ്. പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്ന ക്രമം നിർണ്ണയിക്കുന്ന മൂന്ന് മാനദണ്ഡങ്ങളുണ്ട്-! പ്രധാനപ്പെട്ട നിയമം, പ്രത്യേകത, സ്റ്റൈൽ ഷീറ്റുകൾ ഉൾപ്പെടുത്തിയിരിക്കുന്ന ക്രമം.
റൂൾ! പ്രധാനമാണ്
പ്രോപ്പർട്ടി മൂല്യത്തിന് തൊട്ടുപിന്നാലെ ചേർക്കുന്ന! പ്രധാനപ്പെട്ട കീവേഡ് ഉപയോഗിച്ച് ഒരു നിയമത്തിൻ്റെ ഭാരം വ്യക്തമാക്കാം, ഉദാഹരണത്തിന്, സ്പാൻ (ഫോണ്ട്-ഭാരം: ബോൾഡ്! പ്രധാനം;) . ക്ലോസിംഗ് ബ്രാക്കറ്റിന് മുമ്പായി ഡിക്ലറേഷൻ്റെ അവസാനം ഒരു സ്‌പെയ്‌സ് ഇല്ലാതെ നിയമം സ്ഥാപിക്കണം. അത്തരം പ്രഖ്യാപനം മറ്റെല്ലാ നിയമങ്ങളേക്കാളും മുൻഗണന നൽകും. സ്റ്റൈൽ ഫയലിലേക്ക് നേരിട്ട് ആക്‌സസ്സ് ഇല്ലാത്ത സാഹചര്യത്തിൽ ഒരു പ്രോപ്പർട്ടി മൂല്യം റദ്ദാക്കാനും ഒരു കൂട്ടം ഘടകങ്ങളിൽ നിന്ന് ഒരു ഘടകത്തിനായി പുതിയൊരെണ്ണം സജ്ജമാക്കാനും ഈ നിയമം നിങ്ങളെ അനുവദിക്കുന്നു.
പ്രത്യേകത
ഓരോ നിയമത്തിനും, ബ്രൗസർ കണക്കുകൂട്ടുന്നു സെലക്ടർ പ്രത്യേകത, ഒരു മൂലകത്തിന് വൈരുദ്ധ്യമുള്ള സ്വത്ത് പ്രഖ്യാപനങ്ങളുണ്ടെങ്കിൽ, ഏറ്റവും കൂടുതൽ പ്രത്യേകതയുള്ള നിയമം കണക്കിലെടുക്കുന്നു. നിർദ്ദിഷ്ട മൂല്യത്തിന് നാല് ഭാഗങ്ങളുണ്ട്: 0, 0, 0, 0. സെലക്ടർ പ്രത്യേകത ഇനിപ്പറയുന്ന രീതിയിൽ നിർവചിച്ചിരിക്കുന്നു:
ഐഡിക്ക്, 0, 1, 0, 0 ചേർത്തിരിക്കുന്നു;
ക്ലാസ്സ് 0, 0, 1, 0 എന്നിവ ചേർത്തു;
ഓരോ മൂലകത്തിനും വ്യാജ മൂലകത്തിനും, 0, 0, 0, 1 എന്നിവ ചേർത്തിരിക്കുന്നു;
ഒരു ഘടകത്തിലേക്ക് നേരിട്ട് ചേർത്ത ഒരു ഇൻലൈൻ ശൈലിക്ക് - 1, 0, 0, 0 ;
ഒരു സാർവത്രിക സെലക്ടർക്ക് ഒരു പ്രത്യേകതയും ഇല്ല.
H1 (നിറം: ഇളംനീല;) /*പ്രത്യേകത 0, 0, 0, 1*/ em (നിറം: വെള്ളി;) /*പ്രത്യേകത 0, 0, 0, 1*/ h1 em (നിറം: സ്വർണ്ണം;) /*പ്രത്യേകത: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (നിറം: നീല;) /* പ്രത്യേകത: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .സൈഡ്ബാർ (നിറം: ഗ്രേ;) /* പ്രത്യേകത 0, 0, 1, 0 */ #സൈഡ്ബാർ (നിറം: ഓറഞ്ച്;) /*പ്രത്യേകത 0, 1, 0, 0*/ li#സൈഡ്ബാർ (നിറം: അക്വാ;) /*പ്രത്യേകത: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
തൽഫലമായി, കൂടുതൽ നിർദ്ദിഷ്ട നിയമങ്ങൾ മൂലകത്തിന് ബാധകമാകും. ഉദാഹരണത്തിന്, ഒരു മൂലകത്തിന് 0, 0, 0, 2, 0, 1, 0, 1 എന്നീ മൂല്യങ്ങളുള്ള രണ്ട് പ്രത്യേകതകൾ ഉണ്ടെങ്കിൽ, രണ്ടാമത്തെ നിയമം വിജയിക്കും.
ബന്ധിപ്പിച്ച പട്ടികകളുടെ ക്രമം
നിങ്ങൾക്ക് ഒന്നിലധികം ബാഹ്യ സ്റ്റൈൽ ഷീറ്റുകൾ സൃഷ്ടിക്കാനും അവയെ ഒരു വെബ് പേജിലേക്ക് ബന്ധിപ്പിക്കാനും കഴിയും. ഒരു ഘടകത്തിനായുള്ള വ്യത്യസ്ത പ്രോപ്പർട്ടി മൂല്യങ്ങൾ വ്യത്യസ്ത പട്ടികകളിൽ കണ്ടെത്തിയാൽ, അതിൻ്റെ ഫലമായി, ചുവടെ ലിസ്റ്റുചെയ്തിരിക്കുന്ന സ്റ്റൈൽ ഷീറ്റിൽ കാണുന്ന നിയമം മൂലകത്തിന് ബാധകമാകും.
1. എന്താണ് CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ?
ഹലോ എൻ്റെ പ്രിയ വായനക്കാർ. CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾക്കൊപ്പം പ്രവർത്തിക്കാൻ സമർപ്പിച്ചിരിക്കുന്ന സൈറ്റിൻ്റെ ഒരു പുതിയ ഭാഗം തുറക്കാൻ ഞാൻ തീരുമാനിച്ചു.
അതിനാൽ, എന്താണ് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ css?
css(ഇംഗ്ലീഷ്) കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ — കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) ഒരു മാർക്ക്അപ്പ് ഭാഷ ഉപയോഗിച്ച് എഴുതിയ ഒരു പ്രമാണത്തിൻ്റെ രൂപം വിവരിക്കുന്നതിനുള്ള ഒരു ഭാഷയാണ്.
ഒരു തുടക്കക്കാരന് മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കുന്നതിന്, html വെബ്സൈറ്റ് പേജുകൾക്കായി മനോഹരവും എളുപ്പത്തിൽ എഡിറ്റ് ചെയ്യാവുന്നതുമായ ഡിസൈനുകൾ സൃഷ്ടിക്കുന്നതിനാണ് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ css രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.
കഴിഞ്ഞ നൂറ്റാണ്ടിലെ 90 കളിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ആദ്യമായി ഉപയോഗിച്ചു. എന്നാൽ ആദ്യം അവ ഇപ്പോഴുള്ളതുപോലെ ജനപ്രിയമായിരുന്നില്ല, കാരണം വ്യത്യസ്ത ബ്രൗസറുകൾ വ്യത്യസ്തമായി css ഉപയോഗിക്കുന്ന html പേജുകൾ കാണുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്തു.
കുറച്ച് സമയത്തിന് ശേഷം, സൈറ്റ് ബിൽഡർമാരുടെ ജോലി ലളിതമാക്കാൻ, ബ്രൗസറുകൾ അതേ മാനദണ്ഡങ്ങളിലേക്ക് "അഡാപ്റ്റഡ്" ചെയ്യാൻ തുടങ്ങി. ഇന്ന്, ഇൻ്റർനെറ്റ് പേജുകൾ കാണാൻ ഉപയോഗിക്കുന്ന മിക്കവാറും എല്ലാ പ്രോഗ്രാമുകളും CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുന്ന സൈറ്റുകളെ തുല്യമായി പുനർനിർമ്മിക്കുന്നു.
എൻ്റെ നിരീക്ഷണങ്ങൾ!!!എൻ്റെ വ്യക്തിപരമായ നിരീക്ഷണങ്ങൾ അനുസരിച്ച്, അത്തരം ഏറ്റവും പുതിയ പതിപ്പുകൾ Opera, Mazilla ForeFox, Maxthon, Google Chrome എന്നിവ പോലുള്ള ബ്രൗസറുകൾ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർകാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുന്ന പേജുകൾ ഏതാണ്ട് സമാനമായി കാണിക്കുന്നു, എന്നാൽ ബ്രൗസറുകൾ അങ്ങനെയല്ലെങ്കിൽ കഴിഞ്ഞ തലമുറകൾ, അപ്പോൾ വെബ്സൈറ്റ് പേജുകൾ തന്നെ വ്യത്യസ്തമായി കാണപ്പെടും. നിങ്ങളുടെ സൈറ്റ് മിക്കവാറും എല്ലാ ബ്രൗസറുകളിലും ഒരേ പോലെ കാണുന്നതിന്, ഉണ്ട് പ്രത്യേക സാങ്കേതികവിദ്യകൾകാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ക്രമീകരിക്കുന്നു.
അതിനാൽ നമുക്ക് സൃഷ്ടിക്കാൻ തുടങ്ങാം പുതിയ മേശശൈലികൾ, അത് ഞങ്ങളുടെ പ്രമാണവുമായി ബന്ധിപ്പിക്കുക.
2. ഒരു കാസ്കേഡിംഗ് css സ്റ്റൈൽ ഷീറ്റ് എങ്ങനെ സൃഷ്ടിക്കാം?
ലേഖനത്തിൻ്റെ ഈ ഭാഗത്ത് ഞങ്ങൾ ഒരു കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് സൃഷ്ടിക്കുകയും ഏറ്റവും ലളിതമായ html പേജിലേക്ക് ബന്ധിപ്പിക്കുകയും ചെയ്യും.
അതിനാൽ, നമുക്ക് ഇത് ചെയ്യാം:
1.
ഞങ്ങളുടെ html പേജും കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റും അടങ്ങുന്ന ഒരു ഫോൾഡർ ഞങ്ങൾ സൃഷ്ടിക്കുന്നു.
എൻ്റെ ഫോൾഡർ "css" എന്ന് വിളിക്കപ്പെടട്ടെ
2. ഞങ്ങൾ സൃഷ്ടിക്കുന്നു ലളിതമായ htmlപേജ് (index.html). ഇത് എങ്ങനെ ചെയ്യാമെന്ന് നിങ്ങൾക്ക് വായിക്കാം.
3. ഇപ്പോൾ ഞങ്ങൾ ഒരു ലളിതമായ ടെക്സ്റ്റ് ഡോക്യുമെൻ്റ് സൃഷ്ടിക്കുന്നു (ഒരു html പേജ് സൃഷ്ടിക്കുന്നത് പോലെ), അതിനെ style.css എന്ന് വിളിക്കുക.
ഫലമായി, നിങ്ങൾക്ക് ഇത് ലഭിക്കണം:
അത്രയേയുള്ളൂ, അടങ്ങുന്ന ഫയൽ css ശൈലികൾതയ്യാറാണ്.
ഇപ്പോൾ നമുക്ക് സൃഷ്ടിച്ച സ്റ്റൈൽ ഷീറ്റ് index.html ഫയലിലേക്ക് ബന്ധിപ്പിക്കാം.
3. ഒരു കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് css എങ്ങനെ ബന്ധിപ്പിക്കും?
അതിനാൽ, ഒരു html പേജിലേക്ക് ഒരു സ്റ്റൈൽ ഷീറ്റ് ബന്ധിപ്പിക്കുന്നതിന്, നിങ്ങൾ ടാഗിലെ index.html ഫയലിൽ വേണം
ടാഗ് ചേർക്കുക:
ഇവിടെ ആട്രിബ്യൂട്ടിൽ href="style.css" css ശൈലികളുള്ള ഫയലിലേക്കുള്ള പാത വ്യക്തമാക്കിയിരിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, css, index.html ഫയലുകൾ ഒരേ ഫോൾഡറിലാണ്.
ഉദാഹരണത്തിന്, ഞങ്ങളുടെ index.html ഫയലിൽ ഇനിപ്പറയുന്ന കോഡ് ഉണ്ടെങ്കിൽ:
പ്രധാനം!!! വഴിയിൽ, നോട്ട്പാഡിൽ index.html ഫയൽ സേവ് ചെയ്യുമ്പോൾ എൻകോഡിംഗ് 1251 (ANSI-Cyrillic) ആയി സജ്ജീകരിക്കാൻ മറക്കരുത്. കാരണം നിങ്ങൾ ഇത് ചെയ്യാതെ മറ്റൊരു എൻകോഡിംഗിൽ ഫയൽ സംരക്ഷിക്കുകയാണെങ്കിൽ, ബ്രൗസർ നിങ്ങൾക്ക് ടെക്സ്റ്റുകൾക്ക് പകരം "ഡൂഡിൽ" കാണിക്കും.
എല്ലാം ശരിയായി ചെയ്തു സംരക്ഷിക്കുകയാണെങ്കിൽ, ബ്രൗസറിൽ നിങ്ങൾ ഇനിപ്പറയുന്നവ കാണും:
അത്രയേയുള്ളൂ, index.html ഫയൽ സൃഷ്ടിച്ചു, കൂടാതെ css സ്റ്റൈൽ ഷീറ്റുകളും ഇതിലേക്ക് ബന്ധിപ്പിച്ചിരിക്കുന്നു.
ഇപ്പോൾ നമുക്ക് css സ്റ്റൈൽ ഷീറ്റുകളുടെ പ്രവർത്തനം പരിശോധിക്കാം.
അതിനാൽ, നമുക്ക് ഏറ്റവും ലളിതമായ കാര്യങ്ങളിൽ നിന്ന് ആരംഭിച്ച് ടാഗ് സജ്ജീകരിക്കാം
ഒരു പുതിയ ശൈലി, html പേജിൻ്റെ പശ്ചാത്തല ചിത്രം, പേജിൻ്റെ പശ്ചാത്തല നിറം (പേജ് സന്ദർശകൻ്റെ ബ്രൗസറിൽ ചിത്രങ്ങൾ അപ്രാപ്‌തമാക്കിയിട്ടുണ്ടെങ്കിൽ), മുകളിലും താഴെയുമുള്ള മാർജിനുകൾ, ഡിഫോൾട്ട് ഫോണ്ട്, അതിൻ്റെ വലുപ്പം, നിറം എന്നിവ നിർവചിക്കുന്നു.ഒരു പശ്ചാത്തല ചിത്രം സജ്ജീകരിക്കുന്നതിന്, ഞങ്ങളുടെ ഫയലുകൾ ഉള്ള ഫോൾഡറിൽ നിങ്ങൾ അത് അടയാളപ്പെടുത്തേണ്ടതുണ്ട്.
Magento എഞ്ചിൻ ഉപയോഗിച്ച് പ്രൊഫഷണൽ ഓൺലൈൻ സ്റ്റോറുകൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, എൻ്റെ രചയിതാവിൻ്റെ വീഡിയോ കോഴ്‌സിൻ്റെ സഹായത്തോടെ ഇത് ചെയ്യാൻ എളുപ്പമാണ്.
ഞങ്ങളുടെ കോഴ്‌സിൽ ഞങ്ങൾ CSS പാഠങ്ങൾ ഉൾക്കൊള്ളും - അതായത്. സാങ്കേതികവിദ്യയെക്കുറിച്ചുള്ള പാഠങ്ങൾ, വെബ് പേജ് ലേഔട്ടിലെ ഏറ്റവും പ്രധാനപ്പെട്ട ഒന്നാണ്.
ഈ പാഠത്തിൽ, ഞങ്ങളുടെ വെബ് പേജ് കൂടുതൽ വർണ്ണാഭമായ രീതിയിൽ രൂപപ്പെടുത്തും (ചിത്രം 1).
ചിത്രം 1
പേജ് ഡിസൈനിലേക്ക് പോകുന്നതിന് മുമ്പ്, വെബിൽ നിറം എങ്ങനെ സജ്ജീകരിച്ചിരിക്കുന്നു എന്ന് പഠിക്കാം.
1. നിറങ്ങളുടെ നിർവ്വചനം. CSS പാഠങ്ങൾ
നിറങ്ങൾ നിർണ്ണയിക്കുമ്പോൾ HTML പ്രമാണംനിങ്ങൾക്ക് നിറങ്ങളുടെ പേരുകളോ അവയുടെ പേരുകളോ ഉപയോഗിക്കാം ഹെക്സാഡെസിമൽ കോഡുകൾ. ഹെക്സാഡെസിമൽ കോഡിംഗ് സിസ്റ്റം മൂന്ന് ഘടകങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് - ചുവപ്പ് (ചുവപ്പ്), പച്ച (പച്ച), നീല (നീല), അതിനാൽ ഈ നിറങ്ങളുടെ പേരുകളുടെ ആദ്യ അക്ഷരങ്ങൾക്ക് ശേഷം അതിൻ്റെ പേര് RGB എന്നാണ്. ഓരോ ഘടകങ്ങളും 00 മുതൽ FF വരെയുള്ള ഒരു ഹെക്സാഡെസിമൽ സംഖ്യയുമായി യോജിക്കുന്നു (ദശാംശ നൊട്ടേഷനിൽ 0, 255). ഈ മൂന്ന് മൂല്യങ്ങളും പർപ്പിൾ നിറവുമായി പൊരുത്തപ്പെടുന്ന #800080 പോലെയുള്ള #-ന് മുമ്പുള്ള ഒരൊറ്റ മൂല്യത്തിലേക്ക് സംയോജിപ്പിക്കുന്നു.
ചില നിറങ്ങളുടെ പേരുകളും അവയുടെ കോഡുകളും പട്ടിക കാണിക്കുന്നു. കൂടുതൽ പൂർണ്ണമായ കളർ ടേബിളുകളും അവയുടെ കോഡുകളും ഫോൾഡറിൽ കാണാൻ കഴിയും നിറങ്ങൾഫോൾഡറിൽ സ്ഥിതിചെയ്യുന്നു സി.ഡി.
|
നിറം |
നിറം |
||
|
കറുപ്പ് |
വെള്ളി |
||
|
മെറൂൺ (ഇരുണ്ട ബർഗണ്ടി) |
ചുവപ്പ് |
||
|
പച്ച |
നാരങ്ങ (നാരങ്ങ) |
||
|
ഒലിവ് |
മഞ്ഞ |
||
|
നേവി (കടും നീല) |
നീല |
||
|
പർപ്പിൾ |
ഫ്യൂച്ചിയ (ഫ്യൂഷിയ) |
||
|
ടീൽ (കടും പച്ച) |
|||
|
ചാരനിറം |
വെള്ള |
മേശ സുരക്ഷിതമായ നിറങ്ങൾവെബ്സൈറ്റ് ഡിസൈൻ വികസനത്തിന്
സുരക്ഷിതമായ വർണ്ണ പാലറ്റ് വ്യത്യസ്ത മോണിറ്ററുകളിലുടനീളം ഏറ്റവും കൃത്യമായ ഡിസ്പ്ലേ ഉറപ്പാക്കുന്നു.
സുരക്ഷിത പാലറ്റിൽ 216 നിറങ്ങൾ അടങ്ങിയിരിക്കുന്നു. സുരക്ഷിതമായ നിറങ്ങൾ എല്ലായ്പ്പോഴും ഒരു ബ്രൗസറിൽ നിന്ന് മറ്റൊന്നിലേക്ക്, ഒരു പ്ലാറ്റ്‌ഫോമിൽ നിന്ന് മറ്റൊന്നിലേക്ക്, ഒരു മോണിറ്ററിൽ നിന്ന് മറ്റൊന്നിലേക്ക് അവയുടെ വ്യത്യസ്ത വർണ്ണ ഡിസ്പ്ലേ കഴിവുകളും റെസല്യൂഷനുകളും ഉപയോഗിച്ച് സ്ഥിരമായിരിക്കും.
മൂന്നിൽ ഏതെങ്കിലും ഉണ്ടെങ്കിൽ ഹെക്സാഡെസിമൽ മൂല്യങ്ങൾ 00, 33, 66, 99, SS അല്ലെങ്കിൽ FF എന്നിവയിൽ നിന്ന് വ്യത്യസ്തമാണ്, അപ്പോൾ നിറം സുരക്ഷിതമല്ല.
സുരക്ഷിതമായ നിറങ്ങളുടെ പട്ടിക ഫോൾഡറിൽ കാണാൻ കഴിയും സി.ഡി/ നിറങ്ങൾ.
2. CSS നിർവ്വചനം
ഞങ്ങളുടെ വെബ് പേജിന് ഇതുവരെ ഒരു ഡിസൈൻ ഇല്ല, അത് രണ്ട് തരത്തിൽ ചെയ്യാം:
- ആദ്യം - വഴി സ്റ്റൈൽ ഷീറ്റുകൾ സി.എസ്.എസ് (കൂടുതൽ പുരോഗമനപരവും ശരിയായതുമായ രീതി),
- രണ്ടാമത്തേത് - വഴി ടാഗ് ആട്രിബ്യൂട്ടുകൾ HTML .
കൂടുതൽ പുരോഗമനപരമായ രീതി ഉപയോഗിച്ച് നമുക്ക് ഉടൻ ആരംഭിക്കാം.
CSS - കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ(ശ്രേണീകൃത ശൈലി സ്പെസിഫിക്കേഷനുകൾ അല്ലെങ്കിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) മാർക്ക്അപ്പ് ഭാഷയെ മാറ്റിസ്ഥാപിക്കുന്നില്ല, അവ HTML ടാഗിൽ പ്രയോഗിക്കുന്ന ഒരു സ്വതന്ത്ര സാങ്കേതികവിദ്യയാണ്.
ഉദ്ദേശം: സ്വയമേവ മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു HTML ശൈലിസൈറ്റിൻ്റെ എല്ലാ പേജുകളിലെയും ഘടകം. ഉദാഹരണത്തിന്, പത്ത് വെബ് പേജുകളിൽ ഞങ്ങൾ ഒരു H1 ഹെഡർ ഉപയോഗിക്കുന്നു, അത് പച്ചയായിരിക്കണം. സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുമ്പോൾ, ഞങ്ങൾ ഒരിക്കൽ മാത്രം വ്യക്തമാക്കിയാൽ മതി പച്ച നിറംഅത് ഒരേസമയം പത്ത് പേജുകളിൽ പ്രയോഗിക്കുകയും ചെയ്യും.
വിപരീത സാഹചര്യം: ഞങ്ങൾ ഉപയോഗിക്കുന്നു HTML ആട്രിബ്യൂട്ടുകൾപത്ത് വെബ് പേജുകളിലെ എല്ലാ H1 തലക്കെട്ടുകളും പച്ചയായി സജ്ജീകരിക്കുക, അതായത്. അതു പത്തു പ്രാവശ്യം കല്പിച്ചു. അപ്പോൾ ഞങ്ങൾ തലക്കെട്ട് നിറം ചുവപ്പാക്കി മാറ്റാൻ തീരുമാനിച്ചു, തുടർന്ന് പച്ച നിറം ചുവപ്പ് എന്ന് പത്ത് തവണ തിരുത്തണം.
സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കുമ്പോൾ, സ്റ്റൈൽ ഷീറ്റിൽ തന്നെ ഹെഡർ കളർ പച്ചയിൽ നിന്ന് ചുവപ്പിലേക്ക് മാറ്റുന്നത് ഒരിക്കൽ മാത്രം ചെയ്താൽ മതി, പത്ത് വെബ് പേജുകളിലും ഇത് സ്വയമേവ മാറും.
ഒരു HTML ഘടകത്തിൻ്റെ ഘടനയിൽ നിന്ന് വ്യത്യസ്തമായ ഘടനയുള്ള CSS ഘടകങ്ങളുടെ ഒരു കൂട്ടം സ്റ്റൈൽ ഷീറ്റിൽ ഉൾപ്പെടുന്നു.
വാക്യഘടനസി.എസ്.എസ്- ഘടകം
സെലക്ടർ (പ്രോപ്പർട്ടി 1: മൂല്യം; പ്രോപ്പർട്ടി 2: മൂല്യം; ... പ്രോപ്പർട്ടി N: മൂല്യം)
സെലക്ടർ നാമം ആദ്യം എഴുതിയിരിക്കുന്നു, ഉദാഹരണത്തിന്, h1, എല്ലാ സ്റ്റൈൽ പ്രോപ്പർട്ടികളും ടാഗിൽ പ്രയോഗിക്കും എന്നാണ് ഇതിനർത്ഥം
, പിന്നെ പോകൂ ബ്രേസുകൾ, അതിൽ സ്റ്റൈൽ പ്രോപ്പർട്ടി എഴുതിയിരിക്കുന്നു, കോളണിന് ശേഷം അതിൻ്റെ മൂല്യം സൂചിപ്പിച്ചിരിക്കുന്നു. മൂല്യങ്ങളുള്ള സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ ഒരു അർദ്ധവിരാമം കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു; ഈ ചിഹ്നം അവസാനം ഒഴിവാക്കാവുന്നതാണ്.
നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത്ര മൂല്യങ്ങളുള്ള നിരവധി ശൈലി പ്രോപ്പർട്ടികൾ ഉണ്ടാകാം; അവയുടെ ക്രമം പ്രശ്നമല്ല.
CSS കേസ് സെൻസിറ്റീവ് അല്ല, ലൈൻ ബ്രേക്കുകൾ, സ്‌പെയ്‌സുകൾ അല്ലെങ്കിൽ ടാബ് പ്രതീകങ്ങൾ, അതിനാൽ, റെക്കോർഡിംഗിൻ്റെ രൂപം ഡവലപ്പറുടെ ആഗ്രഹത്തെ ആശ്രയിച്ചിരിക്കുന്നു.
ഉദാഹരണത്തിന്:
h1 (font-family:Arial; font-size:14pt)
അല്ലെങ്കിൽ ഇത് ഇതുപോലെ എഴുതാം:
font-family:Arial;
ഫോണ്ട് വലുപ്പം:14pt
ഈ ഉദാഹരണത്തിൽ:
- h1 - സെലക്ടർ, ഈ സാഹചര്യത്തിൽ ഒരു HTML ഘടകം,
- ഫോണ്ട് ഫാമിലി, ഫോണ്ട് സൈസ് - സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ,
- ഏരിയൽ - ഫോണ്ട് ഫാമിലി പ്രോപ്പർട്ടി മൂല്യം,
- 14pt എന്നത് ഫോണ്ട്-സൈസ് പ്രോപ്പർട്ടിയുടെ മൂല്യമാണ്.
ഒരു HTML ഡോക്യുമെൻ്റിൽ സ്റ്റൈൽ ഷീറ്റുകൾ ഉൾപ്പെടുത്താനുള്ള വഴികൾ
- ബാഹ്യ ശൈലി ഷീറ്റ് (ലിങ്ക് ചെയ്ത ശൈലി).
- ഉൾച്ചേർത്ത ശൈലി ഷീറ്റ് (ആഗോള ശൈലി).
- ആന്തരിക ശൈലികൾ.
3. ബാഹ്യ CSS സ്റ്റൈൽ ഷീറ്റ് (ലിങ്ക്ഡ് സ്റ്റൈൽ)
മുഴുവൻ സൈറ്റിൻ്റെയും ശൈലി നിർവചിക്കുന്നു.
ഒരു css എക്സ്റ്റൻഷനുള്ള ഒരു ടെക്സ്റ്റ് ഫയലാണ്.
IN ഈ ഉദാഹരണത്തിൽസ്റ്റൈൽ ഷീറ്റ് എഴുതിയിരിക്കുന്നു ടെക്സ്റ്റ് ഫയൽ style.css.
പ്രാക്ടീസ് 1
1. നോട്ട്പാഡ്++ ൽ ഒരു ശൂന്യ പ്രമാണം തുറന്ന് ഒരു ഫോൾഡറിൽ സേവ് ചെയ്യുക public_htmlഎന്ന പേരിൽ ശൈലി. css. ഫീൽഡിൽ അത് ശ്രദ്ധിക്കുക ഫയൽ തരംഅതു കണ്ടെത്തി എല്ലാ തരങ്ങളും(ചിത്രം 2).
ചിത്രം 2
2. CSS ഒരു വ്യത്യസ്ത സാങ്കേതികവിദ്യയായതിനാൽ, .css ഫയലിൽ HTML ടാഗുകളൊന്നും എഴുതിയിട്ടില്ല. ഫയലിൽ "വാസ്തുവിദ്യാ പ്രോജക്റ്റുകളുടെ കാറ്റലോഗ്" എന്ന തലക്കെട്ട് ഫോർമാറ്റ് ചെയ്യാം പ്രധാനം. htmlമധ്യഭാഗത്ത് വിന്യാസം, നീല നിറം, വെർദാന ഫോണ്ട്, ഫോണ്ട് ഉയരം 20 pt. ഈ ആവശ്യത്തിനായി ഇൻ css ഫയൽനമുക്ക് ഇതുചെയ്യാം അടുത്ത എൻട്രി(ചിത്രം 3):
ചിത്രം 3
ഞങ്ങളുടെ CSS ട്യൂട്ടോറിയലുകളിൽ, ഈ ട്യൂട്ടോറിയലിൽ നമ്മൾ നേരത്തെ സംസാരിച്ച CSS എലമെൻ്റ് സിൻ്റാക്സ് അനുസരിച്ച് ഇവിടെ എന്താണ് എഴുതിയിരിക്കുന്നതെന്ന് നമുക്ക് മനസ്സിലാക്കാം.
- h1 ഒരു സെലക്ടറാണ്, അതായത്. ശൈലി പ്രയോഗിക്കുന്ന html ഘടകം;
- ടെക്സ്റ്റ്-അലൈൻ:സെൻ്റർ; - ശൈലി ടെക്സ്റ്റ്-അലൈൻ പ്രോപ്പർട്ടി(ടെക്സ്റ്റ് വിന്യസിക്കുന്നു) മൂല്യ കേന്ദ്രവുമായി (മധ്യത്തിൽ);
- നിറം:#0000FF; - മൂല്യത്തോടുകൂടിയ സ്റ്റൈൽ പ്രോപ്പർട്ടി നിറം (ടെക്സ്റ്റ് കളർ). നീല നിറം#0000FF (വർണ്ണ പട്ടികയിൽ നിന്ന് എടുത്ത മൂല്യം);
- font-family:Verdana; - Verdana മൂല്യമുള്ള ഫോണ്ട് ടൈപ്പ്ഫേസ് ഫോണ്ട് ഫാമിലിയുടെ ശൈലി പ്രോപ്പർട്ടി;
- മൂല്യങ്ങളുള്ള ശൈലി പ്രോപ്പർട്ടികൾ ഒരു അർദ്ധവിരാമം കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു;
- വാക്യഘടന അനുസരിച്ച് എല്ലാം.
ഞങ്ങളുടെ വെബ് പേജ് സ്റ്റൈൽ ഷീറ്റ് "കാണുന്നതിനും" html ഘടകങ്ങളിൽ പ്രോപ്പർട്ടികൾ പ്രയോഗിക്കുന്നതിനും, ഫയലുകൾക്കിടയിൽ ഒരു ലിങ്ക് സ്ഥാപിക്കേണ്ടത് ആവശ്യമാണ്. പ്രധാനം. htmlഒപ്പം ശൈലി. css. ഇത് ചെയ്യുന്നതിന്, main.html ഫയലും ടാഗുകൾക്കിടയിലും തുറക്കുക < തല> ഒപ്പം തല> ഡിസൈൻ തിരുകുക , എങ്ങനെചിത്രം 4-ൽ.
ചിത്രം 4
3. ഒരു ബ്രൗസറിൽ ഫലം കാണുക. ഇത് ചിത്രം 5 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 5
ഈ CSS പാഠത്തിൽ സ്റ്റൈൽ പ്രോപ്പർട്ടികളുടെ പേരുകളും അവയുടെ മൂല്യങ്ങളും എവിടെ നിന്ന് ലഭിക്കുമെന്ന് നോക്കാം? ഇതിനായി പ്രത്യേക റഫറൻസ് പുസ്തകങ്ങളും സവിശേഷതകളും ഉണ്ട് (ഫോൾഡർ CSS റഫറൻസ്). ആരംഭിക്കുന്നതിന്, ഈ ചെറിയ റഫറൻസ് പുസ്തകം ഒരു റഫറൻസായി ഉപയോഗിക്കുക. Sprav_CSS.doc.
4. "നിങ്ങളുടെ ഭാവി ഭവനത്തിനുള്ള പ്രോജക്റ്റുകൾ" എന്ന h2 തലക്കെട്ടിന് ശരിയായ വിന്യാസത്തോടെ ശൈലി സജ്ജമാക്കുക, ബർഗണ്ടി നിറം, വെർദാന ഫോണ്ട്, ഫോണ്ട് ഉയരം 16 പോയിൻ്റ്. ഫയലിൽ ഇത് ചെയ്യാൻ ശൈലി. css എച്ച്2 (ചിത്രം 6).
ചിത്രം 6
5. ബ്രൗസറിൽ ഫലം പരിശോധിക്കുക, അത് ചിത്രം 7-മായി പൊരുത്തപ്പെടണം.
ചിത്രം 7
6. ഖണ്ഡികകൾ ന്യായീകരിക്കപ്പെടും, കടും നീല, ഏരിയൽ ഫോണ്ട്, ഫോണ്ട് ഉയരം 12 pt. ഫയലിൽ ഇത് ചെയ്യാൻ ശൈലി. cssസെലക്ടർക്കായി ഇനിപ്പറയുന്ന എൻട്രി നടത്താം പി(ചിത്രം 8).
ചിത്രം 8
7. മുഴുവൻ വെബ് പേജിൻ്റെയും പശ്ചാത്തലം ഞങ്ങൾ ഇളം നീലയാക്കും. സെലക്ടർക്ക് ഇത് ചെയ്യാൻ ശരീരംഒരു റെക്കോർഡ് ചേർക്കുക (ചിത്രം 9)
ചിത്രം 9
8. ഒരു ബ്രൗസറിൽ ഫലം കാണുക. ഇത് ചിത്രം 10 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 10
നിന്ന് ഞാൻ കരുതുന്നു ഈ പാഠം CSS, ഉപയോഗ തത്വം ബാഹ്യ പട്ടികശൈലികൾ വ്യക്തമാണ്. നിങ്ങളുടെ എളുപ്പത്തിലും വർണ്ണാഭമായ രൂപകൽപന ചെയ്യുന്നതിനായി വെബ്-പേജുകൾ, നിങ്ങൾ റഫറൻസ് ബുക്കിലെ ശൈലി സവിശേഷതകളും അവയുടെ അർത്ഥങ്ങളും പഠിക്കുകയും അവ പ്രായോഗികമായി പരീക്ഷിക്കുകയും വേണം. ഒരു റഫറൻസ് പുസ്തകം പരിശോധിക്കാതെ അത്തരം ഗുണങ്ങളും അർത്ഥങ്ങളും നിങ്ങൾ എത്രത്തോളം ഓർക്കുന്നുവോ അത്രത്തോളം നിങ്ങളുടെ പ്രൊഫഷണലിസം ഉയർന്നതാണ്.
ഗവേഷണ ചുമതലകൾ
- ഡയറക്ടറി ഉപയോഗിക്കുന്നു Sprav_CSS.doc,തലക്കെട്ട് ശൈലി < എച്ച്3> main.html ഫയലിൽ. തിരഞ്ഞെടുക്കാനുള്ള സ്റ്റൈൽ പ്രോപ്പർട്ടികൾ.
- "ഹൗസ് പ്രോജക്ടുകൾ" ലിസ്റ്റിനായി, ശൈലികൾ ഉപയോഗിച്ച്, അറബി അക്കങ്ങൾ റോമൻ അക്കങ്ങളിലേക്ക് മാറ്റുക. മറ്റ് പാരാമീറ്ററുകൾ ഓപ്ഷണൽ ആണ്.
- "ഹൗസ് ഏരിയ" ലിസ്റ്റിനായി, ഒരു ചിത്രം മാർക്കറായി ഉപയോഗിക്കുക spisok_1.gifഫോൾഡറിൽ നിന്ന് html_css_2. മറ്റ് പാരാമീറ്ററുകൾ ഓപ്ഷണൽ ആണ്.
- ശൈലികൾ വഴി വെബ് പേജിൻ്റെ പശ്ചാത്തലമായി ഒരു ചിത്രം പ്രയോഗിക്കുക fon9.jpgഫോൾഡറിൽ നിന്ന് html_css_2.
- ഖണ്ഡിക ഫോണ്ടുകൾ ബോൾഡ് ആക്കാൻ ശൈലികൾ ഉപയോഗിക്കുക.
ഒരു ഉദാഹരണ ഫലം ചിത്രം 11 ൽ കാണിച്ചിരിക്കുന്നു.
ചിത്രം 11
4. ശൈലി സവിശേഷതകളിൽ ക്ലാസുകൾ
ഞങ്ങളുടെ CSS ട്യൂട്ടോറിയലിൽ, ഒരു ഘടകത്തിന് ഒന്നിലധികം ശൈലികൾ നിർവ്വചിക്കേണ്ടിവരുമ്പോൾ ഉപയോഗിക്കുന്ന സ്റ്റൈൽ സ്പെസിഫിക്കേഷനുകളിലെ ക്ലാസുകൾ ഞങ്ങൾ പരിശോധിക്കും. ഒരു ക്ലാസ് നിർവചിക്കുമ്പോൾ, ഒരു ഡോട്ട് കൊണ്ട് വേർതിരിച്ച് ആവശ്യമുള്ള ടാഗിലേക്ക് ഒരു അനിയന്ത്രിതമായ അദ്വിതീയ ക്ലാസ് നാമം ചേർക്കുന്നു.
ഉദാഹരണത്തിന്, നമുക്ക് വാചകത്തിൽ നിരവധി തലക്കെട്ടുകൾ ഉണ്ട് എച്ച്1 അവ വ്യത്യസ്ത നിറങ്ങളായിരിക്കണം. തുടർന്ന് നിങ്ങൾ ശൈലികൾ ഇനിപ്പറയുന്ന രീതിയിൽ വേർതിരിക്കേണ്ടതുണ്ട്:
h1.golub(നിറം:നീല)
h1.krasn(നിറം:ചുവപ്പ്)
h1.പച്ച (നിറം:പച്ച)
പോയിൻ്റ് ശേഷം പേര് പോകുന്നുക്ലാസ്, അത് അദ്വിതീയമായിരിക്കണം കൂടാതെ അക്കങ്ങൾ മാത്രം ഉൾക്കൊള്ളാൻ പാടില്ല.
ഇപ്പോൾ ടാഗ് ഉപയോഗിക്കുമ്പോൾ < എച്ച്1> പ്രമാണത്തിൽ ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിരിക്കണം ക്ലാസ്ഏത് ശൈലിയാണ് പ്രയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ:
< എച്ച്1 ക്ലാസ്=" ഗോലുബ്"> ഇതൊരു നീല ശീർഷകമാണ് എച്ച്1>
< എച്ച്1 ക്ലാസ്=" ക്രാസ്ൻ"> ഇതൊരു ചുവന്ന തലക്കെട്ടാണ് എച്ച്1>
< എച്ച്1 ക്ലാസ്=" പച്ച"> ഇതൊരു പച്ച തലക്കെട്ടാണ് എച്ച്1>
പ്രാക്ടീസ് 2
1. ഫയൽ തുറക്കുക ടെംപ്ലേറ്റ്. html. ഒരു പുതിയ പേരിൽ ഇത് സംരക്ഷിക്കുക സമചതുരം Samachathuram. htmlഫോൾഡറിൽ public_html.
2. ടാഗുകൾക്കിടയിൽ എഴുതുക
3. ഉള്ളടക്കത്തിലേക്ക്
ഫയലിൽ നിന്ന് ടെക്സ്റ്റ് പകർത്തുക ഹൗസ് ഏരിയകൾ.txtഫോൾഡറിൽ നിന്ന് html_ ccs_2 .4. ഞങ്ങൾ ഒരേ ഫയലിൽ ശൈലികൾ എഴുതും ശൈലി. css, മുമ്പത്തെ പാഠത്തിൽ ഞങ്ങൾ സൃഷ്ടിച്ചത്. അതിനാൽ ഫയലിൽ സമചതുരം Samachathuram. htmlടാഗുകൾക്കിടയിൽ തിരുകിക്കൊണ്ട് ഈ സ്റ്റൈൽ ഷീറ്റിലേക്ക് ലിങ്ക് ചെയ്യുക
ഒപ്പം(ചിത്രം 12)
ചിത്രം 12
5. ടാഗ് ഉള്ള തലക്കെട്ടുകൾ ഫോർമാറ്റ് ചെയ്യുക
ഓരോ തലക്കെട്ടിനും അതിൻ്റേതായ ക്ലാസ് നൽകുകയും ചെയ്യുക (ചിത്രം 13).
ചിത്രം 13
നിങ്ങളുടെ ഫയൽ സമചതുരം Samachathuram. htmlഇപ്പോൾ ഇതുപോലെയായിരിക്കണം (ചിത്രം 14).
ചിത്രം 14
6. സ്റ്റൈൽ ഷീറ്റിൽ ശൈലി. cssഇനിപ്പറയുന്ന എൻട്രി സൃഷ്ടിക്കുക (ചിത്രം 15)
ചിത്രം 15
7. നിങ്ങളുടെ ബ്രൗസറിലെ വെബ് പേജ് പരിശോധിക്കുക. ഫലം ചിത്രം 16-ലാണ്.
ചിത്രം 16
8. ഞങ്ങളുടെ പുതിയ തലക്കെട്ട് ശൈലികൾ പോസ്റ്റിൽ ചില ആവർത്തന ഘടനകൾ ഉള്ളതായി നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം. font-family:Verdana; ടെക്സ്റ്റ്-അലൈൻ:ഇടത്; ഫോണ്ട് വലുപ്പം:14pt.അത്തരം നിർമ്മിതികൾ അവ പ്രയോഗിക്കുന്ന സെലക്ടർമാരെ ഗ്രൂപ്പുചെയ്ത് ഒരിക്കൽ എഴുതാം. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കോമകളാൽ വേർതിരിച്ച സെലക്ടറുകളെ ലിസ്റ്റുചെയ്യേണ്ടതുണ്ട്, തുടർന്ന് ചുരുണ്ട ബ്രാക്കറ്റുകളിൽ എഴുതുക പൊതു ഗുണങ്ങൾ. അപ്പോൾ തലക്കെട്ടുകൾക്കായുള്ള ഞങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 17):
ചിത്രം 17
പ്രാക്ടീസ് 3
ഫയലിലെ ഓരോ തലക്കെട്ടിനു കീഴിലും സമചതുരം Samachathuram. htmlടെക്സ്റ്റ് ഉണ്ട്. വിവിധ ക്ലാസുകൾ ഉപയോഗിച്ച് ഖണ്ഡികകൾ ഫോർമാറ്റ് ചെയ്യുക. വ്യത്യസ്ത നിറങ്ങൾ, വിന്യാസം, ഫോണ്ട് ടൈപ്പ്ഫേസുകൾ എന്നിവ ഉപയോഗിക്കുക. ക്ലാസുകളുടെ പേരുകൾ അദ്വിതീയമായിരിക്കണം. വ്യത്യസ്ത സെലക്ടർമാർക്ക് ഒരേ പേരുകൾ ഉപയോഗിക്കുന്നത് അഭികാമ്യമല്ല. ചിത്രം 18-ൽ സാധ്യമായ ഓപ്ഷനുകളിലൊന്ന്:
ചിത്രം 18
5. ഒരു പ്രത്യേക ഘടകത്തിനായുള്ള ഐഡി ശൈലി
ഐഡി ശൈലികൾ എന്ന് വിളിക്കപ്പെടുന്നതിനെക്കുറിച്ച് പഠിക്കുന്നത് CSS പാഠങ്ങളിൽ ഉൾപ്പെടുന്നു.
ഏത് ഘടകത്തിനും ഒരു ഐഡൻ്റിഫയർ നൽകാം ഐഡി, തുടർന്ന് ഉപയോഗിച്ച് ഈ ഘടകത്തിന് കുറച്ച് ശൈലി നൽകുക ഐഡി.
ഉദാഹരണത്തിന്:
സ്റ്റൈൽ ഷീറ്റ് ഫയലിലെ എൻട്രി ഇനിപ്പറയുന്നതായിരിക്കും
# പരീക്ഷ { നിറം:#00 ffff}
ഇപ്പോൾ നിങ്ങൾക്ക് ഈ ശൈലി html പ്രമാണത്തിലെ ഏത് ഘടകവുമായും പൊരുത്തപ്പെടുത്താനാകും:
...
...
ഈ ഉദാഹരണത്തിൽ, ടെസ്‌റ്റ് എന്ന വാക്ക് ശൈലിയുടെ പേരാണ്. പേര് എന്തും ആകാം ലാറ്റിൻ അക്ഷരങ്ങൾ, എന്നാൽ അത് അദ്വിതീയമായിരിക്കണം, അതായത്. സ്റ്റൈൽ ഷീറ്റിലെ ഒരു ഘടകത്തിനും ഇനി ആ പേര് ഉണ്ടാകരുത്.
പ്രാക്ടീസ് 4
ഞങ്ങളുടെ വെബ്‌സൈറ്റിൻ്റെ ഭാവി മെനുവിനായി ഒരു ടെംപ്ലേറ്റ് ഉണ്ടാക്കാം.
1. ഫയൽ തുറക്കുക ടെംപ്ലേറ്റ്. htmlഒരു പുതിയ പേരിൽ അത് സേവ് ചെയ്യുക മെനു. htmlഫോൾഡറിൽ public_html.
2. ഫയൽ പേജിൻ്റെ ഉള്ളടക്കത്തിലേക്ക് മെനു. htmlഫയലിൽ നിന്ന് ടെക്സ്റ്റ് നൽകുക മെനു. ടെക്സ്റ്റ്ഫോൾഡറിൽ നിന്ന് html_ css_2 .
3. HTML ടാഗുകൾ ഉപയോഗിച്ച്, ഫയൽ ഇനിപ്പറയുന്ന രീതിയിൽ ഫോർമാറ്റ് ചെയ്യുക:
- "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ", "വാസ്തുവിദ്യാ പദ്ധതികളുടെ കാറ്റലോഗ്", "ഹൗസ് ഏരിയകൾ" എന്നീ തലക്കെട്ടുകൾക്ക് ടാഗ് ഉപയോഗിക്കുക
;
- "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ" ലിസ്റ്റിനായി, ഒരു അക്കമിട്ട ലിസ്റ്റ് ഉപയോഗിക്കുക
- ;
- "വാസ്തുവിദ്യാ പ്രോജക്റ്റുകളുടെ കാറ്റലോഗ്", "ഹൗസ് ഏരിയ" ലിസ്റ്റുകൾക്കായി, ബുള്ളറ്റഡ് ലിസ്റ്റ് ഉപയോഗിക്കുക
4. വെബ് പേജിൻ്റെ മുകളിൽ, ഒരു ലോഗോ ചേർക്കുക (ഫയൽ logo_myhouse.gif). ഫലം ചിത്രം 19 മായി പൊരുത്തപ്പെടണം.
ചിത്രം 19
5. ഈ മെനുവിന് ഞങ്ങൾ പേരിൽ ഒരു പ്രത്യേക സ്റ്റൈൽ ഷീറ്റ് ഉണ്ടാക്കും ശൈലി_ മെനു. css. ഫയൽ ലിങ്ക് ചെയ്യുക മെനു. htmlസ്റ്റൈൽ ഷീറ്റും ശൈലി_ മെനു. cssഒരു എൻട്രി ചേർത്തുകൊണ്ട് ടാഗുകൾക്കിടയിൽ
ഒപ്പംഫയലിൽ മെനു. html.6. ഒരു ബ്ലാങ്ക് ഡോക്യുമെൻ്റ് ഉണ്ടാക്കി അത് പേരിൽ സേവ് ചെയ്യുക ശൈലി_ മെനു.cssനിങ്ങളുടെ ഫോൾഡറിൽ.
7. ശീർഷകവും അക്കമിട്ട ലിസ്റ്റും ഉൾപ്പെടുന്ന "പ്രോജക്റ്റ് വിഭാഗങ്ങൾ" ഗ്രൂപ്പിനും ശീർഷകവും ബുള്ളറ്റഡ് ലിസ്റ്റും ഉൾപ്പെടുന്ന "വാസ്തുവിദ്യാ പദ്ധതികളുടെ കാറ്റലോഗ്" ഗ്രൂപ്പിനും, ഞങ്ങൾ ഐഡി ശൈലിയുടെ പേര് ഉപയോഗിക്കും. നീല. ആ. കോഡ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 20):
ചിത്രം 20
8. ഫയലിൽ ശൈലി_ മെനു. cssഈ ഘടകങ്ങളുടെ ശൈലി തഹോമ ഫോണ്ടിൽ ഇരുണ്ട നീലയായിരിക്കും (ചിത്രം 21):
ചിത്രം 21
9. തലക്കെട്ടും ബുള്ളറ്റുള്ള ലിസ്റ്റും ഉൾപ്പെടുന്ന "ഹൗസ് ഏരിയകൾ" ഗ്രൂപ്പിനായി, ഞങ്ങൾ ഐഡി ശൈലിയുടെ പേര് ഉപയോഗിക്കും തവിട്ട്. ആ. കോഡ് ഇതുപോലെ കാണപ്പെടും (ചിത്രം 22):
ചിത്രം 22
10. ഫയലിൽ ശൈലി_ മെനു. cssനമുക്ക് ഈ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്യാം തവിട്ട്, ടൈംസ് ഫോണ്ടിൽ (ചിത്രം 23):
ചിത്രം 23
11. menu.html ഫയലിലേക്ക് മറ്റൊരു പശ്ചാത്തല നിറം ചേർക്കുക (ചിത്രം 24)
ചിത്രം 24
12. ഫലമായി, നമുക്ക് ഇനിപ്പറയുന്ന വെബ് പേജ് ലഭിക്കും (ചിത്രം 25)
ചിത്രം 25
ഈ CSS ട്യൂട്ടോറിയൽ പൂർത്തിയാക്കിയതിൻ്റെ ഫലമായി, നിങ്ങൾ ഇനിപ്പറയുന്ന ഫയലുകൾ സൃഷ്ടിച്ചിരിക്കണം:
- ശൈലി.
css
- ശൈലി_ മെനു. css
- സമചതുരം Samachathuram.
html
- മെനു.
html
സ്റ്റൈൽ ഷീറ്റുകൾ എന്തിനുവേണ്ടിയാണ്?
കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ അല്ലെങ്കിൽ CSS (ഇംഗ്ലീഷ് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളിൽ നിന്ന്) HTML-ൻ്റെ കൂടുതൽ വികസനത്തിൻ്റെ അനന്തരഫലമാണ്, കൂടാതെ വിവര അവതരണത്തിൻ്റെ അടുത്ത ഘട്ടത്തിലേക്ക് നീങ്ങാൻ ഞങ്ങൾക്ക് അവസരം നൽകുന്നു. ഒരു പേജിൻ്റെ സെമാൻ്റിക് ഉള്ളടക്കം അതിൻ്റെ രൂപകൽപ്പനയിൽ നിന്ന് വേർതിരിക്കാൻ സ്റ്റൈൽ ഷീറ്റുകൾ നിങ്ങളെ അനുവദിക്കുന്നു.ഞങ്ങൾ ഓർക്കുന്നതുപോലെ, HTML സ്റ്റാൻഡേർഡിൻ്റെ ആദ്യ പതിപ്പുകൾ വിവരങ്ങളുടെ രൂപം നിയന്ത്രിക്കുന്നതിനുള്ള ഒരു മാർഗവും നൽകിയില്ല. ടെക്സ്റ്റ് പുനർനിർമ്മിക്കാൻ കഴിവുള്ള ഏത് ഉപകരണത്തിലേക്കും വിവരങ്ങൾ ആക്സസ് ചെയ്യാൻ ലക്ഷ്യമിട്ടുള്ളതായിരുന്നു ഹൈപ്പർടെക്‌സ്‌റ്റ് എന്ന പൊതു ആശയം. മാർക്ക്അപ്പിനായി, തലക്കെട്ടുകൾ, ഉപശീർഷകങ്ങൾ, ലിസ്റ്റുകൾ, ഖണ്ഡികകൾ, ഉദ്ധരണികൾ മുതലായവ നിർവചിക്കുന്ന ലോജിക്കൽ ടാഗുകൾ മാത്രം ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്തു. - അതായത്, പ്രമാണത്തിൻ്റെ ഘടന ഉണ്ടാക്കുന്ന ഘടകങ്ങൾ. രൂപത്തിൻ്റെ വ്യാഖ്യാനം പൂർണ്ണമായും ടെർമിനൽ ടെർമിനലിൻ്റെ മനസ്സാക്ഷിയിൽ തുടർന്നു.
എന്നിരുന്നാലും, അതിനുശേഷം ഒരുപാട് മാറിയിട്ടുണ്ട്, കൂടാതെ HTML സ്റ്റാൻഡേർഡിന് അതിൻ്റെ യഥാർത്ഥ ഐക്യം നഷ്ടപ്പെട്ടു. തുടക്കത്തിൽ, നെറ്റ്‌സ്‌കേപ്പ് "മെച്ചപ്പെടുത്തിയ ടാഗുകൾ" ചേർത്തു, അത് അവതരിപ്പിച്ച വിവരങ്ങളുടെ രൂപത്തിൽ കൂടുതൽ നിയന്ത്രണം അനുവദിച്ചു. നൂതനത്വം പിടിച്ചുപറ്റി, എല്ലാ നെറ്റ്‌സ്‌കേപ്പ് വിപുലീകരണങ്ങളും ഒരു യഥാർത്ഥ നിലവാരമായി മാറി. പിന്നീട് മൈക്രോസോഫ്റ്റും അതുതന്നെ ചെയ്തു. അവർ മനസ്സിലാക്കിയപ്പോൾ, HTML എന്നത് ലോജിക്കൽ, ഡിസൈൻ ടാഗുകൾ, പൊരുത്തമില്ലാത്ത വിപുലീകരണങ്ങൾ എന്നിവയുടെ ഒരു ഭീകരമായ മിശ്രിതമായിരുന്നു, കൂടാതെ യഥാർത്ഥ ആശയവുമായി പൊരുത്തപ്പെടുന്നത് പൂർണ്ണമായും അവസാനിപ്പിച്ചു - ഏത് ഉപകരണത്തിലും അതിൻ്റെ വിവര ഔട്ട്പുട്ട് സവിശേഷതകൾ പരിഗണിക്കാതെ തന്നെ വിവരങ്ങൾ അവതരിപ്പിക്കുക.
പിന്നീട് വലിയ തോതിലുള്ള സ്റ്റാൻഡേർഡൈസേഷൻ ഏറ്റെടുത്തു. തൽഫലമായി, HTML 3.2 സ്റ്റാൻഡേർഡ് പിറന്നു. അദ്ദേഹം വിപ്ലവകാരിയല്ല, മറിച്ച് എല്ലാ പുതുമകളും സ്ഥാപിക്കുകയും വികസിക്കുകയും ചെയ്തു പൊതുവായ ശുപാർശകൾബ്രൗസർ നിർമ്മാതാക്കൾക്കായി. വിപ്ലവകരമായ മാറ്റങ്ങൾ ഒരു പുതിയ സ്റ്റാൻഡേർഡിൽ അവതരിപ്പിച്ചു - HTML 4.0 അല്ലെങ്കിൽ, ഡൈനാമിക് HTML എന്ന് വിളിക്കപ്പെട്ടു. ലെയറുകൾ, സ്റ്റൈൽ ഷീറ്റുകൾ, സാർവത്രികം ഒബ്ജക്റ്റ് മോഡൽബ്രൗസർ.
പുതിയ മാനദണ്ഡം HTML ആശയത്തിൻ്റെ ഉത്ഭവത്തിലേക്ക് മടങ്ങാൻ ശ്രമിച്ചു. നാലാമത്തെ പതിപ്പ്, ആദ്യത്തേത് പോലെ, ഏത് ഉപകരണത്തിലും പ്ലേ ചെയ്യാൻ കഴിയുന്ന തരത്തിൽ പേജുകൾ സൃഷ്ടിക്കാൻ ശുപാർശ ചെയ്യുന്നു - അത് 21" മോണിറ്ററോ ചെറുതോ ആകട്ടെ കറുപ്പും വെളുപ്പും സ്ക്രീൻസെൽ ഫോൺ.
വിവരങ്ങളുടെ രൂപം അവതരിപ്പിക്കുന്നതിലെ പ്രശ്നം എങ്ങനെ പരിഹരിച്ചു? ഇവിടെയാണ് വിപ്ലവകരമായ സമീപനം. എല്ലാ ഡിസൈനുകളും ഒരു ബാഹ്യ ശൈലിയിലുള്ള ഫയലിൽ ഉൾപ്പെടുത്താൻ ശുപാർശ ചെയ്യുന്നു. പ്രധാന പേജിൽ ആവശ്യമായ ശൈലികളിലേക്കുള്ള വിവരങ്ങളും ലിങ്കുകളും മാത്രമേ ഉണ്ടാകൂ.
പേജ് കാണിക്കുമ്പോൾ നിർദ്ദിഷ്ട ഉപകരണംഅനുയോജ്യമായ ഒരു സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കണം. ഒരു സെൽ ഫോണിനും കമ്പ്യൂട്ടർ മോണിറ്ററിനും, അവ തീർച്ചയായും വ്യത്യസ്തമായിരിക്കണം. ആദ്യ സന്ദർഭത്തിൽ, ഞങ്ങൾ ഏറ്റവും കുറഞ്ഞ ഡിസൈൻ ഉപയോഗിക്കുന്നു, അത് ഏറ്റവും ഒപ്റ്റിമലും ഒതുക്കമുള്ളതുമായ രീതിയിൽ വിവരങ്ങൾ അവതരിപ്പിക്കാൻ ഞങ്ങളെ അനുവദിക്കും. രണ്ടാമത്തെ കാര്യത്തിൽ, ഫോണ്ടിൻ്റെയും കളർ ഡിസൈനിൻ്റെയും എല്ലാ സമ്പത്തും ഞങ്ങളുടെ പക്കലുണ്ട്.
വിവരങ്ങൾ പ്രദർശിപ്പിക്കാൻ പദ്ധതിയിട്ടിരിക്കുന്ന ഓരോ ഉപകരണത്തിനും ഒരു സൈറ്റ് സൃഷ്ടിക്കുമ്പോൾ സ്റ്റൈൽ ഷീറ്റ് ഒരിക്കൽ മാത്രം എഴുതേണ്ടതുണ്ട്. കൂടാതെ, സ്റ്റൈൽ ഷീറ്റ് മുഴുവൻ സൈറ്റിനും സമാനമായിരിക്കും. അതിനാൽ, ഓരോ പേജിലും ഒരേ ശൈലിയിലുള്ള വിവരണങ്ങൾ ആവർത്തിക്കേണ്ട ആവശ്യമില്ല.
എല്ലാ സ്റ്റൈൽ വിവരങ്ങളും ഒരു ബാഹ്യ ഫയലിൽ സ്ഥാപിക്കുന്നത് നമുക്ക് മറ്റ് ഉപയോഗപ്രദമായ അവസരങ്ങൾ തുറക്കുന്നു - എല്ലാത്തിനുമുപരി, ഒരു (!) സ്റ്റൈൽ ഫയലിൻ്റെ ഉള്ളടക്കം മാറ്റുന്നതിലൂടെ, നിമിഷങ്ങൾക്കുള്ളിൽ ഞങ്ങൾക്ക് മുഴുവൻ സൈറ്റ് രൂപകൽപ്പനയും മാറ്റാൻ കഴിയും. മാത്രമല്ല, മറ്റ് മാറ്റങ്ങളൊന്നും ആവശ്യമില്ല. തീർച്ചയായും, സൈറ്റ് യഥാർത്ഥത്തിൽ ശരിയായി രൂപകൽപ്പന ചെയ്തിട്ടുണ്ടെങ്കിൽ മാത്രമേ ഇത് ശരിയാകൂ.
സിദ്ധാന്തത്തെക്കുറിച്ച് അൽപ്പം മനസ്സിലാക്കിയ ശേഷം, നമുക്ക് പരിശീലനത്തിലേക്ക് പോകാം, ഒരു സ്റ്റൈൽ ഷീറ്റ് ഒരു HTML ഫയലിലേക്ക് ബന്ധിപ്പിക്കുന്നതിനുള്ള പ്രശ്നം ഞങ്ങൾ ആരംഭിക്കും.
സ്റ്റൈൽ ഷീറ്റുകൾ ബന്ധിപ്പിക്കുന്നു
ഈ ടാസ്‌ക് നിർവ്വഹിക്കുന്നതിന്, നമുക്ക് 3 നിർദ്ദേശിച്ച രീതികളിൽ ഒന്ന് ഉപയോഗിക്കാം:ബാഹ്യ ഫയൽ
തലക്കെട്ട് വിഭാഗത്തിലെ വിവരണം
ഇൻലൈൻ വിവരണം
ഒരു ടാഗിൽ നിർമ്മിച്ച ഇൻലൈൻ വിവരണം അല്ലെങ്കിൽ വിവരണം ഉപയോഗിച്ച് നമുക്ക് ഏറ്റവും ലളിതമായതിൽ നിന്ന് ആരംഭിക്കാം:
ഈ വാചകം ശൈലിയാൽ അസാധുവാക്കപ്പെട്ടിരിക്കുന്നു
അധിക ശൈലി ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്, ഏത് ടാഗിലും നമുക്ക് ആവശ്യമുള്ള സ്റ്റൈൽ പാരാമീറ്ററുകൾ നിർവചിക്കാം. ഇതാണ് ഏറ്റവും കൂടുതൽ അനായാസ മാര്ഗം, ഇത് ഒരു ടാഗിൽ മാത്രം പ്രവർത്തിക്കുന്നു. എന്നാൽ ഫയലിൻ്റെ വലുപ്പം എത്രത്തോളം വളരുമെന്നും ഓരോ ടാഗിനും ഞങ്ങൾ ശൈലി വ്യക്തമാക്കിയാൽ അത് പരിഹരിക്കാൻ എത്രത്തോളം അസൗകര്യമുണ്ടാകുമെന്നും സങ്കൽപ്പിക്കുക. ഈ രീതി വളരെ വ്യത്യസ്തമല്ല, ഉദാഹരണത്തിന്, ടാഗ് ഉപയോഗിച്ച് രൂപം നേരിട്ട് വിവരിക്കുന്നു.
ആവശ്യമായ എല്ലാ ഡിസൈൻ ശൈലികളും മുൻകൂട്ടി നിർവചിക്കുന്നത് കൂടുതൽ സൗകര്യപ്രദമാണ്, തുടർന്ന് അവയെ ഉചിതമായ ടാഗുകളിൽ പ്രയോഗിക്കുക. ഇത് രണ്ടാമത്തെ വഴിയായിരിക്കും - ശീർഷക വിഭാഗത്തിലെ വിവരണം. അതിൻ്റെ പ്രഭാവം മുഴുവൻ പേജിലേക്കും വ്യാപിക്കുന്നു. ക്ലാസുകൾ ഉപയോഗിച്ചാണ് ശൈലികൾ നിർവചിച്ചിരിക്കുന്നത്, അവ ആവശ്യമായ എല്ലാ ഡിസൈൻ പാരാമീറ്ററുകളുടെയും നിർവചനത്തോടുകൂടിയ ലിസ്റ്റുകളാണ്.
ഈ രീതി ഉപയോഗിക്കുമ്പോൾ, ശൈലി വിവരണം തലക്കെട്ട് വിഭാഗത്തിൽ സ്ഥാപിക്കണം:
....
ഇപ്പോൾ ഈ ശൈലികൾ html കോഡിൽ എവിടെയും പ്രയോഗിക്കാവുന്നതാണ്. ഇതിനായി ഇനിപ്പറയുന്ന നിർമ്മാണം ഉപയോഗിക്കുന്നു:
ഈ വാചകം ഹെഡർ ശൈലിയിലാണ് എഴുതിയിരിക്കുന്നത്
ഈ വാചകം ചുവന്ന നിറത്തിലാണ് എഴുതിയിരിക്കുന്നത്
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, എല്ലാം അത്ര സങ്കീർണ്ണമല്ല. അടിസ്ഥാന തത്വങ്ങൾ മനസ്സിലാക്കുക എന്നതാണ് പ്രധാന കാര്യം. പുതിയ ക്ലാസുകൾ നിർവചിക്കുന്നതിനു പുറമേ, സ്റ്റാൻഡേർഡ് ടാഗുകൾ അസാധുവാക്കാനുള്ള കഴിവും ഞങ്ങൾക്കുണ്ട്. ഉദാഹരണത്തിന്, ടാഗ്
ഇപ്പോൾ ടാഗുകളിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന എല്ലാ വാചകങ്ങളും ഈ ശൈലി നിർവചിച്ചിരിക്കുന്നത് പോലെ കാണപ്പെടും. ഇത് വളരെ സൗകര്യപ്രദമാണ് കൂടാതെ നിലവിലുള്ള പേജുകൾ ശൈലികൾ ഉപയോഗിക്കുന്നതിന് എളുപ്പത്തിൽ പൊരുത്തപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു. കൂടാതെ, അനാവശ്യമായ ക്ലാസ് ആട്രിബ്യൂട്ടുകളുടെ അഭാവം കാരണം ഇത് ഫയലിൻ്റെ വലുപ്പം ഒരു പരിധിവരെ കുറയ്ക്കുന്നു.
അവസാനമായി, മൂന്നാമത്തെ മാർഗം ശൈലികളുടെ വിവരണം ഒരു ബാഹ്യ ഫയലിലേക്ക് മാറ്റുക എന്നതാണ്. വിവരണം ഉൾപ്പെടുത്തിയിട്ടുള്ള എല്ലാ ഫയലുകളിലേക്കും അതിൻ്റെ സ്വാധീന പരിധി വ്യാപിക്കുന്നു. ഈ രീതി HTML 4.0 എന്ന ആശയവുമായി ഏറ്റവും യോജിക്കുന്നു. നമുക്ക് സൈറ്റിൻ്റെ രൂപഭാവം മാറ്റണമെങ്കിൽ, ഈ ഒരു ഫയൽ മാത്രം ക്രമീകരിച്ചാൽ മതിയാകും. ഇതുമായി താരതമ്യം ചെയ്യുക മുൻ രീതികൾ. അവയിലൊന്നിൽ നിങ്ങൾ ഓരോ പേജിലെയും വിവരണം മാറ്റേണ്ടിവരും, മറ്റൊന്നിൽ അതിലും കൂടുതൽ - ഓരോ ടാഗിനും അടുത്തായി, ഇത് തീർച്ചയായും പ്രചോദനാത്മകമല്ല.
എങ്ങനെയാണ് നടപ്പിലാക്കുന്നത്? ബാഹ്യ ഫയൽ? ആദ്യം, നമുക്ക് ആവശ്യമുള്ള എല്ലാ ക്ലാസുകളുടെയും വിവരണത്തോടെ ഒരു സ്റ്റൈൽ ഫയൽ സൃഷ്ടിക്കപ്പെടുന്നു (mystyle.css):
തലക്കെട്ട് (ടെക്സ്റ്റ് അലൈൻ: മധ്യഭാഗം; ഫോണ്ട് വലുപ്പം: 27pt;)
.ചുവപ്പ് (നിറം: ചുവപ്പ്;)
p (ടെക്സ്റ്റ്-അലൈൻ: സെൻ്റർ; ഫോണ്ട്-സൈസ്: 12pt;)
....
....
ഇതാണ് ഏറ്റവും കൂടുതൽ സൗകര്യപ്രദമായ വഴി, പ്രധാന സ്റ്റൈൽ ഷീറ്റിനായി ഇത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു.
എന്തുകൊണ്ടാണ് ഞാൻ "പ്രധാനം" എന്ന് പറഞ്ഞത്? പ്രായോഗികമായി നിങ്ങൾ മൂന്ന് രീതികളും ഉപയോഗിക്കേണ്ടതുണ്ട് എന്നതാണ് വസ്തുത, ഇവിടെയാണ് ശൈലികളുടെ "കാസ്കേഡിംഗ്" പ്രവർത്തിക്കുന്നത്. എന്നാൽ അടുത്ത തവണ നമ്മൾ ഇതിനെക്കുറിച്ച് സംസാരിക്കും.
സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ചുള്ള സംഭാഷണം നമുക്ക് തുടരാം. ആദ്യം, നമുക്ക് കാസ്കേഡിംഗ് ശൈലികൾ കൈകാര്യം ചെയ്യാം, തുടർന്ന് വാക്യഘടനയുടെ അവലോകനത്തിലേക്കും ശൈലികൾ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കുന്ന ഏറ്റവും സാധാരണമായ പാരാമീറ്ററുകളുടെ ഒരു അവലോകനത്തിലേക്കും പോകാം.
കാസ്കേഡിംഗ് ശൈലികൾ
അതിനാൽ, ആദ്യം, സ്റ്റൈലുകളെ കാസ്കേഡിംഗ് എന്ന് വിളിക്കുന്നത് എന്തുകൊണ്ടെന്ന് നമുക്ക് കണ്ടെത്താം. പ്രിയ വായനക്കാരേ, ഒരു പേജിൽ ശൈലികൾ നടപ്പിലാക്കുന്നതിനുള്ള വഴികൾ ഒരിക്കൽ കൂടി ഞാൻ നിങ്ങൾക്ക് നൽകട്ടെ:ഒരു പ്രത്യേക സ്റ്റൈൽ ഫയൽ ഉപയോഗിക്കുകയും ഒരു ടാഗ് ഉപയോഗിച്ച് അത് ചേർക്കുകയും ചെയ്യുന്നു
പ്രമാണത്തിൻ്റെ തലക്കെട്ടിലെ ശൈലി വിവരണം
ഒരു ടാഗിൽ ഒരു പാരാമീറ്ററായി ഒരു ശൈലി പ്രയോഗിക്കുന്നു.
കാസ്കേഡിംഗ് അർത്ഥമാക്കുന്നത് ശൈലികൾ മറികടക്കാൻ കഴിയും എന്നാണ്. ശൈലികൾ നടപ്പിലാക്കുന്നതിനുള്ള മാർഗ്ഗങ്ങളുടെ മുകളിലുള്ള ലിസ്റ്റ് അസാധുവാക്കൽ ക്രമം പിന്തുടരുന്നു. ഒരു ഡൗൺസ്ട്രീം രീതിക്ക് ഉയർന്നതിനെ മറികടക്കാൻ കഴിയും.
ഉദാഹരണത്തിന്, ടാഗിലെ വാചകം ഞങ്ങൾ ബാഹ്യ ശൈലി ഫയലിൽ നിർവചിച്ചു
10 പോയിൻ്റ് ഫോണ്ടിൽ എഴുതണം. എന്നാൽ പേജ് ശീർഷകത്തിലാണെങ്കിൽ, അതേ വാചകം ടാഗിലുണ്ടെന്ന് ഞങ്ങൾ അധികമായി സൂചിപ്പിക്കുന്നു
12 പോയിൻ്റ് ഫോണ്ടിൽ എഴുതണം, അപ്പോൾ ടെക്സ്റ്റ് കൃത്യമായി ആ വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കും - അതായത്. പേജ് ഹെഡറിലെ ശൈലി ബാഹ്യ ഫയലിലെ ശൈലിയെ അസാധുവാക്കുന്നു.
ഇതെന്തിനാണു? ഓ ഇത് വളരെ ഉപയോഗപ്രദമായ കാര്യം. ഇപ്പോൾ ഞാൻ ഇത് ഒരു പ്രത്യേക ഉദാഹരണത്തിലൂടെ കാണിക്കും. ഞങ്ങളുടെ പേജിലെ തലക്കെട്ടിലെ എല്ലാ ലിങ്കുകൾക്കും ഇനിപ്പറയുന്ന ശൈലി നിർവചിച്ചിട്ടുണ്ടെന്ന് നമുക്ക് അനുമാനിക്കാം:
അതിനാൽ, ഹൈപ്പർലിങ്ക് ആയ ഏതൊരു വാചകവും സ്വയമേവ ചുവപ്പായി മാറുകയും ഇനി അടിവരയിടുകയും ചെയ്യില്ല. അതിനാൽ, പേജിൻ്റെ അവസാനത്തിൽ പകർപ്പവകാശം സൂചിപ്പിക്കാൻ ഞങ്ങൾ തീരുമാനിച്ചു, പക്ഷേ അതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാതിരിക്കാൻ അത് വളരെ ശ്രദ്ധിക്കപ്പെടാതിരിക്കാൻ. എന്നിരുന്നാലും, പകർപ്പവകാശവും ഒരു ലിങ്കായിരിക്കണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ഞങ്ങൾ ഇത് പേജിൽ ഒരിടത്ത് മാത്രം ചെയ്ത് ഇതിനായി നിർവ്വചിച്ചാൽ മതി അധിക ക്ലാസ്അനുചിതമായ. ഈ സാഹചര്യത്തിൽ, കാസ്കേഡിംഗ് ശൈലികൾ ഞങ്ങളുടെ സഹായത്തിന് വരും. ലിങ്ക് നിറം പ്രാദേശികമായി അസാധുവാക്കാൻ ഇത് മതിയാകും:
പകർപ്പവകാശം (സി)
1998-2001 ചെറി-ഡിസൈൻഞങ്ങൾ ഇത് സ്റ്റൈൽ പാരാമീറ്റർ ഉപയോഗിച്ചാണ് ചെയ്തത്, നിങ്ങൾ ഓർക്കുന്നതുപോലെ, അത് നിർവചിച്ചിരിക്കുന്ന ടാഗിൽ മാത്രമേ ഇത് പ്രവർത്തിക്കൂ. എന്താണ് നമുക്ക് വേണ്ടത്.
മുകളിലെ ഉദാഹരണത്തിൽ ഞാൻ അവതരിപ്പിച്ചത് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം പുതിയ ടാഗ്. അത്തരം കേസുകൾക്കായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. നമുക്ക് ശൈലി പ്രയോഗിക്കാൻ കഴിയുന്ന ഒരു മേഖല നിർവ്വചിക്കുക മാത്രമാണ് ഇത് ചെയ്യുന്നത്. ഇത് വളരെ സൗകര്യപ്രദമായ ടാഗ് ആണ്, കാരണം... അതിന് മുമ്പോ ശേഷമോ അനാവശ്യമായ പാഡിംഗ് ചേർക്കുന്നില്ല (അതായത് ശൂന്യം ലംബമായ ഇടം), ടാഗ് ചെയ്യുന്നതുപോലെ
ഒരു ക്ലാസ് ഉപയോഗിച്ച് ശൈലികൾ നിർവ്വചിക്കുന്നത് ഏത് ടാഗിലാണ് നല്ലത്? മിക്കപ്പോഴും, ഇനിപ്പറയുന്ന ഡിസൈനുകളിലൊന്ന് ഇതിനായി ഉപയോഗിക്കുന്നു:
എന്തോ
എന്തോ
എന്തോടാഗ് ചെയ്യുക
സമാനമായ , എന്നാൽ അതിന് മുമ്പും ശേഷവും (കൃത്യമായി അതേ പോലെ) ഒരു ബീറ്റ് ചെയ്യുന്നു എന്ന വ്യത്യാസത്തിൽ മാത്രം). പിന്നെ ഇവിടെ ടെക്സ്റ്റ് ശൈലി, പേജിൻ്റെ പ്രധാന ഉള്ളടക്കം അടങ്ങുന്ന, ടാഗ് പുനർ നിർവചിച്ചാണ് നല്ലത്
അല്ലാതെ ഒരു പ്രത്യേക ക്ലാസ് നിർവചിച്ചുകൊണ്ടല്ല.
രണ്ട് ബ്രൗസറുകളിലും ശരിയായ ഡിസ്‌പ്ലേയുമായി ബന്ധപ്പെട്ട ഒരു ചെറിയ കൂട്ടിച്ചേർക്കൽ - നിങ്ങൾ വെബ്സൈറ്റ് ഡിസൈനിനായി ഒരു ടേബിൾ ലേഔട്ട് ഉപയോഗിക്കുകയാണെങ്കിൽ, ടാഗിൽ മാത്രമല്ല പ്രധാന വാചകത്തിൻ്റെ ശൈലി നിങ്ങൾ നിർണ്ണയിക്കേണ്ടതുണ്ട്.
, കാരണം നെറ്റ്‌സ്‌കേപ്പ് ടേബിളിന് മുമ്പായി അസൈൻ ചെയ്ത ശൈലികൾ അവകാശമാക്കാൻ പൂർണ്ണമായും വിസമ്മതിക്കുന്നു.കാസ്കേഡിംഗ് കൈകാര്യം ചെയ്ത ശേഷം, നമുക്ക് വാക്യഘടനയെക്കുറിച്ച് സംസാരിക്കാം.
CSS വാക്യഘടന
ഓരോ ക്ലാസിൻ്റെയും വിവരണം ഇതുപോലുള്ള ഒരു നിർമ്മാണം ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്:ചെറുത് (അക്ഷര വലുപ്പം: 9pt; )
ആദ്യം, ക്ലാസിൻ്റെ പേര് സൂചിപ്പിച്ചിരിക്കുന്നു - ഇത് ഏകപക്ഷീയമായിരിക്കാം, പക്ഷേ അർത്ഥവത്തായ ഒരു പേര് നൽകുന്നത് ഇപ്പോഴും ഉചിതമാണ്. അടുത്തതായി, ആവശ്യമായ എല്ലാ പാരാമീറ്ററുകളും ഈ ക്ലാസിലെ. പരാമീറ്ററുകൾ പരസ്പരം അർദ്ധവിരാമങ്ങളാൽ വേർതിരിച്ചിരിക്കുന്നു. ദൈർഘ്യമേറിയ വിവരണം ഉപയോഗിക്കുന്ന മറ്റൊരു ഉദാഹരണം ഇതാ:
ചെറുത് (അക്ഷര വലുപ്പം: 9pt; നിറം: #eeeeee; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; )
രണ്ട് നിർമ്മാണങ്ങളിലും ഞാൻ ക്ലാസ്സിൻ്റെ പേര് ഒരു ഡോട്ട് ഉപയോഗിച്ചാണ് ആരംഭിച്ചത്, അങ്ങനെ ഒരു ജനറിക് ക്ലാസ് നിർവചിച്ചു, അതായത്. ഏത് ടാഗിലും പ്രയോഗിക്കാൻ കഴിയുന്ന ഒന്ന്. ഇനിപ്പറയുന്ന നിർമ്മാണം ഉപയോഗിച്ചാണ് ഇത് ചെയ്യുന്നത്:
സാർവത്രിക ക്ലാസുകൾ ഉള്ളതിനാൽ, ഒരുപക്ഷേ മറ്റു ചിലരുണ്ടോ? അത് ശരിയാണ്, ടാഗ് ക്ലാസുകൾ എന്ന് വിളിക്കപ്പെടുന്നവയും ഉണ്ട്:
p.small (അക്ഷര വലുപ്പം: 9pt; )
ഈ രീതിയിൽ നിർവചിച്ചിരിക്കുന്ന ഒരു ക്ലാസ് അത് ഉദ്ദേശിച്ച ടാഗിൽ മാത്രമേ പ്രവർത്തിക്കൂ, മറ്റെല്ലാവർക്കും അവഗണിക്കപ്പെടും:
ഈ വാചകം ചെറിയ ശൈലിയിൽ പ്രദർശിപ്പിക്കും
നമുക്ക് ഒരു ടാഗിന് മാത്രമല്ല, ഒരേസമയം നിരവധി പാരാമീറ്ററുകൾ നിർവചിക്കാം. ഇത് ചെയ്യുന്നതിന്, സ്റ്റൈൽ ഡെഫനിഷനിൽ കോമകളാൽ വേർതിരിച്ച് പട്ടികപ്പെടുത്തിയാൽ മതി:
p, td (അക്ഷര വലുപ്പം: 9pt; നിറം:പച്ച;)
ഈ സാങ്കേതികതയെ ഗ്രൂപ്പിംഗ് എന്ന് വിളിക്കുന്നു, ഈ സാഹചര്യത്തിൽ ഞങ്ങൾ നിർവചിച്ചിരിക്കുന്നു
ഒരേ വാചക വലുപ്പവും നിറവും.നിലവിലുള്ള ടാഗുകൾ അസാധുവാക്കുന്ന സാഹചര്യത്തിൽ, സ്റ്റൈൽ വിവരണത്തിൽ എല്ലാ പാരാമീറ്ററുകളും വ്യക്തമാക്കാൻ കഴിയില്ല, എന്നാൽ ഞങ്ങൾ മാറ്റാൻ ആഗ്രഹിക്കുന്നവ മാത്രം. മറ്റെല്ലാ പാരാമീറ്ററുകളും വ്യത്യസ്ത ടാഗുകൾക്ക് വ്യത്യസ്തമായ ഡിഫോൾട്ട് മൂല്യങ്ങൾ എടുക്കും.
കപട ക്ലാസുകൾ
സിഎസ്എസിൽ ഒരു കപട ക്ലാസ് പോലെയുള്ള ഒരു കാര്യമുണ്ട്. ഒരു സാധാരണ ക്ലാസിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ ശൈലി പ്രയോഗിച്ച മുഴുവൻ വാചകത്തിനും ഒരു കപട ക്ലാസിൻ്റെ പ്രഭാവം ബാധകമല്ല, മറിച്ച് അതിൻ്റെ ഒരു ഭാഗത്തിന് മാത്രം ബാധകമാണ്, ഒരു പ്രത്യേക അവസ്ഥയിൽ മാത്രമേ ഇത് സാധ്യമാകൂ. ഇത് കൂടുതൽ വ്യക്തമാക്കുന്നതിന്, ലിങ്കുകൾക്ക് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ മാത്രം അടിവരയിടുന്ന ഇഫക്റ്റ് നോക്കാം. പ്രഭാവം വളരെ സാധാരണമാണ്, ഈ സൈറ്റിലും ഇത് നിരീക്ഷിക്കാവുന്നതാണ്. മുകളിലുള്ള പ്രഭാവം നേടാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു സ്റ്റൈൽ ഷീറ്റിൻ്റെ ഒരു ഭാഗം ഇതാ:a (ടെക്സ്റ്റ് അലങ്കാരം: ഒന്നുമില്ല; )
a:hover (ടെക്സ്റ്റ് ഡെക്കറേഷൻ: അടിവര; )മുകളിലെ വരി ഒരു ഓവർറൈഡാണ് സ്റ്റാൻഡേർഡ് ടാഗ് , ലിങ്കുകൾ അടിവരയിടുന്നതിൽ നിന്ന് തടയുന്നു, എന്നാൽ താഴെയുള്ളത് ഹോവർ സ്യൂഡോ-ക്ലാസിൻ്റെ ഒരു ശൈലി നിർവചനമാണ്, കഴ്സർ അതിന് മുകളിലായിരിക്കുമ്പോൾ ലിങ്കിൻ്റെ ശൈലി വിവരിക്കുന്നു.
ഒരു കപട ക്ലാസിൻ്റെ മറ്റൊരു ഉദാഹരണം ഇതാ - ഒരു ഖണ്ഡികയുടെ തുടക്കത്തിൽ ഒരു ഡ്രോപ്പ് ക്യാപ് നിർവചിക്കുന്നു:
p:ആദ്യ അക്ഷരം (അക്ഷര വലുപ്പം: 200%; ഫോണ്ട്-ഭാരം: ബോൾഡ്; )
രണ്ട് സാഹചര്യങ്ങളിലും, ശൈലി ഒരു നിർദ്ദിഷ്ട അവസ്ഥയെ (ഉപയോക്താവ് ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യാൻ പോകുന്നു) അല്ലെങ്കിൽ ഒരു വാചകം (ഖണ്ഡികയുടെ ആദ്യ അക്ഷരം മാത്രം മാറുന്നു) ബാധിക്കുന്നുവെന്നത് ശ്രദ്ധിക്കുക. ഇതാണ് കപടവർഗങ്ങളുടെ അർത്ഥം.
ഇൻ്റർനെറ്റിൻ്റെ റഷ്യൻ ഭാഗം അനുദിനം വളരുകയാണ്. കഴിഞ്ഞ ഒന്നോ രണ്ടോ വർഷങ്ങളിൽ, റഷ്യൻ ഭാഷയിലുള്ള പേജുകളുടെ ആകെ വോളിയം ഇരട്ടിയിലധികമായി. ഇന്ന് റഷ്യയിൽ നിങ്ങൾ ആരെയും ആശ്ചര്യപ്പെടുത്തുകയില്ല<домашняя страничка>അല്ലെങ്കിൽ ഒരു ഇംഗ്ലീഷ് വാക്ക്
. എങ്കിൽ നേരത്തെയുള്ള സൃഷ്ടിവെബ് പേജുകൾ വരേണ്യവർഗത്തിൻ്റെ ഭാഗമായിരുന്നു, അംഗീകൃതമായവർ മാത്രം റൂണറ്റിൻ്റെ വിശാലതയിൽ ഭരിച്ചു.<киты>വെബ് ഡിസൈൻ, ഇപ്പോൾ എൻ്റെ പത്തുവയസ്സുള്ള മകൻ പോലും ഒഴിവുസമയങ്ങളിൽ ചെറിയ കരകൗശലവസ്തുക്കൾ ഉണ്ടാക്കുന്നു സ്വന്തം പേജ്, ചിലതിൽ സ്ഥാപിക്കാൻ പദ്ധതിയിടുന്നു സ്വതന്ത്ര സെർവർ(narod.ru അല്ലെങ്കിൽ boom.ru പോലെ), ഏത് കഴിഞ്ഞ വര്ഷം RuNet-ലും അവയിൽ ധാരാളം ഉണ്ട്. ഇന്ന് വെബ് ഡിസൈനിൽ ഉൾപ്പെടാത്ത ആളുകൾ ഒരുപക്ഷേ ഇൻ്റർനെറ്റുമായി ബന്ധമില്ലാത്തവരോ മടിയന്മാരോ ആയിരിക്കും. പലരും, ഇൻ്റർനെറ്റിൽ അലഞ്ഞുതിരിഞ്ഞ്, താമസിയാതെ അല്ലെങ്കിൽ പിന്നീട് സ്വന്തം പേജ് സൃഷ്ടിക്കുന്നതിനെക്കുറിച്ച് ചിന്തിക്കുന്നു. അവർക്കുവേണ്ടിയാണ് ഈ ലേഖനം എഴുതിയത്. നമ്മൾ ഇവിടെ സംസാരിക്കും<правильном>തുടക്കക്കാർക്കുള്ള HTML, അതായത് - ചിലരെ കുറിച്ച് അധിക സവിശേഷതകൾ, ഇൻ്റർനെറ്റ് കൺസോർഷ്യം (http://www.w3.org/) ഔദ്യോഗികമായി അംഗീകരിച്ചു. പ്രത്യേകിച്ചും, ഡൈനാമിക് HTML (DHTML) നൽകുന്ന ചില കഴിവുകളെക്കുറിച്ച്. കൂടുതൽ കൃത്യമായി - എങ്ങനെ എന്നതിനെക്കുറിച്ച് CSS ഉപയോഗിക്കുന്നു(കാസ്കേഡ് സ്റ്റൈൽ ഷീറ്റുകൾ, അല്ലെങ്കിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) ഉപയോഗിച്ച് സൃഷ്ടിച്ച പേജുകളേക്കാൾ മികച്ചതായി ഒരു പേജ് സൃഷ്ടിക്കുക<классического>എച്ച്ടിഎംഎൽ, കുറച്ച് സ്ഥലം എടുക്കുമ്പോൾ, അതനുസരിച്ച്, വേഗത്തിൽ ലോഡുചെയ്യുന്നു.
ആദ്യമായി സ്വന്തം വെബ് പ്രാതിനിധ്യം സൃഷ്ടിക്കാൻ തീരുമാനിക്കുന്ന കുറച്ച് ആളുകൾക്ക് ഒരു നോട്ട്പാഡോ മറ്റോ ഉപയോഗിച്ച് ആയുധമുണ്ട് ടെക്സ്റ്റ് എഡിറ്റർ HomeSite പോലെ. സാധാരണയായി ഒരു തുടക്കക്കാരൻ ഇതുപോലെ ചിന്തിക്കുന്നു:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - ഞാൻ MS Word-ൽ ടെക്‌സ്‌റ്റുകൾ സൃഷ്ടിക്കുന്നു, MS PowerPoint-ൽ അവതരണങ്ങൾ, അതിനാൽ ഒരു വെബ് പേജ് സൃഷ്‌ടിക്കുന്നതിന് സമാനമായ ഒരു പ്രോഗ്രാം ഞാൻ എടുക്കും - MS ഫ്രണ്ട്പേജ്...> ഇത്തരമൊരു തീരുമാനം എടുത്ത ശേഷം, പുതുതായി തയ്യാറാക്കിയ വെബ് ശിൽപി സ്വയം രണ്ടുതവണ കൊള്ളയടിക്കുന്നു.
ആദ്യമായി - വെബ് സ്പേസിൻ്റെ യുക്തിസഹമായ ഉപയോഗത്തിൻ്റെ അർത്ഥത്തിൽ. പരാമർശിച്ച MS ഫ്രണ്ട്പേജ് ഉൾപ്പെടുന്ന വെബ് പേജുകളുടെ എല്ലാ വിഷ്വൽ എഡിറ്റർമാരും സൃഷ്ടിച്ച പേജുകളിലേക്ക് തിരുകുന്നു എന്നതാണ് വസ്തുത.<отсебятину>- അനാവശ്യമായ ധാരാളം ടാഗുകൾ. ഒഴിവാക്കൽ, ഒരുപക്ഷേ, മാക്രോമീഡിയ ഡ്രീംവീവർ ആണ് (ഇതിന് തുടക്കക്കാർക്കും പ്രൊഫഷണലുകൾക്കും ഇടയിൽ അർഹമായ പ്രശസ്തി നേടിയിട്ടുണ്ട്). എന്നാൽ ഇക്കാര്യത്തിൽ അവൻ പോലും അനുയോജ്യനല്ല - അവൻ ലിറ്റർ ഇഷ്ടപ്പെടുന്നു യഥാർത്ഥ വാചകംഉദ്ധരണികൾ (മിക്ക കേസുകളിലും പൂർണ്ണമായും അനാവശ്യമാണ്), കൂടാതെ ചിഹ്നങ്ങൾ ചേർക്കുക നോൺ-ബ്രേക്കിംഗ് സ്പേസ്ഇതിന് ഏറ്റവും അനുചിതമായ സ്ഥലങ്ങളിൽ. ന്യായമായി പറഞ്ഞാൽ, എല്ലാ വിഷ്വൽ എഡിറ്റർമാരും ഉപയോക്താവിന് പ്രവർത്തിക്കാനുള്ള അവസരം നൽകുന്നു എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ് സോഴ്സ് കോഡ് പേജ് സൃഷ്ടിക്കുന്നു, എന്നാൽ വളരെ പ്രിയപ്പെട്ട ഫ്രണ്ട്പേജ് നിങ്ങൾ വിഷ്വൽ മോഡിലേക്ക് മാറുമ്പോൾ ഉടൻ തന്നെ എല്ലാം അതിൻ്റേതായ രീതിയിൽ വീണ്ടും ചെയ്യും.
ഇതിൽ നിന്ന് രണ്ടാം തവണയും ഒരു തുടക്കക്കാരൻ സ്വയം കൊള്ളയടിക്കുന്നു, സൃഷ്ടിച്ച പേജ് ഉള്ളടക്കത്തിൻ്റെ പൂർണ്ണമായ നിയന്ത്രണവും - വിഷ്വൽ എഡിറ്റർമാർ സൃഷ്ടിക്കുന്ന പേജിൻ്റെ സോഴ്സ് കോഡുമായി നേരിട്ട് പ്രവർത്തിക്കുന്ന അതേ സർഗ്ഗാത്മകതയുടെ സ്വാതന്ത്ര്യം നൽകുന്നില്ല. നിനക്ക് തരൂ.
ശരി, ഇപ്പോൾ നമുക്ക് നേരിട്ട് കാര്യത്തിലേക്ക് കടക്കാം - കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ച് മനോഹരവും ചെറുതുമായ വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നു (കൂടുതൽ വാചകത്തിൽ ഞാൻ അവയുടെ ചുരുക്ക നാമം - CSS ഉപയോഗിക്കും). പ്രിയ വായനക്കാരേ, ആമുഖം വായിച്ച് നിങ്ങൾ എന്നോട് യോജിച്ചു, നിരസിച്ചുവെന്ന് അനുമാനിക്കുന്നു വിഷ്വൽ എഡിറ്റർമാർ, HTML-ൽ ഒരു പുസ്തകം ലഭിച്ചു, അടിസ്ഥാന ടാഗുകളും ആട്രിബ്യൂട്ടുകളും ഒരു ചെറിയ സംഖ്യയെങ്കിലും പഠിച്ചു, കൂടാതെ CSS എന്താണെന്നും അത് എന്തിനുവേണ്ടിയാണ് ഉപയോഗിക്കുന്നതെന്നും കണ്ടെത്താൻ ഉത്സുകരാണ്.
ലോജിക്കൽ, ഫിസിക്കൽ ഫോർമാറ്റിംഗ്
ക്ലാസിക്കൽ HTML പതിപ്പുകൾ 3.2, ഏറ്റവും സാധാരണമായത് ഈ നിമിഷംവെബിൽ, പ്രത്യേക ടാഗുകൾ (ഉദാഹരണത്തിന്, ടാഗുകൾ) ഉള്ള പ്രമാണങ്ങൾ ഭൗതികമായി ഫോർമാറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു മാർഗം ഞങ്ങൾക്ക് നൽകുന്നു , , ) കൂടാതെ നിരവധി വ്യത്യസ്ത ആട്രിബ്യൂട്ടുകൾ (വലിപ്പം, നിറം, ഉയരം, വീതി മുതലായവ). വെബ് ഫോർമാറ്റിംഗിൻ്റെ സവിശേഷതകൾ ഓരോ പുതിയ ഖണ്ഡികയ്ക്കും ഈ ടാഗുകളും ആട്രിബ്യൂട്ടുകളും വീണ്ടും വീണ്ടും എഴുതാൻ ഞങ്ങളെ നിർബന്ധിക്കുന്നു, ഇത് തീർച്ചയായും പേജ് കോഡിൻ്റെ വലുപ്പം വളരെയധികം വർദ്ധിപ്പിക്കുന്നു. കൂടാതെ, ഈ ഫോർമാറ്റിംഗ് രീതി ഉപയോഗിച്ച്, ഡോക്യുമെൻ്റിൻ്റെ ഘടന വിശകലനം ചെയ്യുന്ന സാഹചര്യത്തിൽ, എന്തുകൊണ്ടാണ് ഈ വാക്ക് ബോൾഡായി ഹൈലൈറ്റ് ചെയ്തതെന്ന് വ്യക്തമല്ല - സൗന്ദര്യത്തിനോ ശ്രദ്ധ ആകർഷിക്കാനോ പ്രത്യേക ശ്രദ്ധ അന്തിമ ഉപയോക്താവ്? ജീവിച്ചിരിക്കുന്ന ഒരാൾക്ക് ഇപ്പോഴും ക്ലാസിക് HTML-ലെ പേജുകളുടെ ലോജിക്കൽ നിർമ്മാണം മനസ്സിലാക്കാൻ കഴിയുമെങ്കിൽ, അപ്പോൾ സെർച്ച് എഞ്ചിനുകൾഓഅല്ലെങ്കിൽ, ഉദാഹരണത്തിന്, വോയ്‌സ് ബ്രൗസറുകളിൽ ഇത് പറയാൻ കഴിയില്ല. അവ പുറത്തെടുത്ത് പേജിൻ്റെ ഘടനയിൽ ശുദ്ധമായ യുക്തി സ്ഥാപിക്കുക. ഇത് കൃത്യമായി കാരണം<неподвластности>ലോജിക്കൽ വിശകലനത്തിന്, ഈ ഫോർമാറ്റിംഗ് രീതിയെ ഫിസിക്കൽ ഫോർമാറ്റിംഗ് എന്ന് വിളിക്കുന്നു. ഇതിനു വിപരീതമായി, പുതിയ HTML 4.0 സ്പെസിഫിക്കേഷൻ സൃഷ്ടിക്കുമ്പോൾ, ലോജിക്കൽ ഫോർമാറ്റിംഗ് മുൻനിരയിൽ വെച്ചു, അതായത്, ഡോക്യുമെൻ്റിൻ്റെ ഘടനയും രൂപകൽപ്പനയും വ്യക്തമായി വേർതിരിക്കുന്ന ഫോർമാറ്റിംഗ്. ഈ ഫോർമാറ്റിംഗ് രീതി ഇൻ്റർനെറ്റ് കൺസോർഷ്യം ഉപയോഗിക്കുന്നതിന് ശുപാർശ ചെയ്യുന്നു, കാരണം ഇത് ഇൻ്റർനെറ്റിൽ വിവരങ്ങൾ തിരയുന്നതിനുള്ള വിപുലമായ അവസരങ്ങൾ നൽകുന്നു, തിരയൽ എഞ്ചിനുകൾ ഉപയോഗിച്ച് വിവരങ്ങൾ കൂടുതൽ കൃത്യമായി രൂപപ്പെടുത്താനും വിശകലനം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു, കൂടാതെ പേജുകളുടെ വലുപ്പവും അവയുടെ സമയവും ഗണ്യമായി കുറയ്ക്കുന്നു. മുഴുവൻ ലോഡ്. ഡോക്യുമെൻ്റ് ഘടനയും രൂപകൽപ്പനയും വേർതിരിക്കുന്നത് CSS ഉപയോഗിച്ചാണ്.
തുടക്കം എന്ന വസ്തുത ശ്രദ്ധിക്കേണ്ടതാണ് ലോജിക്കൽ ഫോർമാറ്റിംഗ്ക്ലാസിക് HTML ടാഗുകളിലും ഉണ്ടായിരുന്നു
,
,
, തീർച്ചയായും, ചില ലോജിക്കൽ ബ്ലോക്കുകളായി രേഖകളുടെ വിഭജനത്തിന് സംഭാവന നൽകി. എന്നാൽ പല പേജ് രചയിതാക്കളും ഈ ടാഗുകൾ മറ്റ് ആവശ്യങ്ങൾക്കായി ഉപയോഗിച്ചു, ഇന്നും ഉപയോഗിക്കുന്നത് തുടരുന്നു: പേജ് രൂപകൽപ്പനയ്ക്കുള്ള വിഭവങ്ങളുടെ ദൗർലഭ്യം കാരണം, തലക്കെട്ട് ടാഗുകൾ, ഉദാഹരണത്തിന്, പേജിലെ യഥാർത്ഥ തലക്കെട്ടുകളല്ലാത്ത ഘടകങ്ങൾ ഹൈലൈറ്റ് ചെയ്യാൻ ഉപയോഗിച്ചു. മറുവശത്ത്, ലോജിക്കൽ ഫോർമാറ്റിംഗ് നിയമങ്ങൾ കൂടുതൽ സൂക്ഷ്മമായി പിന്തുടരുന്നതിനും പേജിൻ്റെ ഘടനയെ അതിൻ്റെ ദൃശ്യ അവതരണത്തിൽ നിന്ന് യഥാർത്ഥത്തിൽ വേർതിരിക്കുന്നതിനും നിങ്ങളെ അനുവദിക്കുന്നതിന് ആവശ്യമായ സ്റ്റൈലിംഗ് ടൂളുകൾ CSS നൽകുന്നു.
വ്യക്തിഗത പേജ് ഘടകങ്ങളിലേക്ക് ശൈലികൾ അസൈൻ ചെയ്യുന്നു
നിങ്ങളുടെ സ്വന്തം ശൈലി നിയോഗിക്കാൻ CSS നിങ്ങളെ അനുവദിക്കുന്നു വിഷ്വൽ പ്രാതിനിധ്യംഉൾപ്പെടെ ഏതെങ്കിലും HTML ടാഗ്
. ടാഗിനായി ശൈലി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ , ഈ കണ്ടെയ്നർ ടാഗിനുള്ളിൽ സ്ഥാപിച്ചിരിക്കുന്ന എല്ലാ ഘടകങ്ങളാലും (ഖണ്ഡികകൾ, തലക്കെട്ടുകൾ മുതലായവ) ഇത് പാരമ്പര്യമായി ലഭിക്കുന്നു, അഭാവത്തിൽ സ്വന്തം ശൈലികൾഈ ഘടകങ്ങൾക്ക്. അതിനാൽ, നമുക്ക് ഇനി ടാഗുകൾ എഴുതേണ്ടതില്ല പേജിലെ ഓരോ ഖണ്ഡികയ്ക്കും നിറം, വലുപ്പം മുതലായവ ആട്രിബ്യൂട്ടുകൾ - ടാഗിനായി ഒരു പ്രത്യേക ശൈലി സജ്ജമാക്കുക , കൂടാതെ പേജിലെ എല്ലാ ഖണ്ഡികകളും ഈ ശൈലി അനുസരിച്ച് പ്രദർശിപ്പിക്കും. ഇത് എങ്ങനെ ചെയ്യണം?എല്ലാ ഖണ്ഡികകളും 12-പോയിൻ്റ് ടൈംസ് ന്യൂ റോമൻ ഫോണ്ടിൽ ഇരുണ്ട പച്ചയിൽ പ്രദർശിപ്പിക്കണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ടാഗിൻ്റെ ശൈലി ആട്രിബ്യൂട്ട് വ്യക്തമാക്കേണ്ടതുണ്ട്
, അതിന് ഉചിതമായ മൂല്യം നൽകുന്നു. വാക്യഘടന ഇതാണ്:അതിനാൽ, പേജിലെ എല്ലാ ഖണ്ഡികകളും ഞങ്ങൾ ആഗ്രഹിച്ച രീതിയിൽ പ്രദർശിപ്പിക്കും, കൂടാതെ കോഡ് ടാഗുകളാൽ അടഞ്ഞിട്ടില്ല അവരുടെ ഗുണങ്ങളും. നിങ്ങളുടെ പേജിൽ ധാരാളം ടെക്‌സ്‌റ്റുകൾ അടങ്ങിയിട്ടുണ്ടെങ്കിൽ ഫയൽ വലുപ്പം ലാഭിക്കുമെന്ന് സങ്കൽപ്പിക്കുക!
ഞങ്ങൾ ഫോണ്ട് ശൈലി വ്യക്തമാക്കുമ്പോൾ, ടൈംസ് ന്യൂ റോമൻ എന്ന പേരിന് ശേഷം സെരിഫ് ശൈലിയാണ് ഞങ്ങൾ വ്യക്തമാക്കിയത്, അതായത് സെരിഫുകളുള്ള ഏത് ഫോണ്ടും. അന്തിമ ഉപയോക്താവിൻ്റെ മെഷീനിൽ ടൈംസ് ന്യൂ റോമൻ ഫോണ്ട് ഇൻസ്റ്റാൾ ചെയ്തിട്ടില്ലെങ്കിൽ, ബ്രൗസർ ലഭ്യമായ ഏതെങ്കിലും സെരിഫ് ഫോണ്ടുകൾ മാറ്റിസ്ഥാപിക്കും, കൂടാതെ പേജ് ഡിസ്പ്ലേ നിങ്ങൾ ഉദ്ദേശിച്ചതിന് കഴിയുന്നത്ര അടുത്തായിരിക്കും. കൂടാതെ, നൽകിയിരിക്കുന്ന ഉദാഹരണം IE (4.0 ഉം ഉയർന്നതും) NN (4.0 ഉം അതിലും ഉയർന്നതും) എന്നിവയ്ക്ക് മനസ്സിലാക്കാവുന്നതേയുള്ളൂ. CSS-ഉം DHTML-ഉം നൽകുന്ന എല്ലാ സവിശേഷതകളെയും നെറ്റ്‌സ്‌കേപ്പ് നാവിഗേറ്റർ പിന്തുണയ്ക്കുന്നില്ലെന്ന് ഞങ്ങൾ ഉടൻ തന്നെ ഒരു റിസർവേഷൻ നടത്തേണ്ടതുണ്ടെങ്കിലും, ഇത് തീർച്ചയായും അതിൻ്റെ ആരാധകരുടെ എണ്ണം വർദ്ധിപ്പിക്കുന്നില്ല.
മുകളിലെ ഉദാഹരണം, ഇൻലൈൻ ശൈലി എന്ന് വിളിക്കപ്പെടുന്ന ഡോക്യുമെൻ്റ് ടാഗിലേക്ക് ശൈലി നേരിട്ട് ഉൾച്ചേർക്കുന്നു. ഒരു HTML ഫയലിലേക്ക് CSS ലിങ്ക് ചെയ്യുന്ന ഈ രീതി ഒറ്റപ്പെട്ട സന്ദർഭങ്ങളിൽ ശുപാർശ ചെയ്യപ്പെടുന്നു - സൈറ്റിൻ്റെ ഒരു പേജിലെ ഒരു ഘടകത്തിൽ മാത്രം ഈ ശൈലി പ്രയോഗിക്കാൻ പദ്ധതിയിട്ടിട്ടുണ്ടെങ്കിൽ. ഒരേ പേജിലെ നിരവധി ഘടകങ്ങളിലേക്കോ ഒരേസമയം നിരവധി പേജുകളിലേക്കോ ശൈലി പ്രയോഗിക്കേണ്ടതുണ്ടെങ്കിൽ, CSS ഉം HTML ഉം ലിങ്ക് ചെയ്യുന്നതിനുള്ള മറ്റ് രീതികൾ ശുപാർശ ചെയ്യുന്നു, അത് ഞങ്ങൾ അടുത്തതായി ചർച്ച ചെയ്യും.
ഒരേ പേജിലെ ഒന്നിലധികം ഘടകങ്ങളിലേക്ക് ശൈലികൾ അസൈൻ ചെയ്യുന്നു - ഒരു ഉൾച്ചേർത്ത സ്റ്റൈൽ ഷീറ്റ് സൃഷ്ടിക്കുന്നു
ഒരു ഘടകത്തിന് ഒരു ശൈലി മാത്രം സജ്ജീകരിക്കുന്നതിനെക്കുറിച്ചാണ് നമ്മൾ ഇതുവരെ സംസാരിച്ചത്. സ്റ്റൈൽ ഷീറ്റുകൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഇപ്പോൾ നമ്മൾ പഠിക്കും.
പേജിലെ എല്ലാ ഖണ്ഡികകളും മുമ്പത്തെ ഉദാഹരണം പോലെ കാണണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, എല്ലാ ഫസ്റ്റ്-ലെവൽ തലക്കെട്ടുകളും പച്ച 16-പോയിൻ്റ് ബോൾഡ് ഏരിയലും, രണ്ടാം ലെവൽ തലക്കെട്ടുകൾ 14-പോയിൻ്റ് ഹെൽവെറ്റിക്ക ബോൾഡ് ഇറ്റാലിക് മഞ്ഞ-പച്ചയും. . ഇത് ചെയ്യുന്നതിന്, നമ്മൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്<голове>പേജുകൾ (ടാഗുകൾക്കിടയിൽ എവിടെയും
ഒപ്പം) ഞങ്ങൾ ഒരേസമയം നിരവധി നിയമങ്ങൾ എഴുതുന്ന ഒരു ഉൾച്ചേർത്ത സ്റ്റൈൽ ഷീറ്റ്. ഇത് ചെയ്യുന്നതിന്, ഒരു ഓപ്പണിംഗ് ടാഗിൽ ആരംഭിക്കുന്ന ഒരു സ്റ്റൈൽ ഷീറ്റ് കണ്ടെയ്നർ ടാഗ് സൃഷ്ടിക്കുക. ഈ കണ്ടെയ്നർ ടാഗിനുള്ളിൽ, ഒരു സെലക്ടർ (പേര്) അടങ്ങുന്ന എത്ര CSS നിയമങ്ങൾ വേണമെങ്കിലും സജ്ജമാക്കാൻ ഞങ്ങൾക്ക് സ്വാതന്ത്ര്യമുണ്ട് HTML ടാഗ്, ഏത് റൂൾ പ്രയോഗിക്കും) അതിൻ്റെ നിർവചനവും (നേരിട്ട് ഒരു കൂട്ടം ഫോർമാറ്ററുകൾ), ചുരുണ്ട ബ്രേസുകളിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്നു. മുകളിലുള്ള ഉദാഹരണത്തിനുള്ള വാക്യഘടന ഇതാണ്:
... ...CSS ഉം HTML ഉം ബന്ധിപ്പിക്കുന്ന ഈ രീതിയെ എംബെഡിംഗ് എന്ന് വിളിക്കുന്നു. സൈറ്റിൻ്റെ ഒരു പേജിന് മാത്രമായി ഒരു നിശ്ചിത ഫോർമാറ്റിംഗ് നിയമങ്ങൾ സജ്ജമാക്കാൻ നിങ്ങൾ തീരുമാനിക്കുന്ന സന്ദർഭങ്ങളിൽ ഇത് ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു, നിങ്ങളുടെ പ്ലാൻ അനുസരിച്ച്, മറ്റെല്ലാ പേജുകളും വ്യത്യസ്തമായി കാണണം.
ഒരേസമയം നിരവധി സൈറ്റ് പേജുകളിലേക്ക് ശൈലികൾ അസൈൻ ചെയ്യുന്നു
വേണ്ടി ഉൾച്ചേർക്കുന്നതിനും ഉൾച്ചേർക്കുന്നതിനും പുറമേ CSS ലിങ്കുകൾസ്റ്റൈൽ ഷീറ്റുകൾ ഇറക്കുമതി ചെയ്യുന്നതിനും ലിങ്കുചെയ്യുന്നതിനുമുള്ള വഴികൾ HTML ഉപയോഗിക്കുന്നു. ഇത് തീർച്ചയായും മികച്ച വഴികൾഒരു സൈറ്റിൻ്റെ നിരവധി (അല്ലെങ്കിൽ എല്ലാം) പേജുകൾക്ക് ഒരു ഏകീകൃത ശൈലി നൽകാൻ. ഈ സാഹചര്യത്തിൽ, മുഴുവൻ സ്റ്റൈൽ ഷീറ്റും ഒരു ഫയലിൽ സൂക്ഷിക്കുന്നു (ഫയൽ എക്സ്റ്റൻഷൻ സ്റ്റാൻഡേർഡ് ആയിരിക്കണം - .css).
അത്തരമൊരു ഫയലിൻ്റെ ഉള്ളടക്കത്തിൻ്റെ ഒരു ഉദാഹരണം ഇതാ (ഉദാഹരണത്തിന്, my.css):
ബോഡി (ഫോണ്ട്-ഫാമിലി: "ടൈംസ് ന്യൂ റോമൻ", സെരിഫ്; ഫോണ്ട്-സൈസ്: 12pt; നിറം: ഇരുണ്ട പച്ച; ) h1 (ഫോണ്ട്-ഫാമിലി: ഏരിയൽ, സാൻസ്-സെരിഫ്; ഫോണ്ട്-സൈസ്: 16pt; നിറം: പച്ച; ഫോണ്ട്-ഭാരം : bold; ) h2 ( font-family: Arial, sans-serif; font-size: 14pt; colour: greenyellow; font-weight: bold; font-style: italic; )
ദയവായി ശ്രദ്ധിക്കുക: ടാഗുകൾഫയലിനുള്ളിൽ സ്റ്റൈൽ ഷീറ്റുകളൊന്നും ഉപയോഗിക്കുന്നില്ല - .css എക്സ്റ്റൻഷൻ, ഫയൽ ഒരു സ്റ്റൈൽ ഷീറ്റാണെന്ന് ബ്രൗസറിന് വ്യക്തമായി സൂചിപ്പിക്കുന്നു. അത്തരത്തിലുള്ള ഒരു ഫയൽ ഒരേസമയം നിരവധി പേജുകളിലേക്ക് ലിങ്ക് ചെയ്യാം (അല്ലെങ്കിൽ ഒരേസമയം നിരവധി പേജുകളിലേക്ക് ഇമ്പോർട്ടുചെയ്യാം). ലിങ്ക് ചെയ്യുന്നതിനുള്ള html ഫയലിൽ നിങ്ങൾ ടാഗുകൾക്കിടയിൽ എവിടെയും എഴുതേണ്ടതുണ്ട്
ഒപ്പംഇനിപ്പറയുന്ന വരി:
... ...ലിങ്ക് ചെയ്തിരിക്കുന്ന ഫയൽ ഒരു സ്റ്റൈൽ ഷീറ്റ് (rel="stylesheet") ആണെന്ന് ഈ ലൈൻ സൂചിപ്പിക്കുന്നു, ഈ ഫയലിൻ്റെ ഫോർമാറ്റ് .css (type="text/css") ആണ്, അത് അതേ ഡയറക്‌ടറിയിലാണ് സ്ഥിതി ചെയ്യുന്നത്. html ഫയൽ, അല്ലെങ്കിൽ മറ്റൊരു URL ഉണ്ട് (href="my.css"). വ്യക്തമായും, ഈ വരി നമ്മുടെ ഏതെങ്കിലും (അല്ലെങ്കിൽ എല്ലാ) html ഫയലുകളിലും എഴുതാം. അങ്ങനെ, ഒന്ന് സ്റ്റൈലിംഗ്ഒരേസമയം നിരവധി പേജുകൾക്കായി രജിസ്റ്റർ ചെയ്യും.
ഇൻലൈൻ ശൈലികൾ (ഇതിനായി എഴുതിയ ശൈലികൾ വ്യക്തിഗത ഘടകങ്ങൾസ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്ന പേജുകളും എംബഡഡ് ശൈലികളും (എഴുതിയ ശൈലികൾ<голове>ഒരു കണ്ടെയ്നർ ടാഗിനുള്ളിലെ പേജുകൾ ...
ഇറക്കുമതി ചെയ്ത സ്റ്റൈൽ ഷീറ്റിൻ്റെ വിലാസം കൂടാതെ, നിങ്ങൾക്ക് കണ്ടെയ്നർ ടാഗിൽ എഴുതാം ...
...പത്രപ്രവർത്തകൻ്റെ ചോദ്യം
അഭിമുഖം നടത്തുന്നയാളുടെ പ്രതികരണം
...
മുകളിലുള്ള ഉദാഹരണത്തിൽ, പത്രപ്രവർത്തകൻ്റെ ചോദ്യങ്ങൾ ഏരിയൽ ഫോണ്ടിൽ പ്രദർശിപ്പിക്കും ചാരനിറം, ബോൾഡ്, ഇറ്റാലിക്, പേജിൻ്റെ ഇടത് അറ്റത്ത് നിന്ന് 15 പിക്സലുകളുടെ ഇൻഡൻ്റോടുകൂടിയ 10 പോയിൻ്റ് വലുപ്പം. ഉത്തരങ്ങൾ 12-പോയിൻ്റ് ബ്ലാക്ക് ടൈംസ് ന്യൂ റോമൻ ഫോണ്ടിൽ പ്രദർശിപ്പിക്കും. വിവിധ ഖണ്ഡിക ക്ലാസുകളിലേക്ക് നേരിട്ട് ക്ലാസ് പാരാമീറ്റർ അസൈൻ ചെയ്യാൻ മറക്കാതിരിക്കേണ്ടത് പ്രധാനമാണ് html കോഡ്. ഏത് പേജ് ഘടകങ്ങൾക്കുമായി നിങ്ങൾക്ക് എത്ര ക്ലാസുകൾ വേണമെങ്കിലും സൃഷ്ടിക്കാൻ കഴിയും.
ഐഡി സെലക്ടർ
നമുക്ക് മറ്റൊരു കേസ് എടുക്കാം. JavaScript പ്രോഗ്രാമുകളിൽ നിന്ന് ഭാവിയിൽ നിങ്ങൾ ആക്സസ് ചെയ്യാൻ ഉദ്ദേശിക്കുന്ന പേജിൽ ചില അദ്വിതീയ ഘടകങ്ങൾ സൃഷ്ടിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയാം. ഒരുപക്ഷേ ഈ ഘടകങ്ങൾ മറ്റ് പേജുകളിൽ ആവർത്തിക്കപ്പെടും, കൂടാതെ CSS ഉപയോഗിച്ച് അവയ്ക്ക് സ്ഥിരതയുള്ള ഒരു രൂപം നൽകാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾക്ക് അദ്വിതീയ ഘടകങ്ങൾക്ക് ഐഡൻ്റിഫയറുകൾ (ഐഡി) നൽകാനുള്ള കഴിവുണ്ട്. HTML 4.0 സ്പെസിഫിക്കേഷനിൽ പൂർണ്ണമായതോ പരിമിതമായതോ ആയ CSS പിന്തുണയുള്ള ഫോം ഘടകങ്ങൾക്കാണ് ഐഡൻ്റിഫയറുകളുടെ ഏറ്റവും സാധാരണമായ ഉപയോഗം (ഘടകത്തെ ആശ്രയിച്ച്). അത്തരം ഘടകങ്ങൾക്ക് ഐഡിയും CSS നിയമങ്ങളും നൽകുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ:
... ... ... ...
അതുപോലെ, എത്ര പേജ് എലമെൻ്റുകൾക്കും അദ്വിതീയ ഐഡൻ്റിഫയറുകൾ നൽകാം. ഒരു പ്രോഗ്രാമിൽ നിന്ന് ഒരു ഘടകം ആക്സസ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാകും ജാവാസ്ക്രിപ്റ്റ്വിവിധ ചലനാത്മക ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഉപയോക്തൃ പ്രവർത്തനങ്ങളോടുള്ള പ്രതികരണമായി അതിൻ്റെ ഡിസ്പ്ലേയുടെ ശൈലി മാറ്റുന്നു.
സന്ദർഭ സെലക്ടറുകൾ
പേജിലെ എല്ലാ ഫസ്റ്റ് ലെവൽ തലക്കെട്ടുകളും ചുവന്ന നിറത്തിൽ പ്രദർശിപ്പിക്കുന്ന ഒരു സ്റ്റൈൽ ഷീറ്റ് ഞങ്ങൾ സൃഷ്ടിച്ചുവെന്ന് പറയാം. ചാര പശ്ചാത്തലം, എല്ലാ ഖണ്ഡികകളും മഞ്ഞ പശ്ചാത്തലത്തിൽ പച്ചയിലാണ്, ടാഗ് ഉപയോഗിച്ച് എല്ലാം ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു ഖണ്ഡികകൾക്കുള്ളിൽ 1 വാക്കുകൾ - വെള്ളി പശ്ചാത്തലത്തിൽ കറുപ്പ്. സ്റ്റൈൽ ഷീറ്റ് കോഡ്, നിങ്ങൾ ഊഹിച്ചതുപോലെ, ഇതുപോലെ കാണപ്പെടുന്നു:
H1 (നിറം: ചുവപ്പ്; പശ്ചാത്തല-നിറം: ചാര; ) p (നിറം: പച്ച; പശ്ചാത്തല നിറം: മഞ്ഞ; ) em (നിറം: കറുപ്പ്; പശ്ചാത്തല-നിറം: വെള്ളി; )
അതേ ടാഗ് ഉപയോഗിച്ച് തലക്കെട്ടിലെ ചില വാക്കുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക , എന്നാൽ ഹെഡ്ഡറിൽ ഒരു വെള്ളി പശ്ചാത്തലത്തിൽ കറുത്ത വാചകം പ്രത്യക്ഷപ്പെടുന്നതിൽ ഞങ്ങൾക്ക് സന്തോഷമില്ല. ചാരനിറത്തിലുള്ള പശ്ചാത്തലത്തിൽ ബർഗണ്ടിയിൽ ശീർഷകത്തിലെ വാക്കുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. ഇതിനായി സന്ദർഭം തിരഞ്ഞെടുക്കുന്നവരുണ്ട്. ഇതിനായി സ്റ്റൈൽ ഷീറ്റിലേക്ക് ഞങ്ങൾ ചേർക്കുന്ന റൂൾ എൻട്രി ഇതുപോലെ കാണപ്പെടും:
H1 em (നിറം: #CC0000; പശ്ചാത്തല നിറം: ചാരനിറം; )
ഈ സന്ദർഭ സെലക്ടർ ഉപയോഗിക്കുന്ന പേജ് കോഡിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:
... ... ...ഇതാണ് ആദ്യ തല തലക്കെട്ട് ഹൈലൈറ്റ് ചെയ്തുഒരു വാക്കിൽ
കൂടാതെ ഇത് ഒരു സാധാരണ ഖണ്ഡികയാണ് ഹൈലൈറ്റ് ചെയ്ത വാക്കുകളിൽ
...
ഇന്നത്തേക്ക് അത്രയേ ഉള്ളൂ. അടുത്ത തവണ, ബ്ലോക്ക് പേജ് ഘടകങ്ങൾ ഫോർമാറ്റ് ചെയ്യുന്നതിനുള്ള നിയമങ്ങൾ, ഘടകങ്ങളുടെ സ്ഥാനനിർണ്ണയം, CSS ഉപയോഗിച്ച് നടപ്പിലാക്കിയ മറ്റ് രസകരവും ഉപയോഗപ്രദവുമായ സവിശേഷതകൾ എന്നിവയെക്കുറിച്ച് ഞങ്ങൾ സംസാരിക്കും.
- ശൈലി.
css
