طراحی وب سایت کتابخانه

طراحی وب سایت کتابخانه

اعمال کردن شیوه ها(Styles) به تگ های اچ تی ام ال

پنجشنبه, ۱۸ خرداد ۱۳۹۶، ۰۶:۳۵ ب.ظ
محتوایی را که بین تگ های اچ تی ام ال قرار می دهیم، به صورت عادی و بدون هیچ فرمت بندی برای کاربر نمایش داده می شود. در واقع اچ تی ام ال کاری جز نمایش دادن محتوا انجام نمی دهد؛ اگر بخواهیم ظاهر محتوا را دستکاری و فرمت بندی کنیم، باید از CSS استفاده کنیم. در قسمت CSS آموزش های لازم در این مورد داده شده است.
اما یک خصیصه با عنوان style وجود دارد که از طریق آن می توانیم ویژگی ها و مقادیر مربوط به CSS را استفاده کنیم. برای استفاده از این خصیصه به صورت زیر عمل می کنیم:
<tagname style="property:value;">
در عبارت بالا در قسمت property یک ویژگی مربوط به CSS را می نویسیم و در قسمت value نیز مقدار مربوط بهآن ویژگی را می نویسیم.
در بخش آموزش CSS نیز گفتم که مهمترین کاربرد CSS جداکردن محتوا از ساختار نمایش (صفحه آرایی) است. ما باید تلاش کنیم در طراحی صفحات وب، محتوا را از کدهای مربوط به ساختار نمایش آن جدا کنیم. به همین خاطر هم هست که در یک طراحی مناسب، سعی می کنیم فایل یا فایل های CSS را از فایل های اچ تی ام ال جدا کنیم تا بتوانیم تمام تنظیمات مربوط به صفحه آرایی را یکجا و با تغییر دادن ساختار فایل CSS عوض کنیم.
منظورم از گفتن این مورد در این قسمت این بود که بدانید استفاده از خصیصه style در تگهای اچ تی ام ال با اصل جداکردن محتوا از ساختار نمایش (صفحه آرایی) سازگار نیست. بهتر است از این خصیصه فقط در حین طراحی استفاده کنیم و هنگامی که به نتیجه مطلوب در مورد یک یا چند تگ اچ تی ام ال رسیدیم، ویژگی ها و مقادیر استفاده شده در این تگ (ها) را در داخل یک فایل جداگانه CSS قرار دهیم.
در زیر چند مثال ساده در مورد استفاده از این خصیصه را با هم مرور می کنیم:

تغییر رنگ پس زمینه

<p style="background-color:red;">
متن مربوط به پاراگراف در این قسمت قرار می گیرد.
</p>
تغییر رنگ محتوا

<p style="color:red;">تغییر رنگ محتوا.</p>
تغییر فونت

<p style="font-family:tahoma;">تعیین فونت برای متن.</p>
موافقین ۱ مخالفین ۰ ۹۶/۰۳/۱۸
مهرداد یوسفی فرد

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی