تبلیغات
یادداشت های من - آموزش HTML5 – جلسه یازدهم – صفات جهانی Global Attributes- 1

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

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه یازدهم – صفات جهانی Global Attributes- 1

جمعه 31 تیر 1390   08:09 ب.ظ

قبل از اینکه مرجع کامل تگ های HTML5 را شروع کنید باید با دو موضوع آشنا شوید. یکی صفات جهانی و دیگری صفات رویداد.

 

صفات زیر توسط تمام تگ های HTML5 به جز تعداد اندکی پشتیبانی می شود.

accesskey

مقداری که می گیرد: کاراکتر – یک یا چند کاراکتر کی برد که با Space از هم جدا می شوند.

توضیح: یک میانبر روی کی برد مشخص می کند که کاربر بازدن آن می تواند به آن عنصر دسترسی داشته باشد.

مثال:

<a href="http://www.w3schools.com/" accesskey="w">W3Schools</a><br />
<a href="http://www.google.com/" accesskey="g">Google</a>

 

 

class

مقداری که می گیرد: نام یک کلاس

توضیح: کلاسی را برای یک عنصر مشخص می کند. البته می توان از آن برای جاوااسکریپت هم استفاده کرد که توسط آن بتواند کلاس یک عنصر HTML را به وسیله HTML DOM تغییر دهد.

مثال:

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>

 

نکته: خاصیت کلاس برای این تگ های HTML کاربرد ندارد: base، head، hml، meta، param، script، stryle و title.

نکته: می توان چند نام کلاس را به یک عنصر HTML اختصاص داد. مثلاً

<span class="left_menu important">

این کار باعث ادغام چند CSS برای یک تگ می شود. برای انتساب چند کلاس همانطور که دیدید باید از اسپیس بین دو کلاس استفاده کنید.

نکته: نام کلاس ها را با عدد شروع نکنید. اکثر مرورگرها از آن پشتیبانی نمی کنند.

مثال: انتساب دو کلاس به یک عنصر:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1.intro
{
color:blue;
text-align:center;
}
.important {background-color:yellow;}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

 

 

contenteditable  (جدید)

مقداری که می گیرد: true یا false یا  inherit (پیروی از والد، اگر والد قابل ویرایش باشد آن هم قابل ویرایش است.)

توضیح: مشخص می کند که آیا کاربر مجاز به ویرایش محتویات هست یا نه.

مثال:

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

 

 

contextmenu  (جدید)

مقداری که می گیرد: id منو (menu_id)

context menuی آن عنصر را مشخص می کند.

 

dir

مقداری که میگیرد: rtl (راست به چپ) یا ltr (چپ به راست) یا auto (به مرورگر اجازه می دهیم خودش جهت مناسب را انتخاب کند، از این گزینه فقط در صورتی استفاده کنید که جهت متن نا مشخص باشد.)

توضیح: جهت متن محتویات یک عنصر را مشخص می کند.

مثال:

<p dir="rtl">Write this text right-to-left!</p>

 

 

draggable

مقادیری که می گیرد: true یا false  یا auto

توضیحات:نشان میدهد که آیا کاربر مجاز به جابجا کردن آن عنصر هست یا نه

 

 

dropzone

مقادیری که می گیرد: copy یا move یا link

توضیحات: نشان می دهد که زمانی که عنصر جابجا شده رها شد چه اتفاقی رخ دهد.

 

 

hidden

مقداری که می گیرد: hidden

توضیحات: عناصر مخفی نمایش داده نمی شوند.

مثال:

<p hidden="hidden">This is a paragraph.</p>

از این تگ می توانید در زمانی استفاده کنید که کاربر باید یک کاری را انجام دهد تا یک عنصر به و نمایش داده شود، پس از انجام کار توسط کاربر (مثل کلیک روی یک دکمه) آن عنصر توسط جاوااسکریپت نمایش داده می شود.

 

بقیه خواص جهانی در جلسه بعد


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،