اعمال CSS به سند وب

برای اعمال CSS بر یک سند وب یا به بیان دیگر برای زیباسازی صفحه و یا صفحات وب توسط CSS چندین راه وجود دارد. هر کدام از این راه ها برتری و ضعف مخصوص به خود را دارند و بنا به موقعیت های متفاوت مورد استفاده قرار می گیرند. که در ادامه تک تک روش ها را بررسی می کنیم.

قبل از هرچیز یک فایل متنی با نامی دلخواه و با پسوند html می سازیم و در آن به مقدار لازم html می ریزیم :)

 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>بابا سی اس اس داد</title>
</head>
<body>
  
</body>
</html>

 

حال آماده این هستیم تا با اولین روش اعمال کردن CSS به فایل htmlی که ساختیم آشنا شویم:

خطی

روش خطی یا inline بصورت زیر اعمال می شود:

 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Inline Style</title>
</head>
<body style="background-color: green;">

</body>
</html>

 

با اضافه کردن استایل خطی به تگ <body> حال باید سند ما در مرورگر دارای پس زمینه سبز باشد.

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

این نوع استایل در حال عادی استایل هایی که به روش های دیگر نوشته می شود را خنثی می کند و خودش بر روی عنصر اعمال می شود. فرض کنید به روشی دیگر پس زمینه عنصر body را قرمز کنیم. چون بصورت خطی رنگ سبز به آن اعمال شده است دیگر رنگ قرمز بر روی آن اعمال نمی شود.

همچنین در مطالب قبلی گفته شد که CSS بوجود آمد تا بحث زیباسازی را از محتوا جدا کند. اما با نوشتن استایل خطی ما دوباره باعث مخلوط کردن این دو بحث می شویم. چرا که برای اعمال استایل مستقیما به سراغ عنصر HTML می رویم. که این کار فرآیند نگهداری و گسترش پروژه را دشوار می کند.

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

داخلی

روش داخلی یا internal را می تواند بصورت زیر اعمال کرد:

 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Inline Style</title>

  <style type="text/css">
    body {
      background-color: green;
    }
  </style>

</head>
<body>

</body>
</html>

 

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

از این روش می توان در پروژه های تک صفحه کوچک استفاده کرد. یا برای زمانی که موقتا نیاز داریم تا آزمایشی را بر روی یک صفحه انجام دهیم.

نقطه ضعف این روش در این است که چون استایل ها در خود سند نوشته می شوند هر بار که کاربر صفحه را در مرورگر باز می کند استایل ها دوباره دانلود می شوند. به بیان دیگر نمی توان از قابلیت کش کردن مرورگر برای استایل ها استفاده کرد.

همانطور که گفته شد اینکه استایل ها فقط در یک سند وب نوشته می شوند بدین معنی است که اگر سایتی با چندین صفحه داشته باشیم نمی توانیم استایل هایمان را در سراسر پروژه مورد استفاده قرار بدهیم و مجبور به دوباره نویسی خواهیم شد. و این دیگر نقطه ضعف این روش می باشد.

خارجی

در روش خارجی یا external از یک فایل خارجی مخصوص به CSS استفاده می شود. کافی است یک فایل جدید با نامی دلخواه با پسوند css ایجاد کنیم و خطوط زیر را در آن بنویسیم:

 


body {
  background-color: green;
}

 

بعد از ساخت فایل نیاز است تا فایل CSS را به سند HTML معرفی یا به اصطلاح لینک کنیم. برای این کار در قسمت head بصورت زیر عمل می کنیم.

 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>External Style</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

</body>
</html>

 

توجه کنید که بنا به مکانی که فایل CSS شما وجود دارد و همچنین نام دلخواهی که انتخاب کرده اید قسمت href را پر کنید. در مثال بالا نام فایل styles.css است و فایل در کنار سند HTML قرار دارد.

به عنوان یک قانون عمومی بهتر است همیشه از این روش برای اعمال CSS به سند وب استفاده کرد.

چون در این روش از یک فایل خارجی استفاده می شود, عناصر موجود در سندهای مختلف یک سایت می توانند از این فایل و دستورهای CSS داخل آن استفاده کنند پس مشکلی که دو روش قبلی داشتند در این روش وجود ندارد. اگر نیاز به تغییری در استایل باشد کافی است به یک فایل رجوع کنیم نه چندین فایل. در نتیجه این روش در راستای نگهداری و گسترش پروژه حرکت می کند و انعطاف پذیری پروژه را بالا می برد.

همچنین برتری دیگر این روش این است که مرورگر می تواند فایل CSS را در حافظه نهان خود ذخیره کند یا به اصطلاح کش کند تا هر بار که کاربر وارد سایت می شود فایل مربوط به استایل ها دوباره دانلود نشود و این کار سرعت بارگذاری سایت را بهبود می بخشد.

استفاده از دستور import

روش دیگر استفاده از دستور import است که می تواند به روش داخلی و یا خارجی مورد استفاده قرار بگیرد.

این روش به ما اجازه می دهد تا در درون CSS فایل های CSS دیگری را فراخوانی کنیم.

import در استایل داخلی

فرض کنید فایل استایلی به نام my-style.css در پوشه ای به نام CSS داریم و میخواهیم در استایل داخلی آن را فراخوانی کنیم تا عناصر سند وب ما بتوانند از استایل های آن استفاده کنند. کافی است بصورت زیر عمل کنیم:

 


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>External Style</title>
  <link rel="stylesheet" href="styles.css">
  <style type="text/css">
    @import 'css/my-style.css';
  </style>
</head>
<body>

</body>
</html>

 

import در استایل خارجی

اگر قصد استفاده از این روش را در یک فایل خارجی CSS داشته باشیم کافی است از دستور import در خطوط اولیه فایل استفاده کنیم:

 


@import 'css/my-style.css';

body {
  background-color: green;
}

 

این روش این قابلیت را به ما می دهد تا بتوانیم فایل های CSS را بصورت ماژولی جدا جدا کنیم. به بیان دیگر استایل ها را بنا به وظیفه ای که دارند تقسیم بندی کنیم و در فایل های مخصوص به خود قرار دهیم. مثلا رنگ ها را در یک فایل, استایل های مربوط به صفحه آرایی را در فایل دیگر…

 


@import 'my-styles.css';
@import 'layout.css';
@import 'colors.css';
@import 'typography';

body {
  background-color: green;
}

 

مشکلی که این روش دارد این است که به ازای هر فایل مرورگر یک درخواست مجزا به سرور می فرستد که این خود یک نقطه ضعف این روش محسوب می شود و کارایی را کاهش می دهد.

در آینده روشی را معرفی می کنیم تا بتوانیم از نقاط روش خارجی و روش import بهره ببریم بدون اینکه درگیر نقاط ضعفشان بشویم.

مطالب مرتبط

11 دیدگاه برای “اعمال CSS به سند وب”

  3. سلام ، خیلی ممنون بخاطر مطالب مفیدتون
    یه سوالی داشتم…
    اگر بخوایم که یک فایل css رو از یک آدرس دیگه به سند html وصل کنم ، به جز قسمت href کدوم قسمت ها رو باید تغییر بدیم؟

    پاسخ

  4. سلام
    تشکر برای راهنماییهای ارزنده ای که دارین
    خواستم بدونم که به چه صورت فایل های CSS رو برای صفحات مختلف سایت ایجاد کنیم
    یعنی آیا برای هر صفحه ی سایت یه فایل CSS جداگانه ایجاد کنیم؟

    پاسخ

  5. سلام
    1-می شه چند فایل css رو بوسیله تگ لینک فراخوانی کرد؟
    2- import و تگ لینک در فراخوانی css چه تفاوتی با هم دارن؟
    3- اگه تو سندی دو فایل css یکی به روش لینک و یکی به روش import اعمال بشن و اگه ویژگی یکی از انتخابگرها درون هر دوی اونها بود و همچنین اون ویژگی ها با هم متفاوت بودن کدوم اولویت دارن؟

    پاسخ

    1. سلام،
      1. بله
      2. اگر از import استفاده کنیم باعث میشه که مرورگر الاف بشینه اونجا تا css ها دانلود بشن، ولی در مورد لینک، می تونه بصورت موازی دانلودها رو انجام بده که این موضوع سرعت کار بیشتری رو داره، در کل بهتره از لینک استفاده کنید در اکثر مواقع.
      3. خودتون تست کنید :)

      پاسخ

  6. سلام

    کد import داخلی رو درست گذاشتید ؟
    اینطور که خودتون گفتید اگر داخلی هست که دیگه نیازی به لینک نداره اما لینک کردید در صورتی که لینک برای خارجی استفاده می شه .

    External Style

    @import ‘css/my-style.css’;

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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