Css ஆனது ஒரு இணையப்பக்கத்திற்கு style கொடுக்கப்பயன்படுகின்றது என்பதை நாம் அறிவோம். ஒரு இணையப்பக்கத்தின் தோற்றத்தை மாற்றியமைக்க css பயன்படிகின்றது
Css ஆனது ஒரு html பக்கத்துடன் மூன்று முறையில் இணைக்கப்படுகின்றது.
அவைகள்.
1. Inline css
2. Internal css
3. External css.
இன்லைன் css.
இது ஒரு html எலிமென்டிற்கு யுனிக் ஸ்டைல் அப்ளை செய்யப்பயன்படுகின்றது.
சான்று
<h1 style=”background:yellow;”>
மேலே உள்ள வரியில் h1 என்ற எலிமென்டிற்கு ஸ்டைல் அப்ளை செய்யப்பட்டுள்ளது.
இவ்வாறு இன்லைனில் குறிப்பிடுகையில் ஒவ்வொரு எலிமெண்டிற்கும் தனிதனியே எழுத வேண்டும்.
ஒற்றை ஸ்டைலை ஒன்றுக்கு மேற்பட்ட எலிமென்டிற்கு அப்ளை செய்ய இயலாது
இன்டெர்னல் css.
சான்று நிரல்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
</style>
</head>
<body>
<h1>hello friends</h1>
</body>
</html>
மேலே உள்ள நிரலில் ஹெட் பகுதியில் <style> எனக் குறிப்பிடப்பட்டு சிஎஸ்எஸ் அப்ளை செய்யப்பட்டுள்ளது.இவ்வாறு அந்த html பக்கம் முழுவதிற்கும் ஸ்டைல் அப்ளை செய்யலாம்
எக்ஸ்டர்னெல் சிஎஸ்எஸ்
இந்த முறையில் css ஆனதை தனி ஃபைலாக எழுதி வைத்துக் கொள்ளலாம். இவ்வாறு எழுதும் பொழுது ஒன்றுக்கும் மேற்பட்ட இனையப்பக்கங்களுக்கு பொதுவான ஸ்டைலை அப்ளை செய்யலாம்.
கீழே உள்ளது தனி css ஃபைல்
Mystyle.css
body{
background-color: teal;
}
p{
font-family: 'Times New Roman', Times, serif;
}
<link> tag மூலம் ஒரு html பக்கத்தில் css ஃபைலை லிங்க் செய்யலாம்
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>hello friends</h1>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
</body>
</html
கீழே உள்ள வரியை கவனிக்கவும்
<link rel="stylesheet" type="text/css" href="mystyle.css">
இதில் href என்ற ஆட்ரிபியூட்டிற்கு css ஃபைலின் பெயர் குறிப்பிடப்பட்டுள்ளது.
வெளியீடு:
நன்றி.
முத்து கார்த்திகேயன்.
To attend online classes about programming courses at affordable price contact following number.
91 96293 29142
muthu.vaelai@gmail.com.
No comments:
Post a Comment