, ഇത് ഒരു ഫ്ലെക്സ്ബോക്സ് അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടിലേക്ക് ചേർക്കേണ്ടതായിരുന്നു. ഇവിടെ നമ്മൾ യഥാർത്ഥ HTML ആണ് മാറ്റങ്ങളൊന്നും കൂടാതെ ഉപയോഗിക്കുന്നത്. CSS ഇതുപോലെ കാണപ്പെടുന്നു:

/* ഗ്രിഡ് അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ട് */ ബോഡി (പ്രദർശനം: ഗ്രിഡ്; മിനിട്ട്-ഉയരം: 100vh; ഗ്രിഡ്-ടെംപ്ലേറ്റ്-നിരകൾ: 200px 1fr 150px; ഗ്രിഡ്-ടെംപ്ലേറ്റ്-വരികൾ: കുറഞ്ഞ ഉള്ളടക്കം 1fr മിനിറ്റ്-ഉള്ളടക്കം; ) തലക്കെട്ട് (ഗ്രിഡ്-വരി : 1; ഗ്രിഡ് കോളം: 1/4; ) nav (ഗ്രിഡ്-വരി: 2; ഗ്രിഡ്-നിര: 1/2; പാഡിംഗ്: 0 10px; ) പ്രധാന (ഗ്രിഡ്-നിര: 2; ഗ്രിഡ്-നിര: 2 / 3; പാഡിംഗ്: 0 20px; ) അരികിൽ (ഗ്രിഡ്-വരി: 2; ഗ്രിഡ്-നിര: 3 / 4; പാഡിംഗ്: 0 10px; ) അടിക്കുറിപ്പ് (ഗ്രിഡ്-നിര: 3; ഗ്രിഡ്-നിര: 1 / 4; )
ഫലം ദൃശ്യപരമായി ഫ്ലെക്സ്ബോക്സ് അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടിന് സമാനമാണ്. എന്നിരുന്നാലും, ഇവിടെയുള്ള CSS കോഡ് നിങ്ങൾ തിരയുന്ന ലേഔട്ട് വ്യക്തമായി കാണിക്കുന്നു എന്ന അർത്ഥത്തിൽ വളരെ മികച്ചതാണ്. നിരകളുടെയും വരികളുടെയും വലുപ്പവും ആകൃതിയും ബോഡി സെലക്ടറിൽ നിർവചിച്ചിരിക്കുന്നു, ഓരോ ഗ്രിഡ് ഘടകവും അതിന്റെ സ്ഥാനം നേരിട്ട് നിർണ്ണയിക്കുന്നു.

ആശയക്കുഴപ്പമുണ്ടാക്കുന്ന ഒരേയൊരു കാര്യം ഗ്രിഡ്-കോളം പ്രോപ്പർട്ടി ആണ്, അത് നിരയുടെ ആരംഭവും അവസാനവുമുള്ള സ്ഥാനങ്ങൾ നിർവചിക്കുന്നു. ഈ ഉദാഹരണത്തിൽ മൂന്ന് നിരകൾ ഉള്ളതിനാൽ ഇത് ആശയക്കുഴപ്പമുണ്ടാക്കാം, പക്ഷേ 1 മുതൽ 4 വരെയുള്ള സംഖ്യകൾ ഉപയോഗിക്കുന്നു. നിങ്ങൾ ചിത്രീകരണം നോക്കുകയാണെങ്കിൽ സ്ഥിതി കൂടുതൽ വ്യക്തമാകും:

ഒരു യഥാർത്ഥ ഉദാഹരണത്തിനായി ക്ലിക്കുചെയ്യുക

ആദ്യ കോളം 1-ൽ ആരംഭിച്ച് സ്ഥാനത്ത് 2-ൽ അവസാനിക്കുന്നു, രണ്ടാമത്തെ കോളം 2-ൽ ആരംഭിച്ച് 3-ൽ അവസാനിക്കുന്നു, മൂന്നാമത്തെ കോളം 3-ൽ ആരംഭിച്ച് സ്ഥാനം 4-ൽ അവസാനിക്കുന്നു. തലക്കെട്ടിൽ ഗ്രിഡ്-നിര പ്രോപ്പർട്ടി 1/ ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. 4 മുഴുവൻ പേജിലെയും വിപുലീകരണത്തിനായി, nav ആദ്യ നിരയിലേക്ക് വികസിപ്പിക്കുന്നതിന് 1/2 മൂല്യമുള്ള ഗ്രിഡ് കോളം മുതലായവയെ സൂചിപ്പിക്കുന്നു.

നിങ്ങൾ ഗ്രിഡ് വാക്യഘടനയുമായി പരിചയപ്പെട്ടുകഴിഞ്ഞാൽ, CSS-ൽ ലേഔട്ട് ചെയ്യുന്നതിനുള്ള ഏറ്റവും അനുയോജ്യമായ മാർഗ്ഗം ഇതാണ് എന്ന് വ്യക്തമാകും. എല്ലാ ബ്രൗസറുകളിലും ഇത് പിന്തുണയ്ക്കുന്നില്ല എന്നതാണ് ഒരേയൊരു പോരായ്മ. എന്നാൽ കഴിഞ്ഞ വർഷം സ്ഥിതിഗതികൾ ഗണ്യമായി മെച്ചപ്പെട്ടു. അമിതമായി വിലയിരുത്താൻ പ്രയാസമാണ് CSS മൂല്യം CSS-ലെ ആദ്യത്തെ യഥാർത്ഥ ടൂളായി ഗ്രിഡ്, യഥാർത്ഥത്തിൽ ലേഔട്ടിനായി, അതായത്, മുഴുവൻ പേജിന്റെയും ലേഔട്ടിനായി സൃഷ്ടിച്ചതാണ്. ഒരർത്ഥത്തിൽ, ക്രിയേറ്റീവ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുമ്പോൾ വെബ് ഡിസൈനർമാർ എല്ലായ്പ്പോഴും വളരെ യാഥാസ്ഥിതികരായിരിക്കണം, കാരണം അടുത്തിടെ വരെ ഉപകരണങ്ങൾ വളരെ ദുർബലമായി തുടർന്നു, വൈവിധ്യമാർന്ന ഹാക്കുകളും നിലവാരമില്ലാത്ത പഴുതുകളും ആവശ്യമാണ്. ഇപ്പോൾ വരവോടെ CSS ഗ്രിഡ്മുമ്പൊരിക്കലും സാധ്യമല്ലാത്ത ക്രിയേറ്റീവ് ഡിസൈൻ ലേഔട്ടുകളുടെ ഒരു പുതിയ തരംഗത്തിന് സാധ്യതയുണ്ട് - ആവേശകരമായ സമയം!

- ലഭിച്ചു? നിങ്ങൾ CSS-ൽ എന്തെങ്കിലും മാറ്റുമ്പോൾ അത് മറ്റെന്തെങ്കിലും തകർക്കുന്നത് രസകരമാണ്!
- ഒരുപക്ഷേ, എന്നാൽ ഫ്ലെക്സ്ബോക്സ്, ഗ്രിഡ് തുടങ്ങിയ പുതിയ സ്പെസിഫിക്കേഷനുകൾക്കൊപ്പം എല്ലാം വളരെ മികച്ചതായി മാറിയിരിക്കുന്നു!
- ഹാ! കേവലം ലേഔട്ട് എന്നതിലുപരി CSS-ന് ഒരുപാട് കാര്യങ്ങൾ ഉണ്ട്!

പുതിയ വാക്യഘടനയ്ക്കായി ഒരു CSS പ്രീപ്രൊസസ്സർ ഉപയോഗിക്കുന്നു

ഇതുവരെ ഞങ്ങൾ പരിഗണിച്ചത് CSS ഉപയോഗിക്കുന്നുവേണ്ടി ലളിതമായ ശൈലികൾലേഔട്ടുകളും. ഇപ്പോൾ CSS ഭാഷയിൽ തന്നെ പ്രവർത്തിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന ടൂളുകൾ പഠിക്കാം. നമുക്ക് CSS പ്രീപ്രോസസറുകളിൽ നിന്ന് ആരംഭിക്കാം.

മറ്റ് ഭാഷകളിൽ ശൈലികൾ എഴുതാൻ ഒരു CSS പ്രീപ്രൊസസ്സർ നിങ്ങളെ അനുവദിക്കുന്നു, അത് പിന്നീട് CSS ആയി പരിവർത്തനം ചെയ്യപ്പെടുന്നു, അതുവഴി ബ്രൗസറിന് അവ മനസ്സിലാക്കാൻ കഴിയും. പുതിയ ഫീച്ചറുകളെ പിന്തുണയ്ക്കാൻ ബ്രൗസറുകൾ മന്ദഗതിയിലായിരുന്ന ഒരു സമയത്ത് ഇത് വളരെ പ്രധാനപ്പെട്ടതായിരുന്നു. ആദ്യത്തെ ജനപ്രിയ CSS പ്രീപ്രൊസസർ, സാസ്, 2006-ൽ പുറത്തിറങ്ങി. ഇത് ഒരു പുതിയ സംക്ഷിപ്ത വാക്യഘടന (പരാന്തീസിസിനുപകരം ഇൻഡന്റേഷൻ, അർദ്ധവിരാമങ്ങൾ ഇല്ല മുതലായവ) നടപ്പിലാക്കി, കൂടാതെ CSS-ൽ കാണാത്ത നൂതനമായ സവിശേഷതകളായ വേരിയബിളുകൾ, സഹായ പ്രവർത്തനങ്ങൾ, കണക്കുകൂട്ടലുകൾ എന്നിവ ചേർത്തു. വേരിയബിളുകൾക്കൊപ്പം Sass ഉപയോഗിക്കുമ്പോൾ ഞങ്ങളുടെ മുമ്പത്തെ ഉദാഹരണത്തിൽ നിന്നുള്ള നിറമുള്ള ഭാഗം എങ്ങനെയിരിക്കുമെന്ന് ഇതാ:

$dark-color: #4a4a4a $light-color: #f9f9f9 $side-color: #eee ശരീര നിറം: $dark-color header, അടിക്കുറിപ്പ് പശ്ചാത്തല നിറം: $dark-color നിറം: $ഇളം-നിറം പ്രധാന പശ്ചാത്തലം: $ലൈറ്റ് -color nav, പശ്ചാത്തലം മാറ്റി: $side-color
വീണ്ടും ഉപയോഗിച്ച വേരിയബിളുകളെ $ ചിഹ്നം എങ്ങനെ സൂചിപ്പിക്കുന്നുവെന്ന് ശ്രദ്ധിക്കുക. പരാൻതീസിസോ അർദ്ധവിരാമങ്ങളോ ഇല്ല, സിന്റാക്സ് ക്ലീനർ ആക്കുന്നു. ശുദ്ധമായ വാക്യഘടന നല്ലതാണ്, എന്നാൽ വേരിയബിളുകൾ പോലുള്ള സവിശേഷതകൾ അക്കാലത്ത് ശരിക്കും വിപ്ലവകരമായിരുന്നു, കാരണം അവ വൃത്തിയുള്ളതും പരിപാലിക്കാവുന്നതുമായ CSS എഴുതുന്നതിനുള്ള പുതിയ സാധ്യതകൾ തുറന്നു.

Sass ഉപയോഗിക്കുന്നതിന് നിങ്ങൾ റൂബി ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതുണ്ട്. ഈ പ്രോഗ്രാമിംഗ് ഭാഷ സാസ് കോഡ് പ്ലെയിൻ CSS-ലേക്ക് കംപൈൽ ചെയ്യാൻ ഉപയോഗിക്കുന്നു. അടുത്തതായി നിങ്ങൾ Sass ജെം ഇൻസ്റ്റാൾ ചെയ്യണം, തുടർന്ന് നിങ്ങളുടെ .sass ഫയലുകൾ .css ഫയലുകളിലേക്ക് പരിവർത്തനം ചെയ്യാൻ കമാൻഡ് ലൈനിൽ ഒരു കമാൻഡ് പ്രവർത്തിപ്പിക്കുക. അത്തരമൊരു കമാൻഡ് എങ്ങനെയിരിക്കും എന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

Sass --watch index.sass index.css

ഈ കമാൻഡ് index.sass ഫയലിലെ Sass കോഡിനെ index.css ഫയലിലെ പ്ലെയിൻ CSS ആയി പരിവർത്തനം ചെയ്യും (സംരക്ഷിച്ചതിന് ശേഷം ഇൻപുട്ട് മാറുമ്പോഴെല്ലാം പ്രവർത്തിക്കാൻ --watch ആർഗ്യുമെന്റ് വ്യക്തമാക്കുന്നു, അത് സൗകര്യപ്രദമാണ്).

ഈ പ്രക്രിയയെ ബിൽഡ് സ്റ്റേജ് എന്നറിയപ്പെടുന്നു, 2006 ൽ ഇത് പ്രവേശനത്തിന് വളരെ പ്രധാനപ്പെട്ട ഒരു തടസ്സമായിരുന്നു. റൂബി പോലുള്ള പ്രോഗ്രാമിംഗ് ഭാഷകൾ നിങ്ങൾക്ക് പരിചിതമാണെങ്കിൽ, എല്ലാം നിങ്ങൾക്ക് ലളിതമാണ്. എന്നാൽ അക്കാലത്ത് പല ഫ്രണ്ട്-എൻഡ് ഡവലപ്പർമാരും HTML, CSS എന്നിവയിൽ മാത്രമേ പ്രവർത്തിച്ചിട്ടുള്ളൂ, അത്തരം ഉപകരണങ്ങൾ ആവശ്യമില്ല. അതിനാൽ CSS പ്രീപ്രൊസസറിന്റെ സവിശേഷതകൾ പ്രയോജനപ്പെടുത്തുന്നതിന് മുഴുവൻ ആവാസവ്യവസ്ഥയും പഠിക്കുന്നത് ഒരു ഡവലപ്പർക്ക് തികച്ചും വെല്ലുവിളിയാണ്.

2009-ൽ, Less CSS പ്രീപ്രൊസസർ പുറത്തിറങ്ങി. ഇത് റൂബിയിലും എഴുതിയിട്ടുണ്ട് കൂടാതെ സാസിന് സമാനമായ പ്രവർത്തനക്ഷമതയുമുണ്ട്. പ്രധാന വ്യത്യാസം വാക്യഘടനയാണ്, അത് CSS-ന് കഴിയുന്നത്ര സാമ്യമുള്ളതാണ്. ഇതിനർത്ഥം ഏതെങ്കിലും CSS കോഡ് കൂടിയാണ് സാധുവായ കോഡ്കുറവ്. Less വാക്യഘടനയിലെ അതേ ഉദാഹരണം ഇതാ:

@ഇരുണ്ട-നിറം: #4a4a4a; @ഇളം-നിറം: #f9f9f9; @വശം-നിറം: #eee; ബോഡി (നിറം: @ഇരുണ്ട-നിറം; ) തലക്കെട്ട്, അടിക്കുറിപ്പ് (പശ്ചാത്തലം-നിറം: @ഇരുണ്ട-നിറം; നിറം: @ഇളം-നിറം; ) പ്രധാനം (പശ്ചാത്തലം: @ഇളം-നിറം; ) നവ്, അരികിൽ (പശ്ചാത്തലം: @വശം- നിറം;)
ഇത് ഏതാണ്ട് സമാനമാണ് (വേരിയബിളുകൾക്ക് $ എന്നതിനുപകരം @ പ്രിഫിക്സ് മാത്രം), എന്നാൽ ഇത് സാസ് ഉദാഹരണം പോലെ മനോഹരമായി കാണുന്നില്ല. CSS-ലെ അതേ ചുരുണ്ട ബ്രേസുകളും അർദ്ധവിരാമങ്ങളും ഇവിടെ കാണാം. എന്നാൽ ഇത് CSS-ന് അടുത്താണ് എന്നത് വെബ് ഡിസൈനർമാർക്ക് ഈ പ്രീപ്രൊസസ്സർ കൈകാര്യം ചെയ്യുന്നത് എളുപ്പമാക്കി. 2012-ൽ, കംപൈൽ ചെയ്യുമ്പോൾ റൂബിക്ക് പകരം JavaScript (പ്രത്യേകിച്ച് Node.js) ഉപയോഗിക്കാനായി Less മാറ്റിയെഴുതി. ഇതിനുശേഷം, Less അതിന്റെ റൂബി എതിരാളികളേക്കാൾ വേഗത്തിൽ പ്രവർത്തിക്കാൻ തുടങ്ങി, കൂടാതെ അവരുടെ ജോലിയിൽ Node.js ഉപയോഗിക്കുന്ന ഡെവലപ്പർമാർക്ക് പ്രീപ്രൊസസ്സർ തന്നെ കൂടുതൽ ആകർഷകമായി.

മുകളിലെ കോഡ് സാധാരണ CSS ആക്കി മാറ്റുന്നതിന്, നിങ്ങൾ ആദ്യം Node.js ഇൻസ്റ്റാൾ ചെയ്യണം, തുടർന്ന് Les ഇൻസ്റ്റാൾ ചെയ്ത് കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

Lessc index.less index.css

കമാൻഡ് index.less ഫയലിലെ Less കോഡ് index.css ഫയലിലെ സാധാരണ CSS ആക്കി മാറ്റും. sass പോലെ ഫയൽ മാറ്റങ്ങൾ നിരീക്ഷിക്കാൻ lessc കമാൻഡിന് ഒരു മാർഗമില്ല എന്നത് ശ്രദ്ധിക്കുക. അതിനാൽ, .less ഫയലുകൾ സ്വയമേവ ട്രാക്ക് ചെയ്യാനും കംപൈൽ ചെയ്യാനും നിങ്ങൾ മറ്റേതെങ്കിലും ടൂൾ ഉപയോഗിക്കേണ്ടിവരും, ഇത് പ്രക്രിയയെ കുറച്ചുകൂടി സങ്കീർണ്ണമാക്കുന്നു. വീണ്ടും, കമാൻഡ് ലൈൻ ടൂളുകൾ ഉപയോഗിക്കുന്ന പ്രോഗ്രാമർമാർക്ക് ഇത് വലിയ കാര്യമല്ല, എന്നാൽ ഒരു CSS പ്രീപ്രൊസസ്സർ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന കാഷ്വൽ ഡിസൈനർമാർക്ക് ഇത് ഒരു പ്രധാന തടസ്സമാണ്.

ജനപ്രീതി കുറഞ്ഞപ്പോൾ, ഡെവലപ്പർമാർ അവരുടെ പ്രീപ്രൊസസറിലേക്ക് സാസ് ചേർത്തു പുതിയ വാക്യഘടന 2010-ൽ SCSS (കുറവിനു സമാനമായ CSS-ന്റെ ഒരു സൂപ്പർസെറ്റ്). റൂബി സാസ് എഞ്ചിന്റെ C/C++ പോർട്ട് ആയ LibSass-ഉം അവർ പുറത്തിറക്കി, ഇത് വിവിധ ഭാഷകളിൽ പ്രോഗ്രാമിംഗിനായി വേഗത്തിലും കൂടുതൽ ആക്സസ് ചെയ്യാവുന്നതാക്കി.

മറ്റൊരു ബദൽ CSS പ്രീപ്രൊസസർ, സ്റ്റൈലസ്, 2010-ൽ പുറത്തിറങ്ങി. ഇത് Node.js-ൽ എഴുതിയിരിക്കുന്നു കൂടാതെ Sass അല്ലെങ്കിൽ Less എന്നിവയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു ക്ലീനർ വാക്യഘടനയുണ്ട്. സാധാരണഗതിയിൽ, CSS പ്രീപ്രൊസസ്സറുകൾ ചർച്ച ചെയ്യുമ്പോൾ, ഈ മൂന്ന് പ്രോഗ്രാമുകൾ ഏറ്റവും ജനപ്രിയമായവ (സാസ്, ലെസ്, സ്റ്റൈലസ്) ആയി പരാമർശിക്കപ്പെടുന്നു. എല്ലാത്തിനുമുപരി, അവയെല്ലാം പ്രവർത്തനക്ഷമതയിൽ വളരെ സാമ്യമുള്ളതാണ്, അതിനാൽ അവയിലൊന്നിലും നിങ്ങൾക്ക് തെറ്റ് ചെയ്യാൻ കഴിയില്ല.

എന്നിരുന്നാലും, ചിലർ വിശ്വസിക്കുന്നു ഈയിടെയായി CSS പ്രീപ്രൊസസ്സറുകളുടെ പ്രാധാന്യം കുറഞ്ഞു, കാരണം ബ്രൗസറുകൾ ഒടുവിൽ അവയുടെ ചില സവിശേഷതകൾ (വേരിയബിളുകളും കണക്കുകൂട്ടലുകളും പോലെ) നടപ്പിലാക്കാൻ തുടങ്ങി. മാത്രമല്ല, വിപരീത സമീപനമുണ്ട് - CSS പോസ്റ്റ്-പ്രോസസിംഗ്, ഇത് CSS പ്രീപ്രൊസസറുകൾ പൂർണ്ണമായും കാലഹരണപ്പെടും (വ്യക്തമായും ഇതൊരു വിവാദ വിഷയമാണ്). നമ്മൾ ഇപ്പോൾ CSS പോസ്റ്റ്-പ്രൊസസ്സറുകളെ നോക്കും.

പരിവർത്തന പ്രവർത്തനങ്ങൾക്കായി ഒരു CSS പോസ്റ്റ് പ്രോസസർ ഉപയോഗിക്കുന്നു

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

H1, h2, h3, h4, h5, h6 (-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )
രണ്ട് മുതൽ നാല് വരെയുള്ള വരികളെ വെണ്ടർ പ്രിഫിക്സുകൾ എന്ന് വിളിക്കുന്നു. പുതിയത് പരിശോധിക്കുമ്പോൾ ബ്രൗസറുകൾ വെണ്ടർ പ്രിഫിക്സുകൾ ഉപയോഗിക്കുന്നു CSS പ്രവർത്തനങ്ങൾഅല്ലെങ്കിൽ അവ പരീക്ഷണാത്മകമായി ഉപയോഗിക്കുക. ഈ രീതിയിൽ, ബ്രൗസറിൽ അന്തിമമായി നടപ്പിലാക്കുന്നതിന് മുമ്പ് ഡവലപ്പർമാർക്ക് ഈ സവിശേഷതകൾ പരിശോധിക്കാനാകും. ബ്രൗസറിനുള്ള -ms പ്രിഫിക്സ് ഇതാ മൈക്രോസോഫ്റ്റ് ഇന്റർനെറ്റ്എക്സ്പ്ലോറർ, Mozilla Firefox-നുള്ള -moz പ്രിഫിക്സും വെബ്കിറ്റ് അധിഷ്ഠിത ബ്രൗസറുകൾക്കുള്ള -webkit പ്രിഫിക്സും (ഉദാ. ഗൂഗിൾ ക്രോം, സഫാരി ഒപ്പം ഏറ്റവും പുതിയ പതിപ്പുകൾഓപ്പറ).

CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിന് ഈ വ്യത്യസ്ത വെണ്ടർ പ്രിഫിക്സുകൾ ചേർക്കുന്നത് തികച്ചും അസൗകര്യമാണ്. ആവശ്യമെങ്കിൽ ഏതെങ്കിലും ഉപകരണം സ്വയമേവ ഇത് ഞങ്ങൾക്കായി ചെയ്താൽ നന്നായിരിക്കും. CSS പ്രീപ്രൊസസ്സറുകൾ ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, SCSS വാക്യഘടനയിൽ:

@mixin ഹൈഫൻസ് ($മൂല്യം) (-ms-ഹൈഫൻസ്: $value; -moz-hyphens: $value; -webkit-hyphens: $value; ഹൈഫൻസ്: $value; ) h1, h2, h3, h4, h5, h6 ( @include hyphens(auto); )
ഇവിടെ ഞങ്ങൾ സാസിൽ മിക്സിൻ ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു, അത് CSS-ന്റെ ഒരു ഭാഗം ഒരിക്കൽ നിർവ്വചിക്കുന്നു - തുടർന്ന് അത് എല്ലായിടത്തും വീണ്ടും ഉപയോഗിക്കുന്നു. ഈ ഫയൽ സാധാരണ CSS-ലേക്ക് കംപൈൽ ചെയ്യുമ്പോൾ, @include സ്റ്റേറ്റ്‌മെന്റിന് പകരം @mixin-ൽ നിന്നുള്ള CSS കോഡ് നൽകും. മൊത്തത്തിൽ ഇത് ഒരു നല്ല പരിഹാരമാണ്, എന്നാൽ ഓരോന്നിനും ഒരു മിക്സിൻ നിർവചിക്കുന്നതിന് നിങ്ങൾ ഉത്തരവാദിയാണ് CSS പ്രോപ്പർട്ടികൾ, വെണ്ടർ പ്രിഫിക്സുകൾ ആവശ്യമുള്ളിടത്ത്. ഈ മിക്സിൻ നിർവചനങ്ങൾക്ക് പിന്തുണ ആവശ്യമാണ്: ബ്രൗസറുകൾ ഔദ്യോഗികമായി ചില CSS ഫീച്ചറുകൾ നടപ്പിലാക്കുമ്പോൾ, അനാവശ്യമായ വെണ്ടർ പ്രിഫിക്സുകൾ നീക്കം ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.

മിക്സിന് പകരം, സാധാരണ CSS എഴുതാൻ ഞാൻ ആഗ്രഹിക്കുന്നു, അതുവഴി ഉപകരണം സ്വയമേവ പ്രിഫിക്സുകൾ ആവശ്യമുള്ള പ്രോപ്പർട്ടികൾ കണ്ടെത്തുകയും ആവശ്യമുള്ളിടത്ത് അവ ചേർക്കുകയും ചെയ്യും. CSS പോസ്റ്റ്-പ്രൊസസറിന് ഈ രീതിയിൽ പ്രവർത്തിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, നിങ്ങൾ ഓട്ടോപ്രിഫിക്‌സർ പ്ലഗിൻ ഉപയോഗിച്ച് പോസ്റ്റ്‌സിഎസ്‌എസ് ഉപയോഗിക്കുകയാണെങ്കിൽ, വെണ്ടർ പ്രിഫിക്‌സുകളില്ലാതെ നിങ്ങൾക്ക് പൂർണ്ണമായും സാധാരണ CSS എഴുതാൻ കഴിയും, കൂടാതെ പോസ്റ്റ് പ്രോസസ്സർ എല്ലാ ജോലികളും ചെയ്യും:

H1, h2, h3, h4, h5, h6 (ഹൈഫനുകൾ: ഓട്ടോ; )
നിങ്ങൾ ഈ കോഡിൽ CSS പോസ്റ്റ്-പ്രൊസസർ പ്രവർത്തിപ്പിക്കുകയാണെങ്കിൽ, ലൈൻ ഹൈഫനുകൾക്ക് പകരം: ഓട്ടോ; എല്ലാ അനുബന്ധ വെണ്ടർ പ്രിഫിക്‌സുകളും ദൃശ്യമാകും (ഓട്ടോപ്രിഫിക്‌സർ പ്ലഗിനിൽ നിന്നുള്ള സ്വയമേവ ശരിയാക്കുന്ന നിയമങ്ങൾക്ക് അനുസൃതമായി, അത് സ്വമേധയാ മാറ്റേണ്ടതില്ല). അതായത്, ഏതെങ്കിലും അനുയോജ്യതയെക്കുറിച്ചോ അല്ലെങ്കിൽ ആകുലപ്പെടാതെ നിങ്ങൾക്ക് സാധാരണ CSS എഴുതാം പ്രത്യേക വാക്യഘടന, അത് കൊള്ളാം!

ഓട്ടോപ്രിഫിക്‌സറിന് പുറമേ, രസകരമായ ചില കാര്യങ്ങൾ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന മറ്റ് PostCSS പ്ലഗിന്നുകൾ ഉണ്ട്. പരീക്ഷണാത്മക CSS സവിശേഷതകൾ ഉപയോഗിക്കാൻ cssnext പ്ലഗിൻ നിങ്ങളെ അനുവദിക്കുന്നു. പേര് വൈരുദ്ധ്യങ്ങൾ ഒഴിവാക്കാൻ CSS മൊഡ്യൂളുകൾ പ്ലഗിൻ സ്വയമേവ ക്ലാസുകൾ പരിഷ്കരിക്കുന്നു. സ്റ്റൈലിന്റ് പ്ലഗിൻ നിങ്ങളുടെ CSS-ൽ പിശകുകളും പൊരുത്തമില്ലാത്ത നിബന്ധനകളും കണ്ടെത്തുന്നു. മുമ്പൊരിക്കലും സാധ്യമല്ലാത്ത ഡെവലപ്പർ വർക്ക്ഫ്ലോ കഴിവുകൾ പ്രകടമാക്കിക്കൊണ്ട്, കഴിഞ്ഞ ഒന്നോ രണ്ടോ വർഷങ്ങളിൽ ഈ ടൂളുകൾ ശരിക്കും എടുത്തുകളഞ്ഞു!

എന്നിരുന്നാലും, പുരോഗതി ഒരു ചെലവിൽ വരുന്നു. PostCSS പോലെയുള്ള ഒരു CSS പോസ്റ്റ് പ്രോസസർ ഇൻസ്റ്റാൾ ചെയ്യുകയും ഉപയോഗിക്കുകയും ചെയ്യേണ്ടത് ആവശ്യമാണ് കൂടുതൽ പരിശ്രമംഒരു CSS പ്രീപ്രോസസറുമായി താരതമ്യം ചെയ്യുമ്പോൾ. കമാൻഡ് ലൈനിൽ നിന്ന് ഉപകരണങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യുകയും പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുക മാത്രമല്ല, വ്യക്തിഗത പ്ലഗിനുകൾ ഇൻസ്റ്റാൾ ചെയ്യുകയും കോൺഫിഗർ ചെയ്യുകയും കൂടുതൽ സങ്കീർണ്ണമായ നിയമങ്ങൾ നിർവചിക്കുകയും വേണം (ഏത് ബ്രൗസറുകൾ കണക്കിലെടുക്കണം മുതലായവ). പോസ്റ്റ്‌സി‌എസ്‌എസ് കമാൻഡ് ലൈനിൽ നിന്ന് നേരിട്ട് പ്രവർത്തിപ്പിക്കുന്നതിനുപകരം, പല ഡവലപ്പർമാരും ഗ്രന്റ്, ഗൾപ്പ് അല്ലെങ്കിൽ വെബ്‌പാക്ക് പോലുള്ള കോൺഫിഗർ ചെയ്യാവുന്ന ബിൽഡ് സിസ്റ്റങ്ങളിലേക്ക് ഇത് സംയോജിപ്പിക്കുന്നു. ഫ്രണ്ട് എൻഡിനായി നിങ്ങൾ ഉപയോഗിച്ചേക്കാവുന്ന വ്യത്യസ്‌ത ബിൽഡ് ടൂളുകൾ നിയന്ത്രിക്കുന്നത് ഇത് എളുപ്പമാക്കുന്നു.

കുറിപ്പ്: നിങ്ങൾ ഒരിക്കലും ഒരു ആധുനിക ഫ്രണ്ട്-എൻഡ് ബിൽഡ് സിസ്റ്റം ഉപയോഗിച്ചിട്ടില്ലെങ്കിൽ, അത് ഉൾക്കൊള്ളാൻ ധാരാളം വിവരങ്ങൾ പോലെ തോന്നിയേക്കാം. നിങ്ങൾക്ക് ആരംഭിക്കണമെങ്കിൽ ശുദ്ധമായ സ്ലേറ്റ്, ദിനോസറുകൾക്കായുള്ള മോഡേൺ ജാവാസ്ക്രിപ്റ്റ് എന്ന എന്റെ ലേഖനം പരിശോധിക്കുക, ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റിൽ ഈ ആധുനിക ഫീച്ചറുകൾ ഉപയോഗിക്കുന്നതിന് ആവശ്യമായ എല്ലാ ജാവാസ്ക്രിപ്റ്റ് ടൂളിംഗും ഇത് വിശദീകരിക്കുന്നു.

CSS പോസ്റ്റ് പ്രോസസറുകളെ ചുറ്റിപ്പറ്റി ചില വിവാദങ്ങൾ ഉണ്ടായിട്ടുണ്ട് എന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. ചിലർ പറയുന്നത് ഈ പദാവലി വളരെ ആശയക്കുഴപ്പം ഉണ്ടാക്കുന്നതാണെന്ന് (ചിലർ പറയുന്നത് ഈ ടൂളുകളെയെല്ലാം CSS പ്രീപ്രൊസസ്സറുകൾ എന്ന് വിളിക്കണം എന്നാണ്; മറ്റുചിലർ പറയുന്നത് അവയെ CSS പ്രൊസസറുകൾ എന്ന് വിളിക്കണം മുതലായവയാണ്). CSS പോസ്റ്റ്-പ്രൊസസ്സറുകൾ CSS പ്രീ-പ്രൊസസ്സറുകളുടെ ആവശ്യം പൂർണ്ണമായും ഇല്ലാതാക്കുമെന്ന് ചിലർ വിശ്വസിക്കുന്നു, മറ്റുള്ളവർ അവ ഒരുമിച്ച് ഉപയോഗിക്കണമെന്ന് വിശ്വസിക്കുന്നു. ഏതുവിധേനയും, നിങ്ങൾക്ക് CSS പരമാവധി പ്രയോജനപ്പെടുത്തണമെങ്കിൽ CSS പോസ്റ്റ്-പ്രൊസസ്സറുകൾ പഠിക്കേണ്ടതുണ്ട്.

- ഹാ! CSS അതിന്റെ സ്വന്തം നന്മയ്ക്കായി വളരെ വേഗത്തിൽ മാറുന്നതായി ഞാൻ കരുതുന്നു.
- ശരി, എല്ലാം ഒറ്റയടിക്ക് അല്ല!
- ഹാ! കാത്തിരിക്കൂ, നിങ്ങൾ എന്താണ് ഉദ്ദേശിക്കുന്നത്?
-സി‌എസ്‌എസ് കഠിനമാണെന്ന് നിങ്ങൾ പരാതിപ്പെടുന്നു, എന്നാൽ അതേ സമയം ആളുകൾ അത് മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഉപകരണങ്ങൾ നിർമ്മിക്കുന്നുവെന്ന് നിങ്ങൾ പരാതിപ്പെടുന്നു!
- ഒരുപക്ഷേ! എന്നാൽ നിങ്ങൾക്ക് ഉപകരണങ്ങൾ ഉപയോഗിച്ച് മാത്രം CSS പരിഹരിക്കാൻ കഴിയില്ല!
- ഇവിടെയാണ് CSS രീതി നിങ്ങളെ സഹായിക്കുന്നത്!

വിശ്വസനീയമായ പരിപാലനത്തിനായി CSS രീതികൾ ഉപയോഗിക്കുന്നു

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

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

OOCSS

OOCSS (ഒബ്ജക്റ്റ് ഓറിയന്റഡ് CSS) രണ്ട് പ്രധാന തത്വങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു രീതിശാസ്ത്രമായി 2009 ൽ ആദ്യമായി അവതരിപ്പിച്ചു. എന്നതാണ് ആദ്യത്തെ തത്വം ഷെല്ലിൽ നിന്ന് ഘടന വേർതിരിക്കുക. ഇതിനർത്ഥം, ഘടനയെ (ലേഔട്ട് പോലെ) നിർവചിക്കുന്ന CSS, ചർമ്മത്തെ നിർവചിക്കുന്ന (നിറങ്ങൾ, ഫോണ്ടുകൾ മുതലായവ) CSS-മായി കൂട്ടിച്ചേർക്കരുത് എന്നാണ്. ഇത് ഷെൽ റീമേക്ക് ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു, അതായത് രൂപംഅപേക്ഷകൾ. രണ്ടാമത്തെ തത്വം - കണ്ടെയ്നറിൽ നിന്ന് ഉള്ളടക്കം വേർതിരിക്കുക. മൂലകങ്ങളെ പുനരുപയോഗിക്കാവുന്ന ഒബ്‌ജക്‌റ്റുകളായി ചിന്തിക്കുക എന്നാണ് ഇതിനർത്ഥം, ഒരു ഒബ്‌ജക്റ്റ് പേജിൽ അതിന്റെ സ്ഥാനം ഒന്നുതന്നെയായിരിക്കണമെന്ന പ്രധാന ആശയം.

OOCSS നന്നായി ചിന്തിച്ച മാർഗനിർദ്ദേശങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു, എന്നാൽ ഈ സമീപനത്തിന്റെ പ്രത്യേകതകളെക്കുറിച്ച് വളരെ വ്യക്തമല്ല. SMACSS പോലെയുള്ള തുടർന്നുള്ള രീതിശാസ്ത്രങ്ങൾ പ്രധാന ആശയങ്ങൾ എടുക്കുകയും അവയുമായി പ്രവർത്തിക്കുന്നത് എളുപ്പമാക്കുന്നതിന് കൂടുതൽ വിശദാംശങ്ങൾ ചേർക്കുകയും ചെയ്തു.

എസ്എംഎസിഎസ്എസ്

അഞ്ച് വ്യത്യസ്ത വിഭാഗങ്ങളിൽ CSS എഴുതാൻ ശുപാർശ ചെയ്യുന്ന ഒരു രീതിശാസ്ത്രമായി SMACSS (സിഎസ്എസിനുള്ള സ്കേലബിൾ ആൻഡ് മോഡുലാർ ആർക്കിടെക്ചർ) 2011 ൽ ഉയർന്നുവന്നു: പ്രധാന നിയമങ്ങൾ, ലേഔട്ട് നിയമങ്ങൾ, മൊഡ്യൂളുകൾ, സംസ്ഥാന നിയമങ്ങൾ, തീം നിയമങ്ങൾ. SMACSS രീതിശാസ്ത്രം ഒരു നിശ്ചിത നാമകരണ കൺവെൻഷനും ശുപാർശ ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ലേഔട്ട് നിയമങ്ങളിൽ, ക്ലാസ്സിന്റെ പേരുകൾ l- അല്ലെങ്കിൽ ലേഔട്ട്- ഉപയോഗിച്ച് പ്രിഫിക്‌സ് ചെയ്യണം. സംസ്ഥാന നിയമങ്ങളിൽ, ക്ലാസ് പേരുകൾക്ക് മുമ്പായി സംസ്ഥാനത്തെ വിവരിക്കുന്ന പ്രിഫിക്‌സുകൾ ഉണ്ടായിരിക്കണം, അതായത്, മറഞ്ഞിരിക്കുന്നു അല്ലെങ്കിൽ തകർന്നിരിക്കുന്നു.

SMACSS OOCSS നേക്കാൾ വളരെ വ്യക്തമാണ്, എന്നാൽ ഓരോ വിഭാഗത്തിലും ഏതൊക്കെ CSS നിയമങ്ങൾ ഉൾപ്പെടുത്തണം എന്നതിനെക്കുറിച്ച് മെത്തഡോളജിക്ക് ഇപ്പോഴും ശ്രദ്ധാപൂർവ്വമായ ചിന്ത ആവശ്യമാണ്. BEM പോലുള്ള തുടർന്നുള്ള സമീപനങ്ങൾ ചില തീരുമാനങ്ങൾ എടുക്കുന്നു, അതിനാൽ അവ പ്രായോഗികമായി ഉപയോഗിക്കാൻ എളുപ്പമാണ്.

ബി.ഇ.എം

2010-ൽ അവതരിപ്പിച്ച, BEM (ബ്ലോക്ക്, എലമെന്റ്, മോഡിഫയർ) രീതി ഉപയോക്തൃ ഇന്റർഫേസിനെ സ്വതന്ത്ര ബ്ലോക്കുകളായി വിഭജിക്കുന്നതിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. തടയുകപുനരുപയോഗിക്കാവുന്ന ഘടകമാണ് (ഉദാഹരണമായി നിർവചിച്ചിരിക്കുന്ന ഒരു തിരയൽ ഫോം

). ഘടകംഒരു ബ്ലോക്കിന്റെ ഒരു ചെറിയ ഭാഗമാണ്, അത് സ്വന്തമായി വീണ്ടും ഉപയോഗിക്കാൻ കഴിയില്ല (ഉദാഹരണമായി നിർവചിച്ചിരിക്കുന്ന ഒരു തിരയൽ ഫോമിൽ നിന്നുള്ള ഒരു ബട്ടൺ ആയിരിക്കും തിരയുക). മോഡിഫയർഒരു ബ്ലോക്കിന്റെയോ എലമെന്റിന്റെയോ രൂപം, അവസ്ഥ അല്ലെങ്കിൽ സ്വഭാവം എന്നിവ നിർവചിക്കുന്ന ഒരു എന്റിറ്റിയാണ് (ഒരു ഉദാഹരണം ഇങ്ങനെ നിർവചിച്ചിരിക്കുന്ന ഒരു പ്രവർത്തനരഹിതമായ തിരയൽ ഫോം ബട്ടൺ ആയിരിക്കും തിരയുക).

സങ്കീർണ്ണമായ തീരുമാനങ്ങളൊന്നും എടുക്കാതെ തന്നെ തുടക്കക്കാർക്ക് ഇത് പ്രയോഗിക്കാൻ അനുവദിക്കുന്ന ഒരു നിർദ്ദിഷ്ട നാമകരണ കൺവെൻഷൻ ഉപയോഗിച്ച് BEM രീതി മനസ്സിലാക്കാൻ എളുപ്പമാണ്. പിൻ വശംചില ക്ലാസ് പേരുകൾ തികച്ചും വാചാലമാണ്, കൂടാതെ സെമാന്റിക് പേരുകൾ വ്യക്തമാക്കുന്നതിനുള്ള പരമ്പരാഗത നിയമങ്ങൾ പാലിക്കുന്നില്ല എന്നതാണ് പോരായ്മ. തുടർന്ന്, ആറ്റോമിക് സിഎസ്എസ് പോലുള്ള പുതിയ രീതിശാസ്ത്രങ്ങൾ പ്രത്യക്ഷപ്പെട്ടു, അവിടെ ഈ പാരമ്പര്യേതര സമീപനം തികച്ചും പുതിയ തലത്തിൽ എത്തി!

ആറ്റോമിക് സിഎസ്എസ്

ആറ്റോമിക് സിഎസ്എസ് രീതിശാസ്ത്രം (ഫങ്ഷണൽ സിഎസ്എസ് എന്നും അറിയപ്പെടുന്നു) 2014 ൽ പ്രത്യക്ഷപ്പെട്ടു. വിഷ്വൽ ഫംഗ്‌ഷനെ അടിസ്ഥാനമാക്കിയുള്ള പേരുകളുള്ള ചെറിയ, ഉയർന്ന പ്രത്യേക ക്ലാസുകൾ സൃഷ്ടിക്കുക എന്ന ആശയത്തെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് ഇത്. ഈ സമീപനം മേൽപ്പറഞ്ഞ OOCSS, SMACSS, BEM എന്നിവയുടെ പൂർണ്ണമായ വിപരീതമാണ്: ഒരു പേജിലെ മൂലകങ്ങളെ പുനരുപയോഗിക്കാവുന്ന ഒബ്‌ജക്റ്റുകളായി കണക്കാക്കുന്നതിനുപകരം, ആറ്റോമിക് സിഎസ്എസ് ഈ ഒബ്‌ജക്റ്റുകളെ മൊത്തത്തിൽ അവഗണിക്കുകയും ഓരോ ഘടകത്തിന്റെയും ശൈലി സജ്ജീകരിക്കുന്നതിന് പുനരുപയോഗിക്കാവുന്ന, ഉയർന്ന പ്രത്യേക യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുകയും ചെയ്യുന്നു. അതിനാൽ പകരം തിരയുകനിങ്ങൾക്ക് ഇതുപോലെ എന്തെങ്കിലും ലഭിക്കും തിരയുക .

ഈ ഉദാഹരണത്തോടുള്ള നിങ്ങളുടെ ആദ്യ പ്രതികരണം ഭയാനകമായി പിൻവാങ്ങുകയാണെങ്കിൽ, നിങ്ങൾ ഒറ്റയ്ക്കല്ല. പലരും ഈ രീതിശാസ്ത്രത്തെ സ്ഥാപിതമായതിന്റെ പൂർണ്ണമായ ലംഘനമായി കാണുന്നു മികച്ച രീതികൾസി.എസ്.എസ്. എന്നിരുന്നാലും, ചില സന്ദർഭങ്ങളിൽ ഈ രീതികളുടെ ഫലപ്രാപ്തിയെ ചോദ്യം ചെയ്യുന്ന നിരവധി കാര്യമായ ചർച്ചകൾ നടന്നിട്ടുണ്ട്.

CSS (കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ), അല്ലെങ്കിൽ കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ, ഒരു മാർക്ക്അപ്പ് ഭാഷയിൽ എഴുതിയ ഒരു പ്രമാണത്തിന്റെ രൂപം വിവരിക്കാൻ ഉപയോഗിക്കുന്നു. സാധാരണഗതിയിൽ, വെബ് പേജ് ഘടകങ്ങളുടെ ശൈലി സൃഷ്ടിക്കുന്നതിനും മാറ്റുന്നതിനും CSS ശൈലികൾ ഉപയോഗിക്കുന്നു ഉപയോക്തൃ ഇന്റർഫേസുകൾ, HTML, XHTML എന്നിവയിൽ എഴുതിയിരിക്കുന്നു, എന്നാൽ 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 - പൂവ് എന്ന വാക്ക് ഉൾക്കൊള്ളുന്ന എല്ലാ ചിത്രങ്ങളും;

സെലക്ടർ[attribute~="value"] - ഒരു നിശ്ചിത മൂല്യം ഭാഗികമായി ഉൾക്കൊള്ളുന്ന ഘടകങ്ങൾ, ഉദാഹരണത്തിന്, ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിക്കുന്ന ഒരു ഘടകത്തിനായി നിരവധി ക്ലാസുകൾ വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, 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 സ്പെസിഫിക്കേഷൻ പേജിന്റെ ടെക്സ്റ്റ് ഉള്ളടക്കവുമായി ബന്ധപ്പെട്ട വർണ്ണം, ഫോണ്ട്, ലെറ്റർ-സ്പെയ്സിംഗ്, ലൈൻ-ഹൈറ്റ്, ലിസ്റ്റ്-സ്റ്റൈൽ, ടെക്സ്റ്റ്-അലൈൻ, ടെക്സ്റ്റ്-ഇൻഡന്റ്, ടെക്സ്റ്റ്-ട്രാൻസ്ഫോം, വിസിബിലിറ്റി, വൈറ്റ് എന്നിങ്ങനെയുള്ള പ്രോപ്പർട്ടികളുടെ അനന്തരാവകാശം അനുവദിക്കുന്നു. -സ്പേസും പദ-അകലവും. മിക്ക കേസുകളിലും, ഇത് സൗകര്യപ്രദമാണ്, കാരണം നിങ്ങൾ വെബ് പേജിലെ എല്ലാ ഘടകത്തിനും ഫോണ്ട് വലുപ്പവും ഫോണ്ട് ഫാമിലിയും സജ്ജീകരിക്കേണ്ടതില്ല.

ബ്ലോക്ക് ഫോർമാറ്റിംഗുമായി ബന്ധപ്പെട്ട പ്രോപ്പർട്ടികൾ പാരമ്പര്യമായി ലഭിക്കുന്നതല്ല. പശ്ചാത്തലം, ബോർഡർ, ഡിസ്‌പ്ലേ, ഫ്ലോട്ടും ക്ലിയറും, ഉയരവും വീതിയും, മാർജിൻ, ഏറ്റവും കുറഞ്ഞ ഉയരവും വീതിയും, ഔട്ട്‌ലൈൻ, ഓവർഫ്ലോ, പാഡിംഗ്, പൊസിഷൻ, ടെക്‌സ്‌റ്റ് ഡെക്കറേഷൻ, വെർട്ടിക്കൽ അലൈൻ, ഇസഡ് ഇൻഡെക്‌സ് എന്നിവയാണ് ഇവ.

നിർബന്ധിത അനന്തരാവകാശം

ഒരു മൂലകത്തെ അതിന്റെ പാരന്റ് എലമെന്റിന്റെ ഏതെങ്കിലും പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കാൻ നിങ്ങൾക്ക് ഇൻഹെറിറ്റ് കീവേഡ് ഉപയോഗിക്കാം. സ്ഥിരസ്ഥിതിയായി പാരമ്പര്യമായി ലഭിക്കാത്ത പ്രോപ്പർട്ടികളിൽ പോലും ഇത് പ്രവർത്തിക്കുന്നു.

എങ്ങനെയാണ് 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 എന്നീ മൂല്യങ്ങളുള്ള രണ്ട് പ്രത്യേകതകൾ ഉണ്ടെങ്കിൽ, രണ്ടാമത്തെ നിയമം വിജയിക്കും.

ബന്ധിപ്പിച്ച പട്ടികകളുടെ ക്രമം

നിങ്ങൾക്ക് ഒന്നിലധികം ബാഹ്യ സ്റ്റൈൽ ഷീറ്റുകൾ സൃഷ്ടിക്കാനും അവയെ ഒരു വെബ് പേജിലേക്ക് ബന്ധിപ്പിക്കാനും കഴിയും. അവർ വ്യത്യസ്ത പട്ടികകളിൽ സംഭവിക്കുകയാണെങ്കിൽ വ്യത്യസ്ത അർത്ഥങ്ങൾഒരു മൂലകത്തിന്റെ ഗുണവിശേഷതകൾ, അതിന്റെ ഫലമായി താഴെ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന സ്‌റ്റൈൽ ഷീറ്റിലെ നിയമം മൂലകത്തിന് ബാധകമാകും.

ബട്ടണുകൾ നോക്കുന്നതിന് മുമ്പ്, അവയ്‌ക്കെല്ലാം പൊതുവായുള്ള ക്രമീകരണങ്ങൾ നോക്കാം.

HTML

ബട്ടണുകൾക്കായി വളരെ ഉപയോഗിക്കും ലളിതമായ HTMLകോഡ്:

സബ്സ്ക്രൈബ് ചെയ്യുക

സി.എസ്.എസ്

കൂടാതെ, എല്ലാ ബട്ടണുകൾക്കും അടിക്കുറിപ്പ് വാചകത്തിനും ലിങ്കുകൾ തിരഞ്ഞെടുത്തത് മാറ്റുന്നതിനും പൊതുവായ ക്രമീകരണങ്ങൾ ഉണ്ടായിരിക്കും:

ബട്ടൺടെക്സ്റ്റ് (ഫോണ്ട്: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a (color: #fff; text-decoration: none; )

സാധാരണഗതിയിൽ, ഒരു ലിങ്കിലോ ബട്ടണിലോ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ഉപയോക്താവ് വളരെ മൃദുവായ പ്രഭാവം പ്രതീക്ഷിക്കുന്നു. ഞങ്ങളുടെ കാര്യത്തിൽ, ബട്ടൺ വലുപ്പം മാറ്റുന്നു - അത് വർദ്ധിക്കുന്നു, ഒരു അധിക സന്ദേശം കാണിക്കുന്നു.

അടിസ്ഥാന CSS കോഡ്

ആരംഭിക്കുന്നതിന്, ഞങ്ങൾ ബട്ടണിന് ഒരു ആകൃതിയും നിറവും നൽകേണ്ടതുണ്ട്. 28px ഉയരവും 115px വീതിയും നിർവചിക്കുക, മാർജിനുകളും പാഡിംഗും ചേർക്കുക, ബട്ടണിന് നേരിയ ബോർഡർ നൽകുക.

#button1 (പശ്ചാത്തലം: #6292c2; ബോർഡർ: 2px സോളിഡ് #eee; ഉയരം: 28px; വീതി: 115px; മാർജിൻ: 50px 0 0 50px; പാഡിംഗ്: 0 0 0 7px; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; പ്രദർശനം: തടയുക; )

CSS3 ഇഫക്റ്റുകൾ

ഒരു ലളിതമായ ബട്ടണിനൊപ്പം ധാരാളം CSS കോഡും ഉള്ളപ്പോൾ ചില ആളുകൾ അത് ഇഷ്ടപ്പെടുന്നു. ഈ വിഭാഗം ഞങ്ങളുടെ ബട്ടണിനായി അധിക CSS3 ശൈലികൾ നൽകുന്നു. അവയില്ലാതെ നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയും, പക്ഷേ അവർ ബട്ടണിന് കൂടുതൽ ആധുനിക രൂപം നൽകുന്നു.

ഫ്രെയിമിന്റെ കോണുകൾ ചുറ്റുക, ഒരു ഗ്രേഡിയന്റ് ചേർക്കുക. ഏത് പശ്ചാത്തല നിറവുമായും സംവദിക്കുന്ന ഇരുണ്ട ഗ്രേഡിയന്റുള്ള ഒരു ചെറിയ ട്രിക്ക് ഇത് ഉപയോഗിക്കുന്നു.

/*വൃത്താകൃതിയിലുള്ള മൂലകൾ*/ -webkit-border-radius: 15px; -moz-ബോർഡർ-റേഡിയസ്: 15px; ബോർഡർ-റേഡിയസ്: 15px; /*ഗ്രേഡിയന്റ്*/ പശ്ചാത്തല ചിത്രം: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -moz-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -o-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

CSS ആനിമേഷൻ

ഇനി നമുക്ക് ഇൻസ്റ്റാൾ ചെയ്യാം CSS പരിവർത്തനം. ഏത് പ്രോപ്പർട്ടി മാറ്റത്തിനും ആനിമേഷൻ ഉപയോഗിക്കും, അത് അര സെക്കൻഡ് നീണ്ടുനിൽക്കും.

മൗസ് ഓവർ

നിങ്ങൾ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ബട്ടണിന്റെ വിപുലീകരണത്തിനായി ഒരു ശൈലി ചേർക്കുന്നത് മാത്രമാണ് അവശേഷിക്കുന്നത്. മുഴുവൻ സന്ദേശവും പ്രദർശിപ്പിക്കുന്നതിന് ബട്ടൺ 230px വീതിയുള്ളതായിരിക്കണം.

#button1:ഹോവർ (വീതി: 230px; )

കളർ ടോണിന്റെ ലളിതമായ മാറ്റം

ഒരു ബട്ടണിനുള്ള വളരെ ലളിതവും ജനപ്രിയവുമായ CSS പ്രഭാവം. നിങ്ങൾ മൗസ് കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ, പശ്ചാത്തല നിറത്തിന്റെ ടോൺ സുഗമമായി മാറുന്നു.

അടിസ്ഥാന CSS കോഡ്

CSS കോഡ് മുമ്പത്തെ ഉദാഹരണവുമായി വളരെ സാമ്യമുള്ളതാണ്. മറ്റൊരു പശ്ചാത്തല വർണ്ണം ഉപയോഗിക്കുകയും ആകൃതി ചെറുതായി മാറ്റുകയും ചെയ്യുന്നു. ഇത് വാചകം കേന്ദ്രീകരിക്കുകയും ബട്ടണിനായി ലൈൻ ഉയരം സജ്ജമാക്കുകയും ചെയ്യുന്നു, അങ്ങനെ ലംബമായ കേന്ദ്രീകരണം സംഭവിക്കുന്നു.

#button2 (പശ്ചാത്തലം: #d11717; ബോർഡർ: 2px സോളിഡ് #eee; ഉയരം: 38px; വീതി: 125px; മാർജിൻ: 50px 0 0 50px; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; ലൈൻ-ഉയരം: 38px; )

CSS3 ഇഫക്റ്റുകൾ

കോണുകളുടെ റൗണ്ടിംഗ്, പശ്ചാത്തലത്തിന് ഒരു ഗ്രേഡിയന്റ്, ഒരു അധിക നിഴൽ എന്നിവ സജ്ജമാക്കുക. കൂടെ rgba ഉപയോഗിക്കുന്നുനിഴൽ കറുപ്പും സുതാര്യവുമാക്കുക.

/*വൃത്താകൃതിയിലുള്ള കോണുകൾ*/ -വെബ്കിറ്റ്-ബോർഡർ-റേഡിയസ്: 10px; -moz-ബോർഡർ-റേഡിയസ്: 10px; ബോർഡർ-റേഡിയസ്: 10px; /*ഗ്രേഡിയന്റ്*/ പശ്ചാത്തല ചിത്രം: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -moz-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -o-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*ഷാഡോ*/ -വെബ്കിറ്റ്-ബോക്സ്-ഷാഡോ: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); ബോക്സ്-ഷാഡോ: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS ആനിമേഷൻ

ആനിമേഷൻ പ്രായോഗികമായി മുമ്പത്തെ ഉദാഹരണത്തിൽ നിന്ന് വ്യത്യസ്തമല്ല.

/*ട്രാൻസിഷൻ*/ -webkit-transition: എല്ലാ 0.5s എളുപ്പവും; -moz-ട്രാൻസിഷൻ: എല്ലാ 0.5s എളുപ്പവും; -o-ട്രാൻസിഷൻ: എല്ലാ 0.5സെ അനായാസവും; -ms-ട്രാൻസിഷൻ: എല്ലാ 0.5സെ അനായാസവും; സംക്രമണം: എല്ലാ 0.5സെ അനായാസവും;

മൗസ് ഓവർ

മൗസ് കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ, മറ്റൊരു പശ്ചാത്തല നിറം സജ്ജീകരിക്കും. മികച്ച ഇഫക്റ്റിനായി ഫോട്ടോഷോപ്പിൽ ഇളം വർണ്ണ ഓപ്ഷൻ തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുക.

#button2:ഹോവർ (പശ്ചാത്തല നിറം: #ff3434;)

പശ്ചാത്തല ചിത്രത്തിന്റെ തിരഞ്ഞെടുപ്പിനെ ആശ്രയിച്ച് ഈ പ്രഭാവം വളരെ ശ്രദ്ധേയമായിരിക്കും. ഡെമോ ഒരു നോൺഡിസ്ക്രിപ്റ്റ് പശ്ചാത്തലം ഉപയോഗിക്കുന്നു, ഇഫക്റ്റ് നോൺഡിസ്ക്രിപ്റ്റ് ആയി കാണപ്പെടുന്നു. മറ്റൊരു ചിത്രം ഉപയോഗിച്ച് ശ്രമിക്കുക, ഇഫക്റ്റ് അതിശയിപ്പിക്കുന്നതായിരിക്കാം.

അടിസ്ഥാന CSS കോഡ്

കോഡിന്റെ പ്രധാന ഭാഗം മുമ്പത്തെ ഉദാഹരണങ്ങൾക്ക് സമാനമാണ്. ഞങ്ങൾ എന്താണ് ഉപയോഗിക്കുന്നതെന്ന് ദയവായി ശ്രദ്ധിക്കുക പശ്ചാത്തല ചിത്രം. പ്രാരംഭ പശ്ചാത്തല സ്ഥാനം "0 0" ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. നിങ്ങൾ കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ, സ്ഥാനം ലംബമായി മാറുന്നു.

#button3 (പശ്ചാത്തലം: #d11717 url("bkg-1.jpg"); പശ്ചാത്തല-സ്ഥാനം: 0 0; ടെക്സ്റ്റ്-ഷാഡോ: 0px 2px 0px rgba(0, 0, 0, 0.3); ഫോണ്ട് വലുപ്പം: 22px; ഉയരം : 58px; വീതി: 155px; മാർജിൻ: 50px 0 0 50px; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ലൈൻ-ഉയരം: 58px; )

CSS3 ഇഫക്റ്റുകൾ

ഈ ഉദാഹരണത്തിൽ പ്രത്യേകമായി ഒന്നുമില്ല - വൃത്താകൃതിയിലുള്ള കോണുകളും നിഴലുകളും.

/*വൃത്താകൃതിയിലുള്ള കോണുകൾ*/ -വെബ്കിറ്റ്-ബോർഡർ-റേഡിയസ്: 5px; -moz-ബോർഡർ-റേഡിയസ്: 5px; ബോർഡർ-റേഡിയസ്: 5px; /*ഷാഡോ*/ -വെബ്കിറ്റ്-ബോക്സ്-ഷാഡോ: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); ബോക്സ്-ഷാഡോ: 0px 3px 1px rgba(0, 0, 0, 0.2);

CSS ആനിമേഷൻ

സുഗമവും രസകരവുമായ ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ ഈ കേസിനായുള്ള ആനിമേഷൻ കൂടുതൽ നേരം നീണ്ടുനിൽക്കും.

/*ട്രാൻസിഷൻ*/ -webkit-transition: എല്ലാ 0.8s എളുപ്പവും; -moz-ട്രാൻസിഷൻ: എല്ലാ 0.8s എളുപ്പവും; -o-ട്രാൻസിഷൻ: എല്ലാ 0.8സെ ഈസ്; -ms-ട്രാൻസിഷൻ: എല്ലാ 0.8s എളുപ്പവും; സംക്രമണം: എല്ലാ 0.8സെ അനായാസവും;

മൗസ് ഓവർ

ഇപ്പോൾ പശ്ചാത്തല ചിത്രം നീക്കാൻ സമയമായി. ആരംഭ സ്ഥാനം "0 0" ആയിരുന്നു. രണ്ടാമത്തെ പാരാമീറ്റർ 150px ആയി സജ്ജമാക്കുക. തിരശ്ചീനമായി മാറുന്നതിന്, നിങ്ങൾ ആദ്യ പാരാമീറ്റർ മാറ്റേണ്ടതുണ്ട്.

#button3:ഹോവർ (പശ്ചാത്തലം-സ്ഥാനം: 0px 150px; )

3D ബട്ടൺ അമർത്തുക സിമുലേഷൻ

ഞങ്ങളുടെ പാഠത്തിലെ അവസാന ഉദാഹരണം, മൗസ് കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ ഒരു ബട്ടൺ അമർത്തുന്നത് അനുകരിക്കുന്നതിനുള്ള ജനപ്രിയ 3D രീതിയെക്കുറിച്ചാണ്. ഈ കേസിന്റെ ആനിമേഷൻ വളരെ ലളിതമാണ്, അതിന് ഒരു CSS പരിവർത്തനം പോലും ആവശ്യമില്ല. എന്നാൽ അന്തിമഫലം വളരെ ശ്രദ്ധേയമാണ്.

അടിസ്ഥാന CSS കോഡ്

ഞങ്ങളുടെ ബട്ടണിനുള്ള CSS കോഡ്.

#button4 (പശ്ചാത്തലം: #5c5c5c; ടെക്സ്റ്റ്-ഷാഡോ: 0px 2px 0px rgba(0, 0, 0, 0.3); ഫോണ്ട്-വലിപ്പം: 22px; ഉയരം: 58px; വീതി: 155px; മാർജിൻ: 50px 0 0 50px; മറച്ചിരിക്കുന്നു: 0 50px ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ടെക്സ്റ്റ്-അലൈൻ: സെന്റർ; ലൈൻ-ഹൈറ്റ്: 58px; )

CSS3 ഇഫക്റ്റുകൾ

ഈ സാഹചര്യത്തിൽ, CSS3 ഒരു നല്ല ഓപ്ഷനായി മാറും. പ്രഭാവം നേടാൻ, ഷാഡോകളും ഗ്രേഡിയന്റും ആവശ്യമാണ്. മൂർച്ചയുള്ള നിഴൽ ഒരു 3D ബട്ടണിന്റെ രൂപം സൃഷ്ടിക്കുന്നു.

/*വൃത്താകൃതിയിലുള്ള കോണുകൾ*/ -webkit-border-radius: 5px; -moz-ബോർഡർ-റേഡിയസ്: 5px; ബോർഡർ-റേഡിയസ്: 5px; /*ഷാഡോ*/ -വെബ്കിറ്റ്-ബോക്സ്-ഷാഡോ: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); ബോക്സ്-ഷാഡോ: 0px 6px 0px rgba(0, 0, 0, 0.8); /*ഗ്രേഡിയന്റ്*/ പശ്ചാത്തല ചിത്രം: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -moz-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -o-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); പശ്ചാത്തല-ചിത്രം: ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

മൗസ് ഓവർ

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

#button4:Hover (മാർജിൻ-ടോപ്പ്: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0px , 0, 0, 0.8); ബോക്സ്-ഷാഡോ: 0px 4px 0px rgba(0, 0, 0, 0.8); /*ഗ്രേഡിയന്റ്*/ പശ്ചാത്തല ചിത്രം: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba (0, 0, 0, 0.4)); പശ്ചാത്തല-ചിത്രം: -moz-ലീനിയർ-ഗ്രേഡിയന്റ്(താഴെ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); പശ്ചാത്തല-ചിത്രം: -o-ലീനിയർ-ഗ്രേഡിയന്റ്(താഴെ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); പശ്ചാത്തല-ചിത്രം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്( താഴെ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); പശ്ചാത്തല-ചിത്രം: ലീനിയർ-ഗ്രേഡിയന്റ്(താഴെ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));)

സൈറ്റിന്റെ ഈ വിഭാഗം ഒരു സൈറ്റ് സൃഷ്‌ടിക്കുന്നതിന് രണ്ട് ഭാഷകൾക്കായി പൂർണ്ണമായും നീക്കിവച്ചിരിക്കുന്നു, അതായത് HTML, CSS. ഇവിടെ നിങ്ങൾക്ക് പടിപടിയായി ഭാഷകൾ പഠിക്കാം, അടിസ്ഥാനകാര്യങ്ങൾ മുതൽ ഏറ്റവും പ്രയാസകരമായ നിമിഷങ്ങൾ വരെ എല്ലാം പഠിക്കാം.

ഈ വിഭാഗം തത്വത്തിൽ നിർമ്മിച്ചതാണ് ഘട്ടം ഘട്ടമായുള്ള പഠനംമെറ്റീരിയൽ, അതിനാൽ, HTML, CSS എന്നിവയിലെ ഒരു പാഠത്തിന്റെ ഓരോ തലക്കെട്ടിനും മുമ്പായി, ഒരു അനുബന്ധ നമ്പർ ഉണ്ട് സീരിയൽ നമ്പർപാഠം. അടിസ്ഥാനകാര്യങ്ങളിൽ നിന്ന് എല്ലാം പഠിക്കാനും നിങ്ങളുടെ തലയിൽ കുഴപ്പമുണ്ടാക്കാതിരിക്കാനും നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഇത് സ്വാഭാവികമാണ്. HTML, CSS ഭാഷകളെ കുറിച്ച് നിങ്ങൾക്ക് ഇതിനകം എന്തെങ്കിലും അറിയാമെങ്കിൽ, നിങ്ങൾക്ക് നഷ്‌ടമായ അറിവ് ഇവിടെ കണ്ടെത്താനും അല്ലെങ്കിൽ നിങ്ങൾ ഇതിനകം പഠിച്ച കാര്യങ്ങൾ ആഴത്തിലാക്കാനും കഴിയും.

ഈ വിഭാഗത്തിൽ യഥാക്രമം HTML5, CSS3 ഭാഷാ മാനദണ്ഡങ്ങളെക്കുറിച്ചുള്ള പാഠങ്ങൾ അടങ്ങിയിരിക്കുന്നു, ഈ ഭാഷകളുടെ ഏതെങ്കിലും പുതിയ പതിപ്പുകൾ ഉണ്ടെങ്കിൽ, അവ ഈ വിഭാഗത്തിലെ പുതിയ പാഠങ്ങളിലും പ്രതിഫലിക്കും, നിങ്ങൾ തീർച്ചയായും കണ്ടെത്തും.

ജീവിതത്തിൽ ഒരിക്കലെങ്കിലും ഒരു വെബ്‌സൈറ്റ് സൃഷ്ടിക്കുന്നത് നേരിട്ട ഓരോ വ്യക്തിയും തീർച്ചയായും html, css പോലുള്ള ഒരു കോമ്പിനേഷനെക്കുറിച്ച് കേട്ടിട്ടുണ്ടാകും, നിങ്ങൾക്ക് സ്വയം വെബ്‌സൈറ്റുകൾ നിർമ്മിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, ഇവയെക്കുറിച്ച് അറിയാതെ നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയില്ലെന്ന് എനിക്ക് ആത്മവിശ്വാസത്തോടെ പറയാൻ കഴിയും. രണ്ട് കാര്യങ്ങൾ.

നിങ്ങളുടെ തലയിൽ എച്ച്ടിഎംഎൽ എന്താണെന്ന് നിങ്ങൾക്ക് പൊതുവായി മനസ്സിലാക്കിക്കഴിഞ്ഞാൽ, നിങ്ങൾക്ക് വ്യക്തമായും ഒരു സമ്മിശ്ര ചിത്രം ഉണ്ട്, ഇത് ആശ്ചര്യകരമല്ലെന്ന് ഞാൻ കരുതുന്നു. പരിശീലനത്തിലേക്ക് നേരിട്ട് നീങ്ങാനും നിങ്ങളുടെ ആദ്യ HTML പ്രമാണം സൃഷ്ടിക്കാനുമുള്ള സമയമാണിത്.

എന്നപോലെ html ഭാഷ, കൂടാതെ CSS ന് അതിന്റേതായ സവിശേഷതകളും നിയമങ്ങളും ഘടനയും ഉണ്ട്. ഈ പാഠത്തിൽ, CSS ഭാഷയുടെ അടിസ്ഥാന ആശയങ്ങൾ, അതിന്റെ ഘടന, രൂപകൽപ്പന എന്നിവയെക്കുറിച്ച് ഞാൻ നിങ്ങളോട് പറയും, ഞങ്ങൾ ആദ്യം ചെയ്യും CSS പട്ടികശൈലികൾ, ഒരു html ഡോക്യുമെന്റിലേക്ക് ഒരു സ്റ്റൈൽ ഷീറ്റ് എങ്ങനെ ബന്ധിപ്പിക്കാമെന്ന് മനസിലാക്കുക.

സി‌എസ്‌എസിലെ സെലക്ടർമാരാണ് ഭാഷയുടെ അടിസ്ഥാനം, അവ പഠിക്കുന്നതും മനസ്സിലാക്കുന്നതും വളരെ പ്രധാനമാണ്, അതിനാൽ ഈ പാഠത്തിൽ ഞാൻ നിങ്ങളോട് നിരവധി തരം സെലക്ടർമാരെ കുറിച്ച് പറയുകയും അവരുടെ കഴിവുകൾ വിവരിക്കുകയും ചെയ്യും.

ഒരു വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കുന്നതിൽ വളരെ പ്രധാനപ്പെട്ട ഒരു കാര്യം ടെക്‌സ്‌റ്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു, നിങ്ങൾ മനസ്സിലാക്കുന്നതുപോലെ, നിങ്ങൾക്ക് html-ൽ ടെക്‌സ്‌റ്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാനും കഴിയണം, കൂടാതെ ഏതൊക്കെ ടാഗുകൾ ഉണ്ടെന്നും അവ എങ്ങനെ ഉപയോഗിക്കാമെന്നും അറിയേണ്ടതുണ്ട്.

നിങ്ങൾ എല്ലാം കണ്ടെത്തിയതിന് ശേഷം html ടാഗുകൾടെക്‌സ്‌റ്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ, ടെക്‌സ്‌റ്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്ന സിഎസ്‌എസിലേക്ക് നേരിട്ട് മാറാനുള്ള സമയമാണിത്, ഇത് നിങ്ങളുടെ അറിവും കഴിവുകളും ഗണ്യമായി വികസിപ്പിക്കും.

രൂപഭാവം ഗുണപരമായി മാറ്റുന്ന എല്ലാത്തരം സൗകര്യപ്രദമായ പ്രോപ്പർട്ടികൾ CSS ന് ഉണ്ട്, ഞങ്ങൾ പഠനം തുടരുന്നു CSS പ്രവർത്തനംടെക്‌സ്‌റ്റിനൊപ്പം ഈ പാഠത്തിൽ, ടെക്‌സ്‌റ്റിനൊപ്പം പ്രവർത്തിക്കുന്നതിന്റെ വിഷയത്തിലേക്ക് ഞങ്ങൾ ആഴ്ന്നിറങ്ങുകയും വാചകത്തിന്റെ പുതിയ സവിശേഷതകൾ നോക്കുകയും ചെയ്യും.

ഒരു വെബ്‌സൈറ്റിൽ നിന്ന് സൃഷ്‌ടിക്കുമ്പോൾ ചിത്രങ്ങളുമായി പ്രവർത്തിക്കുന്നു, അതിലൊന്ന് പ്രധാന പോയിന്റുകൾ, ഒരു ഡിസൈൻ സൃഷ്‌ടിക്കുമ്പോൾ, അതുപോലെ നിങ്ങളുടെ സൈറ്റിനായി എന്തെങ്കിലും മെറ്റീരിയലുകൾ സ്ഥാപിക്കുകയോ എഴുതുകയോ ചെയ്യുമ്പോൾ.

ഏതെങ്കിലും html ഒബ്‌ജക്‌റ്റുകൾക്കൊപ്പം പ്രവർത്തിക്കാനുള്ള സാധ്യതകൾ CSS ഗണ്യമായി വികസിപ്പിക്കുന്നു; ഈ പാഠത്തിൽ ചിത്രങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയുന്ന പാരാമീറ്ററുകളെക്കുറിച്ച് വിശദമായി പറയാൻ ഞാൻ ആഗ്രഹിക്കുന്നു.