CSS ஐ எவ்வாறு சேர்க்கலாம்
ஒரு பிரௌசர் ஒரு ஸ்டைல் ஷீட்டைப் படிக்கும் போது, அது ஸ்டைல் ஷீட்டில் உள்ள தகவலின் படி HTML ஆவணத்தை வடிவமைக்கும்.
ஒரு ஸ்டைல் ஷீட்டைச் சேர்க்க மூன்று வழிகள் உள்ளன:
வெளிப்புற CSS
முழு வலைத்தளத்தின் தோற்றத்தையும் ஒரு கோப்பை மாற்றுவதன் மூலம் மாற்றலாம்
உள்ளமை CSS
ஒரு ஒற்றை HTML பக்கத்திற்கு தனிப்பட்ட ஸ்டைல் பயன்படுத்தப்படலாம்
இன்லைன் CSS
ஒரு ஒற்றை உறுப்புக்கு தனிப்பட்ட ஸ்டைல் பயன்படுத்தப்படலாம்
வெளிப்புற CSS
வெளிப்புற ஸ்டைல் ஷீட்டுடன், நீங்கள் ஒரே ஒரு கோப்பை மாற்றுவதன் மூலம் முழு வலைத்தளத்தின் தோற்றத்தையும் மாற்றலாம்!
ஒவ்வொரு HTML பக்கமும் head பிரிவில் <link> உறுப்புக்குள் வெளிப்புற ஸ்டைல் ஷீட் கோப்புக்கான குறிப்பைச் சேர்த்திருக்க வேண்டும்.
எடுத்துக்காட்டு
வெளிப்புற ஸ்டைல்கள் HTML பக்கத்தின் <head> பிரிவுக்குள் <link> உறுப்புக்குள் வரையறுக்கப்படுகின்றன:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>ஒரு வெளிப்புற ஸ்டைல் ஷீட் எந்த உரை எடிட்டரிலும் எழுதப்படலாம், மற்றும் .css நீட்டிப்புடன் சேமிக்கப்பட வேண்டும்.
வெளிப்புற .css கோப்பு எந்த HTML டேக்குகளையும் கொண்டிருக்கக்கூடாது.
"mystyle.css" கோப்பு எப்படி இருக்கும் என்பது இங்கே:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}குறிப்பு:
பண்புத்தொகுப்பு மதிப்பு (20) மற்றும் அலகு (px) இடையே ஒரு இடைவெளியைச் சேர்க்க வேண்டாம்:
தவறானது (இடைவெளி): margin-left: 20 px;
சரியானது (இடைவெளி இல்லை): margin-left: 20px;
உள்ளமை CSS
ஒரு ஒற்றை HTML பக்கத்திற்கு தனிப்பட்ட ஸ்டைல் இருந்தால் உள்ளமை ஸ்டைல் ஷீட் பயன்படுத்தப்படலாம்.
உள்ளமை ஸ்டைல் head பிரிவுக்குள் <style> உறுப்புக்குள் வரையறுக்கப்படுகிறது.
எடுத்துக்காட்டு
உள்ளமை ஸ்டைல்கள் HTML பக்கத்தின் <head> பிரிவுக்குள் <style> உறுப்புக்குள் வரையறுக்கப்படுகின்றன:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>இன்லைன் CSS
ஒரு ஒற்றை உறுப்புக்கு தனிப்பட்ட ஸ்டைலைப் பயன்படுத்த இன்லைன் ஸ்டைல் பயன்படுத்தப்படலாம்.
இன்லைன் ஸ்டைல்களைப் பயன்படுத்த, தொடர்புடைய உறுப்புக்கு style அட்ரிபியூட்டைச் சேர்க்கவும். style அட்ரிபியூட் எந்த CSS பண்புத்தொகுப்பையும் கொண்டிருக்கலாம்.
எடுத்துக்காட்டு
இன்லைன் ஸ்டைல்கள் தொடர்புடைய உறுப்பின் "style" அட்ரிபியூட்டுக்குள் வரையறுக்கப்படுகின்றன:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>உதவிக்குறிப்பு:
ஒரு இன்லைன் ஸ்டைல் ஒரு ஸ்டைல் ஷீட்டின் பல நன்மைகளை இழக்கிறது (உள்ளடக்கத்தை வழங்கலுடன் கலப்பதன் மூலம்). இந்த முறையைக் குறைவாகப் பயன்படுத்தவும்.
பல ஸ்டைல் ஷீட்கள்
வெவ்வேறு ஸ்டைல் ஷீட்களில் ஒரே தேர்விக்கு (உறுப்பு) சில பண்புத்தொகுப்புகள் வரையறுக்கப்பட்டிருந்தால், கடைசியாகப் படிக்கப்பட்ட ஸ்டைல் ஷீட்டிலிருந்து மதிப்பு பயன்படுத்தப்படும்.
ஒரு வெளிப்புற ஸ்டைல் ஷீட் <h1> உறுப்புக்கு பின்வரும் ஸ்டைலைக் கொண்டுள்ளது என்று வைத்துக்கொள்வோம்:
h1 {
color: navy;
}பின்னர், ஒரு உள்ளமை ஸ்டைல் ஷீட் <h1> உறுப்புக்கு பின்வரும் ஸ்டைலைக் கொண்டுள்ளது என்று வைத்துக்கொள்வோம்:
h1 {
color: orange;
}எடுத்துக்காட்டு
உள்ளமை ஸ்டைல் வெளிப்புற ஸ்டைல் ஷீட்டிற்கான இணைப்பிற்குப் பிறகு வரையறுக்கப்பட்டிருந்தால், <h1> உறுப்புகள் "ஆரஞ்சு" நிறமாக இருக்கும்:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>எடுத்துக்காட்டு
எவ்வாறாயினும், உள்ளமை ஸ்டைல் வெளிப்புற ஸ்டைல் ஷீட்டிற்கான இணைப்பிற்கு முன் வரையறுக்கப்பட்டிருந்தால், <h1> உறுப்புகள் "நேவி" நிறமாக இருக்கும்:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>கேஸ்கேடிங் வரிசை
ஒரு HTML உறுப்புக்கு ஒன்றுக்கு மேற்பட்ட ஸ்டைல் குறிப்பிடப்பட்டால் எந்த ஸ்டைல் பயன்படுத்தப்படும்?
ஒரு பக்கத்தில் உள்ள அனைத்து ஸ்டைல்களும் பின்வரும் விதிகளால் ஒரு புதிய "மெய்நிகர்" ஸ்டைல் ஷீட்டில் "கேஸ்கேட்" ஆகும், அங்கு எண் ஒன்று மிக உயர்ந்த முன்னுரிமையைக் கொண்டுள்ளது:
- இன்லைன் ஸ்டைல் (ஒரு HTML உறுப்புக்குள்)
- வெளிப்புற மற்றும் உள்ளமை ஸ்டைல் ஷீட்கள் (head பிரிவில்)
- பிரௌசர் இயல்புநிலை
எனவே, ஒரு இன்லைன் ஸ்டைல் மிக உயர்ந்த முன்னுரிமையைக் கொண்டுள்ளது, மற்றும் வெளிப்புற மற்றும் உள்ளமை ஸ்டைல்கள் மற்றும் பிரௌசர் இயல்புநிலைகளை மேலெழுதும்.
Jassif Team Spaces பற்றி கேள்விப்பட்டிருக்கிறீர்களா?
இங்கே நீங்கள் உங்கள் சொந்த வலைத்தளத்தை உருவாக்கலாம், அல்லது பின்னர் பயன்படுத்த குறியீடு துணுக்குகளை சேமிக்கலாம், இலவசமாக.
* கிரெடிட் கார்டு தேவையில்லை
CSS பயிற்சிகள்
பயிற்சி:
வெளிப்புற CSS கோப்பைச் சேர்க்க சரியான டேக்கை இழுத்து விடவும்.
<head>
< rel="stylesheet" href="styles.css">
</head>