روش های اضافه کردن CSS به سایت

مقالات این سری آموزشی :

  1. آشنایی با CSS و شروع کار با آن
  2. آموزش انتخابگر ها (Selectors) در CSS
  3. روش های اضافه کردن CSS به سایت
  4. آموزش قرار دادن تصویر پس زمینه در CSS

سه راه برای اضافه کردن کدهای css به صفحه داریم :

  • شیوه نامه خارجی یعنی در یک فایل مجزا(External style sheet)
  • شیوه نامه داخلی (Internal style sheet)
  • اعمال به خود عنصر(Inline style)

شیوه نامه خارجی

این نوع بهترین حالت برای استفاده در سایتی با چندین صفحه است،چون با یک تغییر کوچک این تغییر در همه صفحه های سایت (که فایل CSS بهشون الحاق شده) اعمال میشه . برای لینک کردن فایل css مجزا به صفحه باید از تگ <link> استفاده کنید ،به این شکل:

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

این فایل مجزای CSS رو می تونید با هر ادیتوری بنویسید و حتما باید پسوند فایل رو .CSS بزارید . در ضمن هیچ کد html نباید در اون باشه و فقط کد css رو قبول می کنه. مثل این :

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

هیچ وقت بین مقدار خصیصه و واحد اون مقدار فاصله قرار ندید (مثل این : margin-left: 20 px;) بلکه حتما باید به این صورت نوشته بشه : margin-left: 20px;)

شیوه نامه داخلی

این نوع استایل دهی بهتره زمانی استفاده شود که یک استایل شیت بیشتر ندارین و یک صفحه یا چند صفحه محدود دارید ،اون موقع از این روش استفاده میکنیم و داخل همون فایل HTML و با کمک تگ <style> کدها رو مینویسیم.این تگ رو باید داخل تگ head بذارید:

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

شیوه نامه Inline

اگر از این روش استفاده کنید بسیاری از مزیتهای اصلی css رو از دست خواهید داد! چون محتوا رو با نحوه ی نمایش قاطی میکنه (اگه با MVC آشنا باشید بهتر متوجه میشید این بخش رو) . به هرحال برای استفاده از این روش باید از خاصیت style برای عنصر مورد نظر استفاده کنید:

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

چندتا نکته:

  • هر سه ی این روشها رو میتونید با هم به کار ببرید.
  • اگر برای یک عنصر صفحه مثل تگ <h1> با هر سه روش استایل تعریف کنید تکلیف چیه ؟ اون موقع بحث اولویت میاد وسط . به این صورت که نزدیک ترین استایل به عنصر در اولویته یعنی :
    • اول: Inline style
    • دوم: Internal style sheet
    • سوم: External style sheet
    • چهارم: پیشفرضهای خود مرورگر
در همین رابطه :   آموزش انتخابگر ها (Selectors) در CSS

یادتون باشه که تگ های <link> و <style> رو داخل تگ <head> استفاده کنید .

دسته بندی : CSS

2 نظر

  1. سلام من دانشجو کاردانی رشته نرم افزار کامپیوترم باید یه سایت موسیقی برای واحد پروژه ام طراحی کنم میشه منو راهنمایی کنید؟
    اگه میشه به ایمیلم پیام بدین تا ایدی تلگرامم رو بفرستم ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in فونت
۵۰ فونت انگلیسی جدید و بسیار زیبا ۲۰۱۱

امروز 50 فونت جدید و داغ سال 2011 را از طرف سایت 1stwebdesigner برای شما آماده کرده ایم که امیدواریم...

Close