کار صفت ها چیست؟
ما به وسیله صفت ها در HTML میتوانیم کنترل بیشتری بر تگ ها داشته باشیم. بسیاری از تگ ها صفت های منحصر به فردخود را دارند که به این صفت ها، صفت های اختصاصی میگویند. اما بعضی از صفات نیز بین تگ ها مشترک است و در همه آنها یک کار را انجام میدهند. به این صفت ها، صفت های عمومی گفته میشود. صفت ها همیشه در تگ آغازین به کار میروند و از دو قسمت اصلی تشکیل می شوند:
آموزش طراحی وب ( HTML ) – قسمت سوم
- Name : نام صفتی که میخواهید کنترل کنید. مثلا صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل می کند.
- Value : مقداری است که برای صفت تعیین می شود. مثلا مقدار right برای صفت align در تگ p، باعث راست چین شدن متن پاراگراف می شود. Valueها همیشه باید در داخل کوتیشن ها (double یا single) قرار بگیرند و با علامت = به نام صفت منتسب شوند.
شکل کلی تعریف صفات برای عناصر به این صورت است:
<tagname attribute1='value'attribute2='value'> content </tagname>
|
۱
|
<tagname attribute1=‘value’attribute2=‘value’> content </tagname>
|
مثال زیر پاراگراف را راست چین می کند:
|
۱
|
<p align=‘right’>این یک پاراگراف راست چین است</p>
|
همانطور که در قبل اشاره شد بعضی از صفت ها که به عنوان صفت های عمومی شناخته می شوند در تمام تگ ها کار یکسانی را انجام میدهند. در ادامه مطلب با این صفت ها و کار هر کدام آشنا خواهید شد:
معرفی صفات عمومی
id: از این صفت برای تعیین یک شناسه برای یک عنصر استفاده می شود. این شناسه می بایست در صفحه یکتا باشد. یعنی نباید برای صفت id، دو عنصر مختلف،یک مقدار مساوی انتخاب کنیم. از این صفت برای نسبت دادن یک گزینشگر ID به یک عنصر نیز استفاده میشود. مثال:
|
۱
|
<p id=‘p1’> این یک پاراگراف است </p>
|
class: از این صفت برای نسبت دادن کلاسی که به زبان CSS نوشته شده است به یک عنصر استفاده میشود.
مثال:
|
۱
|
<p class=‘p-red’> این یک پاراگراف است </p>
|
dir: جهت گیری متن داخل یک عنصر را کنترل میکند. این صفت دارای دو مقدار است :
- rtl: برای جهت گیری عنصر از راست به چپ
- ltr: برای جهت گیری عنصر از چپ به راست
مثال:
|
۱
|
<p dir=‘rtl’> این یک پاراگراف راست به چپ است </p>
|
lang: از این صفت معمولا برای تعیین زبان اصلی به کار رفته در صفحه و برای تگ <html> استفاده می شود. شما میتوانید این صفت را برای هر نوع عنصر دیگری که زبان آن غیر از آن چیزی است که در تگ <html> تعریف شده است نیز استفاده کنید. مقداری که این صفت میپذیرد، یکی از کدهای زبانی مانند …. , en , fa , fr , ar خواهد بود. مثال:
|
۱
۲
۳
|
<html lang=‘fa’>
<p lang=‘en’>This is a English Paragraph</p>
</html>
|
style: از این صفت برای تعیین یکسری قواعد و مقادیرشان که در زبان CSS تعریف می شوند برای یک عنصر میتوان استفاده کرد. مثال:
|
۱
|
<p style=‘background-color: #ff00ff;’>این یک پاراگراف است</p>
|
title: این صفت مقداری از نوع رشته ساده را دریافت کرده و آن را به صورت tooltip هنگامی که نشانگر موس بر روی عنصر قرار گیرد، نمایش میدهد. مثال:
|
۱
|
<p title=‘سایت گوگل’>Google</p>
|
contenteditable: این صفت که یکی از مقادیر true و false را اختیار میکند، مشخص میکند که آیا عنصر موردنظر قابل ویرایش توسط کاریر باشد یا خیر؟ true به معنی قابل ویرایش بودن عنصر است. مثال:
|
۱
|
<p contenteditable=‘true’>این یک پاراگراف قابل ویرایش است.</p>
|
hidden: این صفت برای مخفی کردن عناصر استفاده میشود. و یکی از دو مقدار true و false که true به معنی مخفی شدن عنصر است، را به عنوان مقدار می پذیرد. عناصر hidden در صفحه نمایش داده نمیشوند. از این صفت میتوان برای مخفی نگه داشتن یک عنصر از دید کاربر تا زمان برقراری یک شرط استفاده نمود. در این حالت جاوااسکریپت می تواند با حذف یا تغییر مقدار این صفت، عنصر را مجدداً نمایش دهد. مثال:
|
۱
|
<p hidden=‘true’>این پاراگراف در صفحه مرورگر نمایش داده نمیشود.</p>
|
بسیار خب، تا اینجا با صفات مشترک که برای همه ی تگ های HTML میتوان از آن ها استفاده کرد آشنا شدید، در مطلب بعدی با تگ های قالب بندی متن آشنا خواهید شد.
منبع : سون لرن
Inleeligtnce and simplicity – easy to understand how you think.