بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5. Уроки для начинающих

ویژگی کلاس HTML


ویژگی کلاس HTML

از ویژگی کلاس HTML برای تعیین کلاس class برای یک المان HTML استفاده می شود.

چندین المان HTML می توانند در یک کلاس مشترک باشند.

از ویژگی کلاس class اغلب برای نشان دادن نام کلاس در یک صفحه سبک استفاده می شود. همچنین می تواند توسط JavaScript برای دسترسی و دستکاری عناصر با نام کلاس خاص استفاده شود.

در مثال زیر سه المان <div> با یک ویژگی کلاس با مقدار "city" داریم. سه المان <div>با توجه به تعریف سبک .city در بخش head به یک اندازه تغییر می کنند: :

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>لندن</h2>
  <p>لندن پایتخت انگلستان است.</p>
</div>

<div class="cities">
  <h2>پاریس</h2>
  <p>پاریس پایتخت فرانسه.</p>
</div>

<div class="cities">
  <h2>توکیو</h2>
  <p>توکیو پایتخت ژاپن</p>
</div>

</body>
</html>

: نتیجه

لندن

لندن پایتخت انگلستان است.

پاریس

پاریس پایتخت فرانسه.

توکیو

توکیو پایتخت ژاپن

خودتان آزمایش کنید »

استفاده از ویژگی کلاس برای المان های درون خطی

در مثال زیر دو المان span با ویژگی کلاس class با مقدار "note" داریم. هر دو عنصر span مطابق تعریف سبک .note در قسمت head تغییرات داده می شود:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
خودتان آزمایش کنید »

نکته :: از ویژگی کلاس class می توان بر روی هر المان HTML استفاده کرد.

توجه : : نام کلاس به حروف کوچک و بزرگ حساس است!

نکته:: در آموزش CSS ما ، می توانید اطلاعات بیشتری درباره CSS کسب کنید.


مواردی را با یک کلاس خاص انتخاب کنید

در CSS ، برای انتخاب المان های با کلاس خاص ، نماد period نقطه (.) و سپس نام کلاس را وارد کنید:

مثال

از CSS برای سبک دادن به تمام المان های با نام "city" استفاده شده:

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

<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است.</p>

<h2 class="city">پاریس </h2>
<p>پاریس پایتخت فرانسه. </p>

<h2 class="city">توکیو</h2>
<p>توکیو پایتخت ژاپن </p>

نتیجه

لندن

لندن پایتخت انگلستان است

پاریس

پاریس پایتخت فرانسه

توکیو

توکیو پایتخت ژاپن

خودتان آزمایش کنید »

کلاسهای متعدد

المان ها HTML می توانند به بیش از یک کلاس تعلق داشته باشند.

برای تعریف چندین کلاس ، نام کلاس ها را با فاصله جدا کنید ، به عنوان مثال <div class="city main">.

این المان با توجه به تمام کلاسهای مشخص شده سبک داده می شود.

مثال

<h2 class="city main">لندن</h2>
<h2 class="city">پاریس</h2>
<h2 class="city">توکیو</h2>
خودتان آزمایش کنید »

در مثال بالا ، اولین المان <h2> هم به کلاس شهر و هم به کلاس اصلی تعلق دارد و سبک های CSS را از هر دو کلاس دریافت می کند


برچسب های مختلف می توانند از یک کلاس استفاده کنند

المان های مختلف HTML می توانند به همان نام کلاس اشاره کنند.

در مثال زیر ، هر دو <h2> و <p> به کلاس "city" اشاره می کنند و از همان سبک استفاده می کنند:

مثال

<h2 class="city">پاریس</h2>
<p class="city">پاریس پایتخت فرانسه است</p>
خودتان آزمایش کنید »

استفاده از ویژگی کلاس در JavaScript

نام کلاس همچنین می تواند توسط JavaScript برای انجام کارهای خاص برای المان های خاص استفاده شود.

JavaScript می تواند با استفاده از متد ()getElementsByClassName: به المان با نام کلاس خاص دسترسی داشته باشد:

مثال

وقتی کاربر روی دکمه کلیک می کند ، همه عناصر با نام کلاس "city" را مخفی کنید: :

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
خودتان آزمایش کنید »

تمرینات HTML

خود را امتحان کنید

تمرین :

یک انتخابگر کلاس با نام "especial" ایجاد کنید.

یک ویژگی رنگی با مقدار "آبی" درون کلاس "especial" اضافه کنید.

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">پاراگراف من</p>

</body>
</html>

تمرین را شروع کنید






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir