آموزش HTML – پانزدهم(مفهوم id و class)
سلام
با پانزدهمین جلسه از آموزش HTML در خدمتتون هستم، در جلسه قبل با تگ پرکاربرد div آشنا شدیم، حالا در این قسمت می پردازیم به مفهوم کلاس و آیدی که یکی از مهمترین بخش ها در HTML و همچنین در CSS می باشد.
گفته بودیم در جلسات قبل که برای استایل دهی عناصر و تگ های موجود در صفحه از style استفاده می کردیم، مثل:
۱ ۲ ۳ |
<h1 style="font-size:10px;"> Beporsam.IR </a> <div style="color:blue;> beporsam@gmail.com </div> <span style="background-color:khaki;"> @beporsam </div> |
که به این روش می گفتیم استایل درون خطی، در بعضی مواقع هم در مثل مثال زیر نام تگ می نوشتیم و بهش استایل میدادیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ |
<html> <head> <style type="text/css"> h1{color:blue; font-size:۱۵px} </style> </head> <body> <h1> بپرسم، مکانی برای آموزش و رفع مشکلات </h1> </body> </html> |
حالا دیگه میخوایم کارمون راحت تر کنیم، به این صورت که برای هر تگی که در صفحه استفاده می کنیم براش یک نام(آیدی) انتخاب می کنیم و این نام در css صدا میزنیم و کدهای Css براش می نویسیم، برای مثال من یک تگ div تعریف میکنم به این صورت:
۱ |
<div id="id1"> <p> سلام، خوبی؟ </p> </div> |
در کد بالا یک div تعریف کردیم و بهش id دادم و نام id رو گذاشتم id1، حالا کافیه من بیام داخل قسمت css و id1 رو اینجوری صدا بزنم و شروع کنم به نوشتن کدهای css:
۱ |
#id1{} |
قبل از نوشتن نام id باید علامت # بذاریم و داخل آکولاد کدهای خودمون رو بنویسیم.
۱ |
#id1{color:green;font-size:18px} |
برای نام گذاری id باید به چند نکته توجه داشته باشید:
- نام آیدی نیمتواند با عدد شروع شود.
- نام آیدی نمیتواند با کاراکترهای خاص مثل $%^*( و امثال اینها شروع شود.
- نام آیدی حتما باید با حرف شروع شود، بعد از حروف میتوانید از عدد نیز در نامگذاری استفاده کنید.
- نام آیدی برای هر تگ منحصر به فرد است و نمیتونید برای چند تگ از یک آیدی استفاده کنید.
یک مثال دیگه برای id اینبار برای تگ span:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ |
<html> <head> <style type="text/css"> #id2{background-color:red; font-size:۲۵px; color:khaki} </style> </head> <body> <span id="id2"> Email: beporsam@gmail.com </span> </body> </html> |
حالا بعضی مواقع پیش میاد که برای چند تگ میخواید یک استایل ثابت داشته باشید، مثلا چند تا div داریم و میخوایم رنگ پس زمینه ی همشون آبی باشه، دیگه نیمتونیم بیایم برای همه div ها آیدی یکسان بزاریم اینجاست که کلاس به کمک ما میاد و میتونیم با کلاس برای چند آیدی یک استایل ثابت بنویسیم. پس فرق بین آیدی و کلاس را متوجه شدید؟!
تمامی قواعد نامگذاری که برای آیدی گفته بودیم برای کلاس هم هست، برای صدا زدن کلاس در css قبل از نام کلاس از . استفاده می کنیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ |
<html> <head> <style type="text/css"> .class1{background-color:red; font-size:۲۵px; color:khaki} </style> </head> <body> <div class="class1"> <h2>Website</h2> <p>www.beporsam.ir</p> </div> <div class="class1"> <h2>Email</h2> <p>beporsam@gmail.com</p> </div> <div class="class1"> <h2>Telegram Channel</h2> <p>@beporsam</p> </div> </body> </html> |
در کد بالا برای تمامی div ها از کلاس یکسان استفاده کردیم و کدهای Css را نوشتیم.
با ما باشید تا آموزش های بعدی …
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید