વેબસાઇટની વિઝ્યુઅલ શૈલી અને લેઆઉટ CSS અથવા કેસ્કેડીંગ સ્ટાઇલ શીટ્સ દ્વારા નક્કી કરવામાં આવે છે. આ તે દસ્તાવેજો છે જે વેબપેજના HTML માર્કઅપને આકાર આપે છે, વેબ બ્રાઉઝરોને તે માર્કઅપમાંથી કેવી રીતે પ્રદર્શિત થાય તે પૃષ્ઠો દર્શાવવાની સૂચનાઓ આપે છે. સીએસએસ પૃષ્ઠના લેઆઉટ, તેમજ રંગ, પૃષ્ઠભૂમિ છબીઓ, ટાઇપોગ્રાફી અને તેથી વધુ સંભાળે છે.
જો તમે CSS ફાઇલ જુઓ છો, તો તમે જોશો કે કોઈપણ માર્કઅપ અથવા કોડિંગ ભાષાની જેમ, આ ફાઇલોમાં તેમની પાસે વિશિષ્ટ વાક્યરચના છે. દરેક શૈલી શીટ સંખ્યાબંધ સીએસએસ નિયમોથી બનેલી છે. આ નિયમો, જ્યારે સંપૂર્ણ ભરવામાં આવે છે, સાઇટ શું શૈલીઓ છે.
એક સીએસએસ નિયમ ભાગો
એક સીએસએસ નિયમ બે અલગ ભાગોથી બનેલો છે - પસંદગીકાર અને ઘોષણા. પસંદગીકર્તા નક્કી કરે છે કે પૃષ્ઠ પર શું રીત આપવામાં આવ્યું છે અને જાહેરાત કેવી રીતે તે રીતની હોવી જોઈએ. દાખ્લા તરીકે:
પૃષ્ઠ {
રંગ: # 000;
}
આ એક સીએસએસ નિયમ છે પસંદગીકાર ભાગ "p" છે, જે "ફકરાઓ" માટે એક તત્વ પસંદગીકાર છે. તે, તેથી, સાઇટ પરના બધા ફકરા પસંદ કરો અને તેમને આ શૈલી પ્રદાન કરો (જ્યાં સુધી ફકરો ન હોય ત્યાં તમારા સીએસએસ દસ્તાવેજમાં વધુ ચોક્કસ પ્રકારો દ્વારા લક્ષિત કરવામાં આવે છે).
"રંગ: # 000;" કહે છે તે નિયમનો એક ભાગ જાહેરાત તરીકે ઓળખાય છે તે છે. તે ઘોષણા બે ટુકડાથી બનેલી છે - મિલકત અને કિંમત.
મિલકત આ જાહેરાતના "રંગ" ભાગ છે. તે સૂચવે છે કે પસંદગીકર્તાના કયા પાસાને દૃષ્ટિની રીતે બદલવામાં આવશે.
મૂલ્ય એ છે કે પસંદ કરેલી સીએસએસ સંપત્તિમાં બદલાશે. અમારા ઉદાહરણમાં, અમે # 000 ના હેક્સ મૂલ્યનો ઉપયોગ કરી રહ્યાં છીએ, જે "બ્લેક" માટે CSS લહેરાતો છે.
તેથી આ સીએસએસ નિયમનો ઉપયોગ કરીને, અમારા પૃષ્ઠમાં ફોર્ટ-રંગના કાળા રંગમાં ફકરા પ્રદર્શિત થશે.
સીએસએસ સંપત્તિ બેઝિક્સ
જ્યારે તમે CSS પ્રોપર્ટીઝ લખો છો, ત્યારે તમે ફિટ જુઓ ત્યાં સુધી તમે તેને ખાલી કરી શકતા નથી. ઉદાહરણો માટે, "રંગ" એક વાસ્તવિક સીએસએસ મિલકત છે, જેથી તમે તેનો ઉપયોગ કરી શકો છો. આ ગુણધર્મ એ તત્વના ટેક્સ્ટ રંગને નિર્ધારિત કરે છે. જો તમે CSS ગુણધર્મો તરીકે "ટેક્સ્ટ રંગ" અથવા "ફોન્ટ-રંગ" નો ઉપયોગ કરવાનો પ્રયાસ કર્યો છે, તો તે નિષ્ફળ જશે કારણ કે તે CSS ભાષાના વાસ્તવિક ભાગો નથી.
બીજો એક ઉદાહરણ મિલકત છે "બેકગ્રાઉન્ડ ઇમેજ" આ ગુણધર્મ એવી છબી સેટ કરે છે જેનો ઉપયોગ બેકગ્રાઉન્ડ માટે થઈ શકે છે, આની જેમ:
.logo {
બેકગ્રાઉન્ડ છબી: url (/images/company-logo.png);
}
જો તમે "બેકગ્રાઉન્ડ-ચિત્ર" અથવા "બેકગ્રાઉન્ડ-ગ્રાફિક" નો ઉપયોગ મિલકત તરીકે કરવાનો પ્રયાસ કર્યો છે, તો તે નિષ્ફળ જશે કારણ કે, ફરી એકવાર, આ વાસ્તવિક સીએસએસ પ્રોપર્ટીઝ નથી.
કેટલાક સીએસએસ ગુણધર્મો
ત્યાં ઘણી સંખ્યામાં CSS ગુણધર્મો છે જેનો ઉપયોગ તમે કોઈ સાઇટ શૈલીમાં કરી શકો છો. કેટલાક ઉદાહરણો છે:
- સરહદ (સરહદ-શૈલી, સરહદ-રંગ અને સરહદની પહોળાઈ સહિત)
- પૅડિંગ (પેડિંગ-ટોચ, પેડિંગ-જમણા, પેડિંગ-તળિયું અને પેડિંગ-ડાબે)
- માર્જિન (માર્જિન-ટોચ, માર્જિન-જમણે, માર્જિન-તળિયે અને માર્જિન-ડાબે)
- ફૉન્ટ-ફેમિલી
- અક્ષર ની જાડાઈ
- પૃષ્ઠભૂમિ રંગ
- પહોળાઈ
- ઊંચાઈ
આ સીએસએસ પ્રોપર્ટીઝ મહાન ઉદાહરણ તરીકે ઉપયોગ કરવા માટે છે, કારણ કે તે બધા ખૂબ સરળ છે અને, જો તમે CSS ન જાણતા હોવ તો, તમે સંભવતઃ અનુમાન કરી શકો છો કે તેઓ તેમના નામોના આધારે શું કરે છે.
ત્યાં અન્ય CSS પ્રોપર્ટીઓ છે કે જે તમે પણ અનુભવી શકશો જે તેમના નામોના આધારે તેઓ કેવી રીતે કામ કરે છે તે સ્પષ્ટ ન પણ હોઈ શકે.
- ફ્લોટ
- ચોખ્ખુ
- ઓવરફ્લો
- ટેક્સ્ટ-ટ્રાન્સફોર્મ
- Z- ઇન્ડેક્સ
જેમ જેમ તમે વેબ ડીઝાઇનમાં વધુ ઊંડું મેળવો છો, તેમ તમે આ બધી મિલકતો (અને ઉપયોગ) નો સામનો કરો છો અને વધુ!
ગુણધર્મો મૂલ્યોની જરૂર છે
દર વખતે જ્યારે તમે કોઈ મિલકતનો ઉપયોગ કરો છો, તો તમારે તેને મૂલ્ય આપવું પડશે - અને ચોક્કસ ગુણધર્મો ફક્ત અમુક મૂલ્યો સ્વીકારી શકે છે.
"રંગ" ગુણધર્મના અમારા પ્રથમ ઉદાહરણમાં, અમારે રંગ મૂલ્યનો ઉપયોગ કરવાની જરૂર છે આ હેક્સ મૂલ્ય , RGBA મૂલ્ય અથવા રંગ કીવર્ડ્સ પણ હોઈ શકે છે. જો તમે આ ગુણધર્મ સાથે "અંધકારમય" શબ્દનો ઉપયોગ કરો છો, તો તે કોઈપણ મૂલ્ય કાર્ય કરશે, જો કે, તે કંઈ પણ કરશે નહીં, કારણ કે તે શબ્દ તરીકે વર્ણવતા હોઈ શકે છે, તે CSS માં માન્ય મૂલ્ય નથી.
"બેકગ્રાઉન્ડ-ઇમેજ" નું અમારું બીજું ઉદાહરણ માટે તમારી સાઇટની ફાઇલોમાંથી એક વાસ્તવિક છબી મેળવવા માટે ઇમેજ પાથની જરૂર છે. આ મૂલ્ય / સિન્ટેક્ષ છે જે જરૂરી છે.
બધા CSS ગુણધર્મોમાં મૂલ્યો છે જે તેઓ અપેક્ષા રાખે છે. દાખ્લા તરીકે:
- બોર્ડર-રંગને રંગ મૂલ્યની અપેક્ષા છે
- બોર્ડર-સાઇઝ સિક્સિંગ મૂલ્યની અપેક્ષા રાખે છે, જેમ કે પિક્સેલ્સ અથવા ટકાવારી
- બોર્ડર સ્ટાઇલ એવી અપેક્ષા રાખે છે કે આ ગુણધર્મ માટે ઉપયોગમાં લેવાયેલા એક આરક્ષિત શૈલી, જેમ કે "નક્કર"
જો તમે CSS પ્રોપર્ટીઝની સૂચિમાંથી પસાર થશો, તો તમે જાણી શકશો કે તેમાંના પ્રત્યેક વિશિષ્ટ મૂલ્યો છે કે જેનો ઉપયોગ તેઓ માટે બનાવાયેલ શૈલીઓ બનાવવા માટે કરવામાં આવશે.
જેરેમી ગીરર્ડ દ્વારા સંપાદિત