மே 14, 2012

HTML பக்கங்களை அழகு படுத்தும் CSS

CSS, Cascading Style Sheetன் சுருக்கம். இணையதள வடிவமைப்பில் CSSன் பங்கு இன்றியமையாத ஒன்று.  CSS என்பது புரோகிராமிங் மொழியும் அல்ல அல்லது HTML போன்ற மார்க்கப் மொழியும் அல்ல.  CSS என்பது பக்க வடிவமைப்பிற்கான கட்டளைகளின் தொகுப்பு. கண்ணைக் கவரும் வகையில் உள்ள இணையதளங்களை CSS கட்டளைகளே அழகூட்டுகிறது. ஒரு இணையப் பக்கம் என எடுத்துக் கொண்டால் அதன் உள்ளடக்கம் (content) HTMLலில் எழுதப் பட்டிருக்கும், பலவகை வண்ணங்கள், பக்க வடிவமைப்பு போன்றவை CSSசிலும், நிரலாக்கம் (programming logic) ஜாவாஸ்கிரிப்டிலும் எழுதப்பட்டிருக்கும்.

CSS கட்டளைகளை html பக்கத்தில் உள்ளேயாகவோ அல்லது தனி fileஆகவோ எழுதிக் கொள்ளலாம்.  HTML பக்கத்தின் உள்ளேயே CSS கட்டளைகளை <style> </style> டேகினுள் (internal style) அல்லது ஒரு டேகின் style attribute மூலம் (inline style)எழுத வேண்டும்.  HTML கலப்பில்லாமல் CSS கட்டளைகளை மட்டும் எழுதினால் அதை .css நீட்டிப்பில் சேமித்துக் கொள்ளலாம். அப்படி தனி fileலாக இருக்கும் css கட்டளைகளை <link></link> டேக் வழியாக (external style) HTMLலில் இணைக்க முடியும்.

இப்படி css எழுதும் முறைகளையே
1. Internal css
2. Inline css
3. External css என மூன்று வகையாகப் பிரிக்கின்றனர்.





CSS கட்டளைகளை எழுதுவதற்கென தனி மென்பொருள் தேவையில்லை. ஏதேனும் ஒரு டெக்ஸ்ட் எடிட்டரில் எழுதலாம்.
இருப்பினும் பணிகளை எளிமைப்படுத்த ஏகப்பட்ட மென்பொருட்கள் இருக்கின்றன.  CSS கட்டளைகளை எழுத Notepad++, Gedit, Visual Studio, Eclipse, Netbeans, WebStorm editor, Sublime, BlueFish editor, Dreamweaver, Aptana Studio என அவரவர் தேவைக்கேற்ப பயன்படுத்திக் கொள்ளவும். வெப் டிசைனிங்கில் நாட்டம் உள்ளவர்கள் Dreamweaver studio, Apdtana Studio போன்ற மென்பொருட்களப் பயன்படுத்துங்கள். ஜாவா புரோகிராமர்கள் Eclipse, Netbeans போன்ற மென்பொருட்களிலேயே வடிவமைத்துக் கொள்ள முடியும். டாட் நெட் புரொகிராமர்களுக்கு இருக்கவே இருக்கிறது Visual Studio.

குரோம் பிரவுசரில் html பக்கத்தை திறந்து கொள்ளுங்கள். பின்னர் வலது க்ளிக் செய்து Inspect element தேர்ந்தெடுப்பதன் மூலமும் அந்தபக்கத்திற்கான css கட்டளைகளைக் காண முடியம். தற்காலிமாக css கட்டளைகளை மாற்றி உடனுக்குடன் மாற்றங்களைப் பார்க்க முடியும்.

மொசில்லா ஃபயர்பாக்ஸ் பயன்படுத்துவோர் Firebug என்கிற addon நிறுவிக் கொள்ளவும். இதுகுறித்து வேறொரு பதிவில் விவரமாகப் பார்க்கலாம்.

6 கருத்துகள் :

  1. CSS குறித்து சிறப்பான அறிமுகம் . நன்றி

    பதிலளிநீக்கு
  2. Thanks for post CSS. please explain more.....

    pls explain how to make website layout with DIV and CSS ? Pleaseee..

    பதிலளிநீக்கு
    பதில்கள்
    1. நன்றி ஹாசிக். எனக்கு css நன்கு தெரியாது. தெரிந்தவரை பகிர்ந்து கொள்கிறேன். தங்கள் வரவு நல்வரவானது.

      நீக்கு
  3. css is essential in web designing..
    good intro bro

    பதிலளிநீக்கு
  4. It may useful for you friend!

    http://www.google.com/events/gadc2012/

    பதிலளிநீக்கு