پرش به محتوا

اچ‌تی‌ام‌ال/سبک

ویکی‎کتاب، کتابخانهٔ آزاد

عموما بیشتر سبک‌ها ( style ) برای تمامی تگ‌ها یکسان است بجز در موارد خاص که تگ فاقد سبک باشد یا موارد خاصی در آن قابل استفاده نباشد، در جدول زیر تمامی سبک‌های موجود قرار دارد:

پس زمینه

[ویرایش]
صفت
توضیح
مقدار
زیر مقدار
background پس زمینه را مشخص می‌کند، می‌تواند شامل تصویر یا رنگ باشد. می‌تواند از دو مقدار رنگ و تصویر برخوردار باشد، برای آنکه پس زمینه دارای رنگ باشد از مقدار کد هگزا RGB یا استاندارد اچ‌تی‌ام‌ال یا گزینه‌های رنگ ویندوز در مقابل صفت استفاده می‌شود. همچنین برای آنکه تصویر قرار داده شود در مقابل صفت باید از ( مسیر )url استفاده شود. (جدول رنگ‌ها) برای مقدار ( مسیر )url می‌توان محل قرار گیری و نحوه تکرار یا هر دو را با هم مشخص نمود. برای اینکار در مقابل همین مقدار از کدهای زیر استفاده می‌شود:
مقدار
توضیح
جایگاه
bottom محل قرار گیری تصویر پایین
center محل قرار گیری تصویر وسط
left محل قرار گیری تصویر چپ
right محل قرار گیری تصویر راست
top محل قرار گیری تصویر بالا
no-repeat روش تکرار بدون تکرار
repeat روش تکرار پشت سر
repeat روش تکرار پشت سر
repeat-x روش تکرار تکرار عرضی
repeat-y روش تکرار تکرار طولی

مثال:

<تگ شروع style="background:url(مسیر) right repeat-y"> </تگ پایان>
<تگ شروع style="background: #000099"> </تگ پایان>

خطوط حاشیه

[ویرایش]
صفت
توضیح
مقدار
border خطوط حاشیه را مشخص می‌کند و می‌تواند شامل پهنا،رنگ و شکل خاصی باشد، همینطور می‌تواند مشخص نمود که این خط در کدام سمت باشد یا در چهار طرف قرار گیرد. شامل سه مقدار متفاوت است که در جدول زیر یک به یک بررسی می‌کنیم:
صفت
توضیح
مقدار
Color رنگ خطوط را مشخص می‌کند، لازم نیست که Color قید گردد، کافیست که کد آن را قرار دهیم. (جدول رنگ‌ها)
style شکل ظاهری خطوط را مشخص می‌کند، لازم نیست که Style قید گردد، کافیست که مقدار را قرار دهیم.
dashed = ایجاد خط تیره
dotted = خط نقطه چین
double = دو خط
groove = خط مشکی
hidden = مخفی
ridge = خط برجسته
inset = بر آمدگی به داخل
outset = بر آمدگی به خارج
solid = مکعب
width پهنا خطوط را مشخص می‌کند، لازم نیست که Width قید گردد، کافیست که مقدار را قرار دهیم. می‌تواند شامل 0 تا 199 پیکسل باشد یا اندازه‌های پیش فرض :
thin = کوچک
medium = متوسط
thick = کلفت

مثال:

<تگ شروع style=" border:#990000 medium dotted"> </تگ پایان>

خطوط حاشیه سفارشی

[ویرایش]

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

<تگ شروع style=" border-bottom:medium #0000FF groove; border-left: medium #0000FF groove"> </تگ پایان>

خلاصه نویسی

[ویرایش]

تمام کدهای بالا به صورت خلاصه نوشته شده بودند، می‌توان آن‌ها را در وضعیت کلی نوشت که برای اینکار طول کد نویسی افزوده می‌شود ولی مدیریت راحت تر می‌شود، به دو نمونه زیر توجه کنید:

<تگ شروع style=" border:#990000 medium dotted"> </تگ پایان>

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

<تگ شروع style=" border-color:#990000; border-style:dotted; border-width:medium"> </تگ پایان>

هدف از خلاصه نویسی؟ فایده اینکار در سند‌های کوچک مشخص نمی‌شود، اما زمانی که حجم کد نویسی بالاست باید در کد نویسی مختصر نویسی را رعایت کرد تا حجم بارگذاری کمتر شود.