CSS හෝ Cascading Style Sheets මගින් වෙබ් අඩවියේ දෘශ්ය ශෛලිය හා පිරිසැලසුම මගින් නියම කරනු ලැබේ. මෙම වෙබ් පෝරමයේ HTML සලකුණු හැඩගස්වන ලිපි ලේඛන වන අතර එමඟින් එම පිටු වලින් දර්ශණය වන ආකාරය පිළිබදව වෙබ් බ්රව්සර ලබා දේ. CSS විසින් පිටු සැකසුම මෙන්ම වර්ණය, පසුබිම් රූප, මුද්රණ ශිල්පය සහ තවත් බොහෝ දේ පාලනය කරයි.
ඔබ CSS ගොනුවක් දෙස බැලූවිට, ඔබ විසින් කිසියම් සලකුණුකරණයක් හෝ කේතකරණ භාෂාවකට සමාන බවක් දක්වනු ඇත, මෙම ගොනු සඳහා ඒවාට විශේෂිත syntax එකක් ඇත. එක් එක් ශෛලියක පත්රය CSS නීති ගණනාවකින් සමන්විත වේ. මෙම රීති සම්පූර්ණයෙන් ගනු ලබන විට, වෙබ් අඩවියේ විලාසිතා යනු කුමක්ද?
CSS නීතියේ කොටස්
සීඑස්එස් රීතියක් විශේෂිත කොටස් දෙකකින් සමන්විත වේ - තේරීම්කරු සහ ප්රකාශය. තෝරාගත් තැනැත්තා පිටුවක හැඩගැසෙන දේ තීරණය කරයි. ප්රකාශනය යනු එය හැඩගැන්විය යුත්තේ කෙසේද යන්නයි. උදාහරණයක් වශයෙන්:
p {
වර්ණය: # 000;
}}
මෙය CSS නීතියයි. තේරිය හැකි කොටස "p" වේ, "ඡේද" සඳහා මූල තේරීම් වේ. එබැවින්, වෙබ් අඩවි තුළ ඇති සියලු ඡේද තේරීමට සහ මෙම ශෛලිය මගින් ඒවා ලබා දෙන්න (ඔබේ CSS ලේඛනයේ වෙනත් තැනක විශේෂිත ශෛලීන් ඉලක්ක කර ඇති ඡේද හැර).
"වර්ණය: # 000;" කියන නීතියේ කොටසක් ප්රකාශය ලෙස හැඳින්වේ. එම ප්රකාශය කැබලි දෙකකින් සමන්විත වේ - දේපළ හා වටිනාකම.
මෙම ප්රකාශය මෙම ප්රකාශයේ "වර්ණ" කෑල්ලයි. තේරීම්කරු කුමන ආකාරයකින් දෘෂ්යමයව වෙනස් කරනවාදැයි එය නියම කරයි.
තෝරාගත් CSS දේපළ වෙනස් වනු ඇත. අපගේ නිදසුන තුළ, අපි "කළු" සඳහා CSS ෙැක්වීම සඳහා # 000 hex අගය භාවිතා කරමු.
එබැවින් මෙම CSS රීතිය භාවිතා කර අපගේ පිටුවට කළු වර්ණයෙන් වර්ණ ගැන්වු අකුරු ඇත.
CSS දේපල මූලික කරුණු
ඔබ CSS ගුණාංගයන් ලිවීමේදී, ඔබ සුදුසු බව පෙනෙන පරිදි ඒවා සාදන්නේ නැත. අවස්ථා සඳහා, "වර්ණය" යනු සත්ය CSS දේපළකි, එබැවින් ඔබට එය භාවිතා කළ හැකිය. මූලද්රව්යයේ පෙළ වර්ණය තීරණය කරනු ලබන්නේ මෙම දේපළයි. CSS ගුණාංග ලෙස ඔබ "text-color" හෝ "font-colour" භාවිතා කිරීමට උත්සාහ කළහොත්, ඒවා CSS භාෂාවේ සත්ය කොටස් නොවේ.
තවත් උදාහරණයක් වන්නේ "පසුබිම් රූපය" යන්නයි. මෙම ගුණාංගය පසුබිම් සඳහා භාවිතා කළ හැකි රූපයක් සැකසිය යුතුය:
.ලාංඡනය {
පසුබිම් රූප: url (/images/company-logo.png);
}}
"පසුබිම් චිත්රය" හෝ "පසුබිම-ග්රැෆික්" යන ගුණාංගයක් භාවිතා කිරීමට ඔබ උත්සහ කළහොත් ඒවා නැවත අසාර්ථක වනු ඇත. මෙය සත්ය වශයෙන්ම CSS ගුණාංග නොවේ.
සමහර CSS ගුණාංග
වෙබ් අඩවියක් නිර්මාණය කිරීමට ඔබට භාවිතා කළ හැකි CSS ගුණාංග ගණනාවක් තිබේ. උදාහරණ කිහිපයක් පහත දැක්වේ:
- දේශසීමා (දේශසීමා විලාසය, දේශසීමා වර්ණය සහ මායිම්-පළල ඇතුළුව)
- පැටවීම (වැදුම්-ඉහළ, වැදුම්-දකුණ, වැදුම්-පහළ, සහ වැදුම්-වම් ඇතුලු)
- මායිම් (මාග්රින්-ඉහළ, ආන්තික-දකුණ, ආන්තික-පහළ සහ ආන්තික-වම් ඇතුලු)
- ෆොන්ට-පවුල
- අකුරු ප්රමාණය
- පසුබිම් වර්ණය
- පළල
- උස
මෙම CSS ගුණාංග උදාහරණ වශයෙන් භාවිතා කිරීමට හොඳය. මන්ද ඒවා සියල්ලම ඉතා සරල වන අතර, ඔබ CSS නොදන්නේ නම්, ඔවුන්ගේ නම් මත පදනම්ව අනුමාන කළ හැකිය.
වෙනත් CSS දේපලක් ඔබ දකිනු ඇත. ඒවා ඔවුන්ගේ නම් මත පදනම්ව ක්රියා කරන ආකාරය පැහැදිලිව නොසැලකිය හැක.
- ෆෝට්
- පැහැදිලිව
- ඉතිරිය
- පෙළ-පරිවර්තනය
- Z-දර්ශකය
ඔබ වෙබ් නිර්මාණකරණයකට ගැඹුරට පිවිසෙන විට, ඔබ මෙම සියලු ගුණ සහ තවත් බොහෝ දේ හමුවනු ඇත (සහ භාවිතා කරන්න)!
ගුණාංග වටිනාකම්
ඔබ දේපලක් භාවිතා කරන සෑම අවස්ථාවකදීම එය වටිනාකමක් ලබා දිය යුතුය - සමහර ගුණාංගවලට ඇතැම් අගයන් පිළිගත හැකිය.
"වර්ණ" දේපළ පිළිබඳ අපේ පළමු උදාහරණය තුළ, අපට වර්ණ අගය භාවිතා කළ යුතුය. මෙය හෙක්ටෙයාර් අගයක් විය හැකිය, RGBA අගය, හෝ වර්ණ වචන වලින් පවා විය හැකිය. කෙසේ වෙතත්, මෙම අගයන් ඕනෑම "ඔබ අඳුරු" යෙදුම සමඟ භාවිතා කළහොත් එය කිසිසේත්ම කළ නොහැකි වනු ඇත, එම වචනය ලෙස විස්තර කිරීමක් ලෙස CSS හි පිළිගත් අගය නොවේ.
"පසුබිම් රූපයේ" අපගේ දෙවන උදාහරණය උදාහරණයක් ලෙස ඔබේ වෙබ් අඩවියේ සැබෑ රූපය ලබා ගැනීමට අනුරූප මාර්ගය භාවිතා කළ යුතුය. මෙය අවශ්ය / සංසන්දනීය වේ.
සියළුම CSS ගුණාංගයන් අපේක්ෂා කරන අගයන් ඇත. උදාහරණයක් වශයෙන්:
- වර්ණ තීන්ත වර්ණ අගය අපේක්ෂා කරයි
- මායිම් ප්රමාණය විශාලත්වය, පික්සෙල් හෝ ප්රතිශතයක් වැනි ප්රමාණයේ වටිනාකමක් අපේක්ෂා කරයි
- දේශසීමා විලාසිතා මෙම දේපල සඳහා භාවිතා කළ රක්ෂිත මෝස්තර වලින් එකක් අපේක්ෂා කරයි, "ඝන"
CSS ගුණාංග ලැයිස්තුවෙන් ඔබ පිවිසෙන්නේ නම්, ඒවා එක් එක් ඒවායේ අභිප්රාය වන්නේ ඒවායේ අභිප්රාය නිර්මාණය කිරීමට භාවිතා කරන නිශ්චිත අගයන් බවයි.
ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි