கேஸ்கேடிங் ஸ்டைல்ஷீட்கள் எப்படி வேலை செய்கின்றன என்பதற்கான முழு விளக்கத்திற்கு கீழே படிக்கவும். எங்கள் பயன்பாடுகளை பக்கத்தின் மேல் பகுதியில் காண்பிப்பதால், அதை எளிதாகக் கண்டறிந்து பயன்படுத்த முடியும். மின்னஞ்சல் அல்லது ஊட்டத்தின் மூலம் இந்தக் கட்டுரையைப் படிக்கிறீர்கள் என்றால், கிளிக் செய்யவும் உங்கள் CSS ஐ சுருக்கவும்.
நீங்கள் உண்மையில் தளங்களை உருவாக்கவில்லை என்றால், அடுக்கு நடை தாள்களை உங்களால் முழுமையாக புரிந்து கொள்ள முடியாது (CSS ஐ) CSS என்பது ஒரு ஆவணத்தின் தோற்றத்தையும் வடிவமைப்பையும் விவரிக்கப் பயன்படும் ஒரு நடைத்தாள் மொழியாகும் HTML ஐ or பிற. எழுத்துரு, நிறம், இடைவெளி மற்றும் தளவமைப்பு போன்ற பல்வேறு கூறுகளுக்கான பாணிகளைக் குறிப்பிட CSS ஐப் பயன்படுத்தலாம். CSS ஆனது உங்கள் HTML ஆவணத்தின் விளக்கக்காட்சியை அதன் உள்ளடக்கத்திலிருந்து பிரிக்க உங்களை அனுமதிக்கிறது, இது உங்கள் வலைத்தளத்தின் காட்சி பாணியைப் பராமரிப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.
CSS மொழி அமைப்பு
தி தேர்வாளர் நீங்கள் ஸ்டைல் செய்ய விரும்பும் HTML உறுப்பு, மற்றும் சொத்து மற்றும் மதிப்பு அந்த உறுப்புக்கு நீங்கள் பயன்படுத்த விரும்பும் பாணிகளை வரையறுக்கவும்:
selector {
property: value;
}எடுத்துக்காட்டாக, பின்வரும் CSS அனைத்தையும் உருவாக்கும் <h1> ஒரு பக்கத்தில் உள்ள கூறுகள் சிவப்பு நிறம் மற்றும் 32px எழுத்துரு அளவு:
CSS ஐ
h1 {
color: red;
font-size: 32px;
}வெளியீடு
தலைப்பு
ஒரு உறுப்பில் தனிப்பட்ட ஐடிக்கு 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;
}வெளியீடு
நான் விரும்புகிறேன் முன்னிலைப்படுத்த இடைவெளி குறிச்சொல்லில் ஒரு சொல்.
உங்கள் HTML ஆவணத்தில் CSS ஐ மூன்று வழிகளில் சேர்க்கலாம்:
- இன்லைன் CSS ஐப் பயன்படுத்தி
styleஒரு HTML உறுப்பு மீது பண்பு - அக CSS, பயன்படுத்தி a
<style>உள்ள உறுப்பு<head>உங்கள் HTML ஆவணம் - வெளிப்புற 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 என்றால் என்ன?
சாஸ்ஸி CSS (எஸ்.சி.எஸ்.எஸ்) என்பது 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 குறியீட்டில் உள்ளமை பாணிகள் தனி பாணிகளாக விரிவுபடுத்தப்படும்.
ஒட்டுமொத்தமாக, நிலையான CSS ஐ விட SCSS பல நன்மைகளை வழங்குகிறது, ஆனால் உங்கள் தேவைகள் மற்றும் கட்டுப்பாடுகளின் அடிப்படையில் உங்கள் திட்டத்திற்கான சரியான கருவியைத் தேர்ந்தெடுப்பது மற்றும் வர்த்தக பரிமாற்றங்களைக் கருத்தில் கொள்வது முக்கியம்.
நான் மற்றொரு சிறந்த நுழைவைக் கண்டேன் பிளாக்கிங் புரோ CSS உகப்பாக்கம்.