අන්තර්ගත අලෙවි

කැස්කැඩින් ස්ටයිල් ෂීට් (CSS) යනු කුමක්ද?

කැස්කැඩින් ස්ටයිල්ෂීට් ක්‍රියා කරන ආකාරය පිළිබඳ සම්පූර්ණ පැහැදිලි කිරීමක් සඳහා පහත කියවන්න. අපි අපගේ යෙදුම් පිටුවේ ඉහළින් ප්‍රදර්ශනය කරන අතර එමඟින් එය සොයා ගැනීමට සහ භාවිතා කිරීමට පහසු වේ. ඔබ මෙම ලිපිය ඊමේල් හෝ සංග්‍රහය හරහා කියවන්නේ නම්, වෙත ක්ලික් කරන්න ඔබේ CSS සම්පීඩනය කරන්න.

ඔබ සැබවින්ම අඩවි සංවර්ධනය කරන්නේ නම් මිස, ඔබට කැස්කැඩින් ස්ටයිල් ෂීට් සම්පූර්ණයෙන්ම තේරුම් ගත නොහැක (CSS) CSS යනු ලියා ඇති ලේඛනයක පෙනුම සහ හැඩතල ගැන්වීම විස්තර කිරීමට භාවිතා කරන මෝස්තර පත්‍ර භාෂාවකි HTML or XML. අකුරු, වර්ණය, පරතරය සහ පිරිසැලසුම වැනි විවිධ අංග සඳහා මෝස්තර නියම කිරීමට CSS භාවිතා කළ හැක. CSS මඟින් ඔබේ HTML ලේඛනයේ ඉදිරිපත් කිරීම එහි අන්තර්ගතයෙන් වෙන් කිරීමට ඔබට ඉඩ සලසයි, ඔබේ වෙබ් අඩවියේ දෘශ්‍ය විලාසය නඩත්තු කිරීම සහ යාවත්කාලීන කිරීම පහසු කරයි.

CSS භාෂා ව්‍යුහය

එම තේරීම් කාරකය ඔබට මෝස්තර කිරීමට අවශ්‍ය HTML මූලද්‍රව්‍යය වේ, සහ දේපල සහ අගය ඔබට එම මූලද්‍රව්‍යයට යෙදිය යුතු මෝස්තර නිර්වචනය කරන්න:

selector {
  property: value;
}

උදාහරණයක් ලෙස, පහත CSS සියල්ල සාදනු ඇත <h1> පිටුවක ඇති මූලද්‍රව්‍යවලට රතු පැහැයක් සහ අකුරු ප්‍රමාණය 32px ඇත:

CSS

h1 {
  color: red;
  font-size: 32px;
}

ප්රතිදාන

ධාවනය

ඔබට මූලද්‍රව්‍යයක අනන්‍ය ID එකක් සඳහා CSS සඳහන් කළ හැක:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

ප්රතිදාන

හැදින්වීමේ

නැතහොත් බහු මූලද්‍රව්‍ය හරහා පන්තියක් යොදන්න:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

ප්රතිදාන

මට අවශ්‍යයි කැපී පෙනෙන span tag එකේ වචනයක්.

ඔබට ක්‍රම තුනකින් CSS ඔබේ HTML ලේඛනයට ඇතුළත් කළ හැක:

  1. Inline CSS, භාවිතා කරමින් style HTML මූලද්‍රව්‍යයක් මත ගුණාංගය
  2. අභ්‍යන්තර CSS, භාවිතා කරමින් a <style> මූලද්රව්යය <head> ඔබගේ HTML ලේඛනයේ
  3. බාහිර CSS, ඔබේ HTML ලේඛනයට සම්බන්ධ කර ඇති වෙනම .css ගොනුවක් භාවිතා කරමින් <link> මූලද්රව්යය <head> ඔබගේ HTML ලේඛනයේ

ප්‍රතිචාරාත්මක CSS

CSS ඇදහිය නොහැකි තරම් නම්‍යශීලී වන අතර තිර විභේදනය මත පදනම් වූ මූලද්‍රව්‍ය සංදර්ශකය සීරුමාරු කිරීමට භාවිතා කළ හැක, එබැවින් ඔබට එකම HTML තිබිය හැකි නමුත් එය ගොඩනගා ගත හැක. ප්රතිචාර උපාංග විභේදනයට:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS සම්පීඩනය

CSS හි දර්ශනය සංවිධානය කිරීම සඳහා අවකාශ සහ රේඛා සංග්‍රහ භාවිතා කරන අදහස් දැක්වීමක්, මාධ්‍ය විමසුමක් සහ බහුවිධ මෝස්තර ඇති බව ඔබට ඉහත උදාහරණයෙන් දැකිය හැක. ගොනු ප්‍රමාණය අඩු කිරීමට සහ, පසුව, ඔබේ මෝස්තරය ඉල්ලීමට සහ ලබා දීමට ගතවන කාලය අඩු කිරීමට ඔබේ වෙබ් අඩවියේ ඔබේ CSS අවම කිරීම හෝ සම්පීඩනය කිරීම හොඳ පුරුද්දකි. එය සුළු මුදලක් නොවේ... ඉහත උදාහරණවලින් 50%කට වඩා ඉතිරිකිරීම් ඔබට දැක ගත හැක.

බොහෝ සේවාදායක වින්‍යාසයන් මඟින් ස්වයංක්‍රීයව CSS සංකෝචනය කරන මෙවලම් පිරිනමන අතර, ඔබට එය අතින් සිදු කිරීමට අවශ්‍ය නොවන පරිදි කුඩා ගොනුව හැඹිලිගත කරයි.

SCSS යනු කුමක්ද?

Sassy CSS (SCSS) යනු CSS භාෂාවට අමතර ක්‍රියාකාරීත්වයක් සහ වාක්‍ය ඛණ්ඩයක් එක් කරන CSS පූර්ව සකසනයකි. එය සම්මත CSS හි නොමැති විචල්‍යයන්, මිශ්‍රණයන්, ශ්‍රිතයන් සහ වෙනත් විශේෂාංග භාවිතා කිරීමට ඉඩ දීමෙන් CSS හි හැකියාවන් පුළුල් කරයි.

SCSS වාසි

  • වැඩිදියුණු කළ නඩත්තු කිරීමේ හැකියාව: විචල්‍යයන් භාවිතයෙන්, ඔබට අගයන් එක තැනක ගබඩා කර ඒවා ඔබේ මෝස්තර පත්‍රිකාව පුරා නැවත භාවිත කළ හැකි අතර, ඔබේ මෝස්තර නඩත්තු කිරීම සහ යාවත්කාලීන කිරීම පහසු කරයි.
  • වඩා හොඳ සංවිධානයක්: මික්සින් සමඟින්, ඔබට ඔබේ මෝස්තර පත්‍රිකාව වඩාත් සංවිධිත සහ කියවීමට පහසු කරමින්, මෝස්තර කට්ටල සමූහගත කර නැවත භාවිත කළ හැක.
  • වැඩි වූ ක්‍රියාකාරීත්වය: ශ්‍රිත, පාලන ව්‍යුහයන් (උදා: if/else) සහ අංක ගණිත මෙහෙයුම් වැනි සම්මත CSS හි නොමැති බොහෝ විශේෂාංග SCSS හට ඇතුළත් වේ. මෙය වඩාත් ගතික සහ ප්රකාශිත මෝස්තරයට ඉඩ සලසයි.
  • වඩා හොඳ කාර්ය සාධනය: SCSS ගොනු CSS වෙත සම්පාදනය කර ඇත, බ්‍රවුසරය මගින් විග්‍රහ කිරීමට අවශ්‍ය කේත ප්‍රමාණය අඩු කිරීමෙන් කාර්ය සාධනය වැඩි දියුණු කළ හැක.

SCSS අවාසි

  • ඉගෙනීමේ වක්‍රය: SCSS හට සම්මත CSS වලට වඩා වෙනස් වාක්‍ය ඛණ්ඩයක් ඇත, ඔබට එය ඵලදායී ලෙස භාවිතා කිරීමට පෙර මෙම නව වාක්‍ය ඛණ්ඩය ඉගෙන ගැනීමට අවශ්‍ය වනු ඇත.
  • අමතර සංකීර්ණතාව: SCSS හට ඔබේ මෝස්තර පත්‍රිකාව වඩාත් සංවිධානාත්මක සහ නඩත්තු කිරීමට පහසු කළ හැකි වුවද, එය ඔබේ කේත පදනමට අමතර සංකීර්ණතාවක් හඳුන්වා දිය හැකිය, විශේෂයෙන් ඔබ නව විශේෂාංග සහ වාක්‍ය ඛණ්ඩය ගැන හුරුපුරුදු නොවේ නම්.
  • මෙවලම්: SCSS භාවිතා කිරීමට, ඔබට ඔබේ SCSS කේතය CSS බවට පරිවර්තනය කිරීමට සම්පාදකයක් අවශ්‍ය වේ. මෙයට අමතර සැකසුම සහ මෙවලම් අවශ්‍ය වේ, සමහර සංවර්ධකයන්ට ඇතුල් වීමට බාධාවක් විය හැක.

පහත උදාහරණයේ, SCSS කේතය අගයන් ගබඩා කිරීමට විචල්‍යයන් භාවිතා කරයි ($primary-color සහ $font-size) එය මෝස්තර පත්‍රිකාව පුරා නැවත භාවිතා කළ හැක. මෙම SCSS කේතයෙන් ජනනය වන CSS කේතය සමාන වේ, නමුත් එයට විචල්‍යයන් ඇතුළත් නොවේ. ඒ වෙනුවට, විචල්‍යවල අගයන් කෙලින්ම CSS තුළ භාවිතා වේ.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

මෙම උදාහරණයේ දැක්වෙන SCSS හි තවත් ලක්ෂණයක් වන්නේ කැදලි මෝස්තර වේ. SCSS කේතයේ, ද h1 ශෛලීන් තුළ කූඩු කර ඇත body සම්මත CSS හි කළ නොහැකි මෝස්තර. SCSS කේතය සම්පාදනය කරන විට, CSS කේතය තුළ කැදැලි විලාසයන් වෙනම මෝස්තර වලට විස්තාරනය වේ.

සමස්තයක් වශයෙන්, SCSS සම්මත CSS වලට වඩා බොහෝ වාසි ලබා දෙයි, නමුත් ඔබේ අවශ්‍යතා සහ සීමාවන් මත පදනම්ව ඔබේ ව්‍යාපෘතිය සඳහා නිවැරදි මෙවලම තෝරා ගැනීම සහ වෙළඳාම සලකා බැලීම වැදගත් වේ.

Douglas Karr

Douglas Karr හි CMO වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

සබැඳි පුවත්

ඉහළට බොත්තම
සමීප

Adblock අනාවරණය විය

Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.