روش های نوشتن کد با CSS (افزودن سی اس اس)

روش های نوشتن کد با CSS (افزودن سی اس اس)

زمان مطالعه

5 دقیقه

تعداد بازدید

54

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

روش های نوشتن کد با CSS (افزودن سی اس اس)

روش های نوشتن کد با CSS (افزودن سی اس اس)

زمان مطالعه

5 دقیقه

تعداد بازدید

54

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


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

سه روش برای این کار وجود دارد:

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

سی اس اس خارجی (External style sheet)

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

هر صفحه HTML باید با استفاده از تگ <link> به فایل سی اس اس خارجی متصل شود. تگ <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");}

سی اس اس داخلی (Internal style sheet)

زمانی که یک فایل 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 style)

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

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

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

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

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

این اولویت به شکل زیر است:

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

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

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

و بهترین روش استفاده از سی اس اس به صورت یک فایل خارجی است در سئو این یک ضرورت برای سایت شما می باشد

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی