نمایش عناصر و مبحث Class در زبان HTML

          برنامه نویس 
            بازدید : 29
          جمعه 14 تیر 1398
           نظرات (0)
        

با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این جلسه قصد داریم سه مطلب مهم را بررسی کنیم:

عناصری که display آن ها از نوع block است (مانند div ها و …) و آشنایی با این مفهوم به صورت کلی
عناصری که display آن ها از نوع inline است (مانند span ها و …)
بررسی مفهوم کلاس (class) در زبان HTML و معنی آن برای عناصر موجود در صفحه

عناصر Block

تمام عناصر HTML به صورت پیش فرض دارای مقداری برای خاصیت display خود هستند که به نوع عنصر بستگی دارد. این مقادیر پیش فرض یا block هستند و یا inline.

عناصری که از نوع block باشند، همیشه در خط جدید ایجاد می شوند و تمام عرض (width) صفحه را می گیرند و تا جایی که بتوانند خود را به راست و چپ گسترش می دهند.

به طور مثال به کد زیر و خروجی آن دقت کنید:

 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<div>Hello</div><div>World</div>
 
<p>The DIV element isablock element,andwill start onanewline.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPEhtml>
<html>
  <style>
    #first {
      background-color:red;
    }
    
    #second {
      background-color:purple;
    }
  </style>
<body>
 
<div id="first">Hello</div><div id='second'>World</div>
 
<p>The DIV element isablock element,andwill start onanewline.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا به div اول رنگ قرمز و به div دوم رنگ بنفش داده ایم. حالا با سادگی می توان دید که هر کدام تمام عرض صفحه را گرفته اند و به همین خاطر است که کنار عنصر دیگری قرار نمی گیرند بلکه باید در خط جدیدی ایجاد شوند.

نکته: عنصر div معمولا به عنوان نگه دارنده ی دیگر عناصر مورد استفاده قرار می گیرند و به تنهایی کاربرد خاصی ندارد:

 



1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<body>
 
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London isthe capital city of England.It isthe most populous city inthe United Kingdom,withametropolitan area of over13million inhabitants.</p>
  <p>Standing on the River Thames,London has beenamajor settlement fortwo millennia,its history going back toits founding by the Romans,who named it Londinium.</p>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

عناصر Block شامل تمام تگ های زیر می شوند:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset><figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav><noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

عناصر Inline

عناصر inline در خط جدید ایجاد نمی شوند و تمام عرض صفحه را نیز نمی گیرند بلکه تنها فضایی را که نیاز داشته باشند اشغال می کنند.

به مثال زیر توجه کنید:

 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<span>Hello</span>
<span>World</span>
 
<p>The SPAN element isan inline element,andwill notstart onanewline.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

حالا مانند مثال قبلی یک رنگ پس زمینه اضافه می کنیم تا بهتر مشخص شود:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPEhtml>
<html>
  
  <style>
    #first {
      background-color:red;
    }
    
    #second {
      background-color:purple;
    }
  </style>
  
<body>
 
<span id='first'>Hello</span>
<span id='second'>World</span>
 
<p>The SPAN element isan inline element,andwill notstart onanewline.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

به سادگی مشاهده می شود که هر دو عنصر کنار هم قرار گرفته اند و رنگ پس زمینه ای که برایشان تعیین کرده ایم تنها در محدوده ی خودشان باقی مانده است.

نکته: تگ span معمولا به عنوان نگه دارنده ی قسمتی از متن به کار برده می شود:

 



1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html>
<body>
 
<h1>My<span style="color:red">Important</span>Heading</h1>
 
</body>
</html>

مشاهده ی خروجی در JSBin

عناصر inline در زبان HTML شامل تمام موارد زیر می شوند:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i><img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select><small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

کلاس ها

همانطور که می دانید attribute ای به نام class وجود دارد. class برای تعیین استایل های مشابه در عناصری به کار می رود که نام کلاسشان یکی باشد. برای راحت تر شدن موضوع، class را مانند کلاس های درس واقعی تصور کنید که هر عنصر در آن مانند یک دانش آموز در کلاس واقعی است. درست است که دانش آموزان یک کلاس با یکدیگر تفاوت دارند اما شباهت های بسیاری نیز دارند! در زبان HTML این شباهت، استایل های CSS است.

در مثال زیر 3 تگ div داریم که برای همه شان یک استایل و کلاس تعریف کرده ایم:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPEhtml>
<html>
<head>
<style>
.cities {
  background-color:black;
  color:white;
  margin:20px;
  padding:20px;
}
</style>
</head>
<body>
 
<div class="cities">
<h2>London</h2>
<p>London isthe capital of England.</p>
</div>
 
<div class="cities">
<h2>Paris</h2>
<p>Paris isthe capital of France.</p>
</div>
 
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo isthe capital of Japan.</p>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

به این صورت می توانیم کدهای تکراری CSS را حذف کنیم و هر سه div را یک جا استایل دهی کنیم. همچنین همانطور که از کد بالا فهمیده اید برای هدف قرار دادن یک کلاس در زبان CSS باید از نقطه استفاده کنیم. به طور مثال:

 



1
2
3
4
5
6
7

<style>
.city {
  background-color:tomato;
  color:white;
  padding:10px;
}
</style>

نکته: کلاس های HTML می توانند روی هر عنصر و تگی استفاده شوند (inline یا block و …) اما باید توجه داشته باشید که case sensitive (حساس به حروف بزرگ و کوچک انگلیسی) هستند.

کلاس های چندگانه

شما می توانید به عناصر HTML بیش از یک کلاس بدهید. برای این کار باید نام کلاس ها را با اسپیس جدا کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPEhtml>
<html>
<style>
.city {
  background-color:tomato;
  color:white;
  padding:10px;
}
 
.main {
  text-align:center;
}
</style>
<body>
 
<h2>Multiple Classes</h2>
<p>All three headers have the classname"city".Inaddition,London also have the classname"main",which center-aligns the text.</p>
 
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
 
</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید، در استایل ها ابتدا گفته ایم کلاس city را قرمز رنگ کن و غیره. سپس گفته ایم آن هایی که کلاس main دارند باید وسط چین باشند. نتیجه ی ادغام این دو استایل همان London است که در خروجی مشاهده می کنید.

با اینکه ما در مثال بالا فقط از تگ های h2 استفاده کردیم اما باید بدانید که می توانید یک کلاس را روی تگ های مختلف نیز پیاده سازی کنید. مثال:

 
1
2

<h2 class="city">Paris</h2>
<pclass="city">Paris isthe capital of France</p>

سوال: دسترسی به این کلاس ها از جاوا اسکریپت چطور خواهد بود؟

پاسخ: این مورد را در دوره ی جاوا اسکریپت دیده ایم. برای این کار باید از تابع ()getElementsByClassName استفاده کنید.

به مثال زیر توجه کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html>
<body>
 
<h2>Using The classAttribute inJavaScript</h2>
<p>Click the button,tohide all elements with the classname"city",with JavaScript:</p>
 
<button onclick="myFunction()">Hide elements</button>
 
<h2 class="city">London</h2>
<p>London isthe capital of England.</p>
 
<h2 class="city">Paris</h2>
<p>Paris isthe capital of France.</p>
 
<h2 class="city">Tokyo</h2>
<p>Tokyo isthe capital of Japan.</p>
 
<script>
functionmyFunction(){
  varx=document.getElementsByClassName("city");
  for(vari=0;i<x.length;i++){
    x[i].style.display="none";
  }
}
</script>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اگر به خروجی کد بالا مراجعه کنید، می بینید که با فشرده دکمه ی Hide elements تمام div ها ناپدید می شوند.

امیدوارم از این قسمت لذت برده باشید.

منبع: روکسو

ارسال نظر برای این مطلب