روش های استفاده از CSS در HTML

صفحه اصلی » انجمن ها
« در صورت وجود هرگونه اشکال در این مطلب لطفا گزارش اشکال آن را ارسال نمایید »

شیوه نامه یا CSS یک سند متنی می باشد که مرورگر با پردازش کدهای موجود در این فایل، به سندهای HTML رنگ و لعاب می دهد. به طور کلی با CSS ظاهر و زیبایی فایل های HTML را مدیریت می کنیم. استفاده از CSS3 امروزه تبدیل به یک تخصص شده و به عنوان یک طراح سایت، باید به آن تسلط داشته باشید.

مقالات و آموزش
بیشتر بخوانید
برای استفاده از CSS در HTML می توان از ۳ روش استفاده کرد.
در این مقاله به معرفی این ۳ روش با مثال می پردازیم.
روش اول : فراخوانی خارجی
در این روش ابتدا یک فایل مجزا با پسوند css. ایجاد می کنیم. (مثلا style.css)
سپس این فایل ایجاد شده را از طریق تگ link در تگ head صفحه HTML مورد نظرمان قرار می دهیم.
<head>
        <link rel="stylesheet" href="style.css">
</head>
پس از اجرای صفحه مورد نظر، محتوای فایل style.css در صفحه HTML فراخوانی و پردازش می شود.
اگر کد زیر را در فایل CSS قرار دهید، تمام تگ های p در فایل HTML خاصیت آن CSS را دریافت می کنند.
p {
        color: red;
        font-size: 20px;
}
طبق دستور بالا، تگ های p به رنگ قرمز و سایز ۲۰ پیکسل در خواهند آمد.
این نوع فراخوانی اصولی ترین و صحیح ترین نوع فراخوانی فایل های CSS می باشد.
روش دوم : فراخوانی داخلی
در این روش به جای اینکه یک فایل مجزا بسازیم، کدهای CSS را در تگ style در درون خود فایل HTML قرار خواهیم داد.
دقت کنید در این روش نیز تگ style باید در تگ head قرار بگیرد.
<head>
        <style>
                p {
                        color: red;
                        font-size: 20px;
                }
        </style>
</head>
این نوع فراخوانی اصولی است، اما باعث سنگین شدن فایل های HTML می شود و همچنین مدیریت کدها نیز سختتر خواهد شد.
روش سوم : فراخوانی خطی
در این روش برای اجرای CSS می توان دستورات به مستقیما در تگ مورد نظر نوشت.
به این صورت که هر تگ استایل خاص خودش را دارد.
به نمونه کد زیر دقت کنید:
<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>
همانطور که می بینید، تگ p اول استایل خاص خودش را دارد اما تگ p دوم هیچ استایلی ندارد.
این نوع استفاده استاندارد نیست و در شرایط خاص مورد استفاده قرار می گیرید. زیرا برای هر بار تغییر یک استایل، مجبور به تغییر چندین باره آن خواهید شد.
فرض کنید کد زیر را داریم:
<p style="color: red;">This is my first paragraph.</p>
<p style="color: red;">This is my second paragraph.</p>
<p style="color: red;">This is my third paragraph.</p>
این دو پاراگراف رنگ قرمز دارند، اگر بخواهید آنها را آبی کنید مجبور به تغییر ۳ خط کد خواهید شد.
اما اگر از CSS داخلی یا CSS خارجی استفاده کنید، با یک بار تغییر کلاس یا تگ (در CSS)، آن تغییر روی تمام تگ ها (در HTML) اعمال خواهد شد

اشتراک گذاری مطلب

این مطلب را با دوستانتان در شبکه های اجتماعی به اشتراک بگذارید و معرفی نمایید

لطفا جهت ثبت نظر یا پرسش و پاسخ ابتدا وارد سایت شوید یا ثبت نام نمایید
مــطالب مــرتبط با این مــوضـوع

دیگر مطالب خواندنی

آخرین اخبار تکنولوژی، آموزش برنامه نویسی، توسعه زبان ها و ... را در وبلاگ آکادمی فیداکسو دنبال کنید
همچنین از آخرین خبرها و تخفیفات سایت نیز اینجا آگاه شوید

بوت استرپ / Bootstrap چیست؟

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

بیشتر بخوانید »