Header Ads Widget

CSS (Cascading Style Sheets) Basics Rules

mafas December 16, 2024

 


முந்தைய வகுப்பில், CSS என்றால் என்ன என்பதைப் பற்றிய அறிமுகத்தை பார்த்தோம். இந்த வகுப்பில், CSS-ஐ எவ்வாறு எழுதுவது மற்றும் அதன் அடிப்படை அமைப்புகளைப் பற்றியும், அடைவு விதிகள் (Selectors) பற்றி தெரிந்துகொள்வோம்.

CSS எப்படி எழுதுவது?

CSS-ஐ மூன்று முறைகளில் எழுதலாம்:

  1. Inline CSS
    HTML அடையிலேயே நேரடியாக CSS எழுதும் முறை.இது அதிக முன்னுரிமை பெற்றது, மற்றும் முதலில் செயல்படும். இது HTML அடிப்படையில் உள்ள style குறிப்பை பயன்படுத்தி எழுதப்படுகிறது. உதாரணம்:

    <h1 style="color: blue; font-size: 24px;">இந்த ஒரு தலைப்பு</h1>

  2. Internal CSS
    இந்த CSS, HTML பக்கத்தின் <head> பகுதியிலுள்ள <style> டேக் களுக்குள் எழுதப்படுகிறது. இது Inline CSS க்கு பிறகு, ஆனால் External CSS க்கு முன்பு செயல்படுகிறது. உதாரணம்



    <style>
    h1 {
        color: green;
        font-size: 24px;
    }
</style>

  3. External CSS
    தனி .css கோப்பாக CSS-ஐ உருவாக்கி HTML-ல் இணைக்கலாம்.இது குறைந்த முன்னுரிமை கொண்டது. இது கடைசியாக செயல்படும். உதாரணம்:


    <link rel="stylesheet" href="styles.css">

    styles.css:

    h1 {
        color: red;
    font-size: 24px;
}
செயல்பாட்டின் வரிசை:
1. *Inline CSS* முதலில் செயல்படும் (மிகவும் உயர்ந்த முன்னுரிமை).
2. *Internal CSS* இரண்டாவது செயல்படும் (நடுத்தர முன்னுரிமை).
3. *External CSS* கடைசியாக செயல்படும் (குறைந்த முன்னுரிமை).

குறிப்பாக, *specificity* மற்றும் *importance* போன்ற அம்சங்கள் இந்த செயல்பாட்டு வரிசையை முந்தும், உதாரணமாக, ஒரு External CSS நிபந்தனை !important என்றதாக இருந்தால் அது Inline அல்லது Internal CSS ஐ மீறி செயல்படக்கூடும்.


CSS அடைவு விதிகள் (Selectors)

CSS-இல், அடைவு விதிகள் HTML அடைகளை தேர்ந்தெடுத்து, அவற்றுக்கு ஸ்டைல்களைப் பொருத்த உதவுகின்றன.

  1. Element Selector (மூலதர அடைவு)
    HTML உருப்படியை நேரடியாக அடைவு செய்யலாம்.

    css

    p {
    color: blue;
}

  2. Class Selector (கிளாஸ் அடைவு)
    ஒரே வகை பல உருப்படிகளுக்கு ஸ்டைல் கொடுக்க பயன்படுத்தப்படும் அடைவு.

    html
    <p class="highlight">இது ஒரு பத்தி</p>

    css

    .highlight {
    color: orange;
    font-weight: bold;
}

  3. ID Selector (ஐடி அடைவு)
    ஒரு குறிப்பிட்ட HTML உருப்படியை மட்டும் ஸ்டைல் செய்ய பயன்படும் அடைவு.


    <p id="special">தனித்துவமானது</p>


    #special {
    color: purple;
    font-size: 18px;
}

  4. Group Selector (குழு அடைவு)
    ஒரே விதமான ஸ்டைல்களை பல HTML உருப்படிகளுக்கு கொடுக்கலாம்.


    h1, h2, h3 {
    color: teal;
}

CSS விதியின் அமைப்பு

CSS விதி மூன்று பகுதிகளால் அமைகிறது:


selector {
    property: value;
}

உதாரணம்:


p {
    color: red; /* உரைக்கு சிவப்பு நிறம் */
    font-size: 16px; /* எழுத்தின் அளவு */
}




தயாராகுங்கள்!

இந்த வகுப்பின் மூலம், CSS அடிப்படைகளை நீங்கள் கற்றுள்ளீர்கள். அடுத்த வகுப்பில், CSS மூலம் வலைத்தளத்தில் இடவமைப்பு (Layout) மற்றும் நிறங்களை எளிதில் நிர்வகிக்க என்ன செய்யலாம் என்பதைப் பார்க்கலாம்.

பயிற்சி:

  1. Inline, Internal, மற்றும் External CSS-ஐ தனித்தனியாக முயற்சித்து பாருங்கள்.
  2. Class மற்றும் ID அடைவுகளைப் பயன்படுத்தி ஒரு HTML பக்கத்தை அழகாக வடிவமைக்கவும்.

அடுத்த வகுப்பில் சந்திப்போம்! 🌟

mafas

Posted by: mafas

Post a Comment

0 Comments