![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
width
Width என்பது ஒரு element-ன் உடைய Width-யை குறிக்கின்றது.<html>
<head>
<style>
div
{
width:50%;
background-color:gray;
}
</style>
</head>
<body>
<div> Width </div>
</body>
</html>
விளக்கம்:
இங்கு div என்கிற element-யை select செய்து இருக்கிறோம்.div என்பது selector ஆகும்.இந்த element ஆனது 50% அளவு உடைய width-யை web browser-ல் எடுத்துக் கொள்கிறது.
Width:50-> இது div element ஆனது browser-ன் உடைய பாதி width-யை எடுத்துக் கொள்கிறது.(50% என்பது பாதி(Half) width ஆகும்.)
Background color:grey-> இது div element-ன் Background color-ல் grey color-யை நிரப்புகிறது.
Min-width:
Min-width என்பது ஒரு element-ன் உடைய minimum width-யை குறிக்கின்றது.<html>விளக்கம்:
<head>
<style>
#min{
min-width: 500px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="min">
minimum width 500px
</div>
</body>
</html>
இங்கு #min என்பது id selector ஆகும்.இந்த #min என்கிற id selector-யை பயன்படுத்தி இதனுடைய element-யை நம்மால் control பண்ண முடியும்.
இந்த #min என்கிற id ஆனது div என்கிற element உள்ளே இருக்கிறது.div என்கிற element-க்கு உள்ளே "minimum width 500px" என்கிற content கொடுக்கப்பட்டுள்ளது.
min-width:500px;-> இது உங்களுடைய browser window ஆனது 500px-க்கு கீழே குறைக்கின்ற போது உங்களுடைய div element-ன் width ஆனது 500px-ஆக இருக்கிறது.
இதற்கு காரணம் element-ன் உடைய Width-ஆனது குறைந்தது.500px-யை கொண்டிருக்க வேண்டும் என்பதை கொடுத்து இருக்கிறோம்.
Max-width:
Max-width என்பது ஒரு element-ன் உடைய maximum width-யை குறிக்கின்றது.<html>விளக்கம்:
<head>
<style>
#max{
max-width: 700px;
background-color: red;
}
</style>
</head>
<body>
<div id="max">
maximum width 700px
</div>
</body>
</html>
இங்கு #max என்பது id selector ஆகும்.இந்த #max என்கிற id selector-யை பயன்படுத்தி இதனுடைய element-யை நம்மால் control பண்ண முடியும்.
இந்த #max என்கிற id ஆனது div என்கிற element உள்ளே இருக்கிறது.div என்கிற element-க்கு உள்ளே "maximum width 700px" என்கிற content கொடுக்கப்பட்டுள்ளது.
max-width:700px; -> இது உங்களுடைய browser window ஆனது 700px-க்கு மேலே இருந்தாலும் கூட div element-ன் உடைய Width-ஆனது 700px-யை தான் எடுத்துக் கொள்கிறது.
Height:
Height என்பது ஒரு element-ன் உடைய height-யைக் குறிக்கின்றது.<html>விளக்கம்:
<head>
<style>
div{
width: 200px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<div>
width and height 200px.
</div>
</body>
</html>
Width:200px; -> இது browser window-ல் 200px-யை எடுத்துக் கொள்கிறது.
Height:200px; -> இந்த div element-ஆனது browser window-வில் 200px-யை எடுத்துக் கொள்கிறது.
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
![[Tamil] Width and Height Using CSS In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAylJcAp4QVKwr-YSHaK9UuXEYdDNHoXSmgAMrhouWJzkVUhIE78h1JBTAXuAXaj6JSXWV5uaNGmm4Rf5yrL8a6jyFCucViWXVy4zemDRdfaK4h_pDvXPH1wIFxrvwPaM89qY8Cccivcc/s72-c/width+and+height.jpg)
![[Tamil] CSS Colors In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWik-zqoewl_4rECbqiXTCH8JDOd1-KzBLir6kDtcXvckUGviR8qrVssIbwhVYTjg34tvnEBI1JNGl3t-IS5FLxnnp0N_oRIWtraqnhnMkrp0hsJgEjLLUutR4Je9cZ3Mh7hZx7l0EUPc/s72-c/0b743151-3e0f-4449-ae13-4289151a166f.jpg)
![[Tamil] How to add css in tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBee2UdJwVztGLVJtCKSy8TX3AeWGNCnbpn26IYFVMvEIsKI1aFJyN_kPukHTsoMOQjBTqIXx6w0Zoy85z-tDiNcGYA59-B3_G_3tTFzxwS70M_u_zCP04-uZGPjzk7DzbvFhdi6Csdac/s72-c/add+css.jpg)
No comments:
Post a Comment