🌟 2 ) صفت عمومی class : زبان html5 این قابلیت را دارد که تکنولوژی های متفاوتی را به آن ضمیمه کنیم تا هم زیبایی صفحات وب ما بیشتر شود و هم پویایی و تعاملی بودن آن .
دو مورد از تکنولوژی های مهم و پرکاربرد ، css و javascript می باشند . معمولا این تکنولوژی ها را در فایل خارجی ای می نویسند و آن فایل خارجی را به فایل اصلی html لینک و متصل می کنند تا کدهای آنها برای المان های html اجرا شود .
برای اینکه بتوانیم به المان های html ، ویژگی هایی جدیدی را با استفاده از css و javascript اختصاص دهیم ، باید یک نامی به المان مان بدهیم تا آن نام را در فایل های خارجی استفاده کنیم . این نام با استفاده از صفت class یا id قابل اعمال است .
مثلا فرض کنید می خواهیم با استفاده از فایل خارجی css ، رنگ متن داخل المان body را عوض کنیم .
برای این کار ابتدا یک نام کلاس به المان body نسبت می دهیم . یا با استفاده از صفت class یا id ( در اینجا class )
<body class="style" >hello world!</body>
color:red;
}
همانطور که می بینید ، در کنار نام کلاس ، یک نقطه آمده است که نشان می دهد یک کلاس است . در id به جای نقطه ، علامت # می آید .
مثال عملی :
تغییر رنگ متن hello world در المان body ، با استفاده از css :
1 ) ابتدا notepad را باز کنید .
2 ) کدهای زیر را در این فایل وارد کنید و با یک نام دلخواه و پسوند html. و انکود utf-8 ذخیره کنید .
<!doctype html>
<html>
<link rel="stylesheet" href="new1.css" />
<head></head>
<body class="style">
hello world!
</body>
</html>
در مورد تگ لینک فعلا فقط این را بدانید که برای اینکه فایل خارجی css را به این فایل html لینک یا متصل کنیم ، لازم است از این تگ استفاده کنیم . در داخل صفت href ، باید آدرس فایل خارجی را وارد کنیم .
3 ) یک فایل جدید ایجاد کنید . قطعه کد زیر را در آن وارد کنید و با یک نام دلخواه و پسوند css. و انکود utf-8 ، در همان محل فایل html ذخیره کنید .
.style {
color:red;
}
همانطور که مشاهده می کنید ، من از نام کلاسی که به تگ body در فایل html دادم ، در اینجا استفاده کردم . به عبارتی این نام معرف و نماینده ی تگ body است و هر کدی به این نام اختصاص دهم ، روی محتوای المان html اجرا می شود .
4 ) حالا می توانید فایل html اول را با مرورگر باز کنید و ببینید که متن شما با رنگ قرمز نشان داده شده است .
نکته : آموزش css به صورت کامل بعد از آموزش html5 خواهد آمد . پس لازم نیست هم اکنون سراغ یادگیری آن بروید . مثال بالا فقط برای درک مفهوم کلاس بود .
🌟 صفت عمومی class ، توسط همه ی مرورگرها پشتیبانی می شود .
🌟 می توانیم برای یک المان ، حتی چند نام کلاس استفاده کنیم . برای این کار کافیست میان نام ها یک فاصله بیندازیم .
<body class="style browser comment" >
در کد بالا می بینید که من 3 کلاس به المان body اختصاص دادم و از هر کدام آن ها بخواهم می توانم استفاده کنم . کاربرد این قابلیت را در آینده خواهید فهمید .
🌟 در هنگام تعریف نام کلاس به موارد زیر توجه کنید :
1 ) نام کلاس نباید با عدد شروع شود ( فقط حرف )
2 ) باقی کاراکترها می تواند حروف ، اعداد و دو کاراکتر خط تیره (-) و آندرلاین (_) باشد .
3 ) این نام به حروف کوچک و بزرگ حساس نیست . چون در html5 ، هیچ چیزی به حروف کوچک و بزرگ حساس نیست .
html5 is case-insensitive !
برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.
