سبد (0)

CSSهای داخلی و خارجی

اعمال CSS بر روی تگهای HTML

Wiki

برای تحقق این امر، سه راه وجود دارد:

  1. برگه های استایل خارجی یا External style sheet
  2. برگه های استایل داخلی یا Internal style sheet
  3. استایل درون تگی یا Inline style

در ادامه به توضیح هر کدام از موارد بالا خواهیم پرداخت.

برگه استایل خارجی - External Style Sheet

Wiki

زمانی که Styleها در صفحات مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>

یک فایل CSS خارجی می تواند در هر ویرایشگری نوشته شود و نباید شامل تگهای HTML باشد و همچنین باید فرمت آن css. باشد.

مثال:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

توجه: بین کاراکترهای مقدار یک Property نباید فاصله باشد، اگر رعایت نشود در Firefox و Opera به مشکل برخواهید خورد، به عبارتی margin-left:20 px اشتباه است.

برگه های استایل داخلی - Internal Style Sheet

Wiki

زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شود، باید از Style داخلی استفاده کرد.

Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

استایل درون تگی - Inline Styles

Wiki

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

نتیجه اعمال چند Style مختلف

Wiki

اگر چند Property روی یک Selector در دو style sheet مختلف تنظیم شود، در نهایت Selector مربوطه تمام مقادیر را به ارث خواهد برد.

برای مثال، مقادیر زیر در یک Style خارجی تنظیم شده است:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

و همچنین مقادیر زیر به صورت داخلی در صفحه HTML تنظیم شده است:

h3
{
text-align:right;
font-size:20pt;
}

اگر فایل خارجی به صفحه HTML لینک باشد، در نهایت مقادیری که تنظیم خواهد شد به صورت زیر است:

color:red;
text-align:right;
font-size:20pt;

توضیح: رنگ از فایل CSS خارجی و بقیه موارد از Style داخلی به ارث برده می شود.

ترتیب اعمال استایل ها

Wiki

زمانی که یک خصوصیت یکسان به روش های مختلف برای یک عنصر، با مقادیر مختلف تنظیم می شود در نهایت کدام مقدار در نظر گرفته می شود؟

بصورت کلی، ما می توانیم بگوییم که ترتیب اعمال استایل ها بصورت زیر خواهد بود که اولویت با مورد آخر است:

  1. پیش فرض مرورگر
  2. برگه های استایل خارجی
  3. برگه های استایل داخلی
  4. استایل های درون تگی

بنابراین بالاترین اولویت را استایل درون تگی دارد و این بدان معنا است که اگر خصوصیتی هم درون تگ و هم در head صفحه و هم در یک استایل خارجی تنظیم شده باشد، نهایتاً مقدار درون تگ در نظر گرفته می شود.

Note

توجه: اگر لینک استایل خارجی، بعد از تعاریف استایل داخلی که در head صفحه قرار دارد، آورده شود، اولویت با تنظیمات درون استایل خارجی خواهد بود.

آموزش تصویری مطلب بالا (فیلم آموزش CSS)
 درس شماره 4 (CSSهای داخلی و خارجی)  زمان فیلم:  26:20

  خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +)
نوشته شده توسط امیر پهلوان صادق
بازدید: 56726

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه