Jassif Team Institution

CSS The display Property

display பண்பானது தளவமைப்பைக் கட்டுப்படுத்தும் முக்கியமான CSS பண்பாகும். இது ஒரு HTML உறுப்பு தொகுதியாக அல்லது உள்ளமை உறுப்பாகக் கருதப்படுகிறதா என்பதைக் குறிப்பிடுகிறது.

ஒவ்வொரு HTML உறுப்புக்கும் ஒரு இயல்புநிலை display மதிப்பு உள்ளது, அது எந்த வகை உறுப்பு என்பதைப் பொறுத்து. பெரும்பாலான உறுப்புகளுக்கான இயல்புநிலை display மதிப்பு block அல்லது inline ஆகும்.

display பண்பானது HTML உறுப்புகளின் இயல்புநிலை காட்சி நடத்தையை மாற்றப் பயன்படுகிறது.

Block-level Elements

ஒரு block-level உறுப்பு எப்போதும் ஒரு புதிய வரியில் தொடங்குகிறது மற்றும் கிடைக்கக்கூடிய முழு அகலத்தையும் எடுத்துக்கொள்கிறது (இடது மற்றும் வலது பக்கங்களுக்கு முடிந்தவரை நீட்டிக்கிறது).

<div> உறுப்பு ஒரு block-level உறுப்பாகும்.

Block-level உறுப்புகளின் எடுத்துக்காட்டுகள்:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline Elements

ஒரு inline உறுப்பு புதிய வரியில் தொடங்காது மற்றும் தேவையான அளவுக்கு மட்டுமே அகலத்தை எடுத்துக்கொள்கிறது.

Inline உறுப்புகளின் எடுத்துக்காட்டுகள்:

• <span>
• <a>
• <img>

Common display Values

CSS display பண்புக்கு பல மதிப்புகள் உள்ளன. பின்வரும் அட்டவணை பொதுவாகப் பயன்படுத்தப்படுவதை பட்டியலிடுகிறது:

CSS display: none;

display: none; பயன்படுத்தும் போது, உறுப்பு ஆவணப் பாய்விலிருந்து முற்றிலும் மறைக்கப்பட்டு எந்த இடத்தையும் எடுக்காது.

இது பொதுவாக உறுப்புகளை நீக்காமல் மறைக்கவும் காண்பிக்கவும் JavaScript உடன் பயன்படுத்தப்படுகிறது.

<style>
#panel {
  display: none;
}
</style>

<script>
function showPanel() {
  document.getElementById("panel").style.display = "block";
}
</script>

<script>
function togglePanel() {
  var x = document.getElementById("panel");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Override the Default Display Value

display பண்பானது HTML உறுப்புகளின் இயல்புநிலை காட்சி நடத்தையை மாற்றப் பயன்படுகிறது.

ஒரு inline உறுப்பை block உறுப்பாக மாற்றுவது, அல்லது நேர்மாறாக, பக்கத்தை ஒரு குறிப்பிட்ட வழியில் தோன்றச் செய்வதற்கும், இன்னும் வலைத் தரங்களைப் பின்பற்றுவதற்கும் பயனுள்ளதாக இருக்கும்.

<li> உறுப்புகளை inline ஆக மாற்றுவது ஒரு பொதுவான எடுத்துக்காட்டாகும், இது கிடைமட்ட மெனுவை உருவாக்குகிறது:

li {
  display: inline;
}

பின்வரும் எடுத்துக்காட்டு <span> உறுப்புகளை block உறுப்புகளாகக் காட்டுகிறது:

span {
  display: block;
}

பின்வரும் எடுத்துக்காட்டு <a> உறுப்புகளை block உறுப்புகளாகக் காட்டுகிறது:

a {
  display: block;
}

Hide an Element - Use display:none or visibility:hidden?

Image Examples with Different Hiding Methods:

Italy

display:none - முழுமையாக மறைக்கப்பட்டது

Forest

visibility:hidden - இடம் வைத்திருக்கிறது

Lights

Normal - காட்டப்பட்டது

display:none visibility:hidden Reset Hide Show

மூன்று படங்களும் தற்போது காட்டப்படுகின்றன.

உறுப்பை மறைக்க display பண்பை none ஆக அமைக்கலாம். உறுப்பு மறைக்கப்படும், மேலும் அந்த உறுப்பு இல்லாதது போல பக்கம் காட்டப்படும்:

h1.hidden {
  display: none;
}

உறுப்பை மறைக்க visibility:hidden; பயன்படுத்தலாம்.

இருப்பினும், இந்த பண்புடன், உறுப்பு மறைக்கப்படும், ஆனால் அது காணப்படுவது போலவே அதே இடத்தை எடுத்துக்கொள்ளும்:

h1.hidden {
  visibility: hidden;
}

Exercise

பெரும்பாலான HTML உறுப்புகளுக்கான இயல்புநிலை display மதிப்பு என்ன?

CSS Display/Visibility Properties

காட்சி மற்றும் காண்பித்தலைக் கட்டுப்படுத்தும் CSS பண்புகள்: