آموزش HTML - پانزدهم(مفهوم id و class)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش 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:15px}
</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 باید به چند نکته توجه داشته باشید:

نام آیدی نیمتواند با عدد شروع شود.
نام آیدی نمیتواند با کاراکترهای خاص مثل $%^*( و امثال اینها شروع شود.
نام آیدی حتما باید با حرف شروع شود، بعد از حروف میتوانید از عدد نیز در نامگذاری استفاده کنید.
نام آیدی برای هر تگ منحصر به فرد است و نمیتونید برای چند تگ از یک آیدی استفاده کنید.

مطلب پیشنهادی: تگ های HTML – تگ strong

یک مثال دیگه برای id اینبار برای تگ span:

<html>
<head>
<style type="text/css">
#id2{background-color:red; font-size:25px; 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:25px; 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 را نوشتیم.

سوال داشتید در سایت بپرسید ، پاسخگوی سوالات شما هستیم.

با ما باشید تا آموزش های بعدی …

موفق باشید.