CSS چگونه کار میکند؟

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


 سه روش برای افزودن کد های CSS به صفحات وب

کد های CSS را میتوان به چند روش به صفحه ی وب اضافه کرد :

  • روش External
  • روش Internal
  • روش Inline

اضافه کردن کد های CSS در روش External

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

ارجاعات در یک صفحه توسط عنصر <link> که در قسمت <head> قرار دارد، در صفحه قرار میگیرند :

<head>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</head>
خودتان امتحان کنید

فایل خارجی (External) که کد های CSS در آن قرار میگیرد میتواند توسط هر ویرایشگر متنی نوشته شود.

این فایل نباید حاوی هیچ تگی از زبان HTML باشد و باید با پسوند css. ذخیره شود.

در نمونه مثال زیر محتوای فایلی به نام "mystyle.css" نشان داده شده است :

body {
    background-color: lightblue;
}

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

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

 ;margin-left: 20px


اضافه کردن کد های CSS در روش Internal

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

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

در نمونه مثال زیر نحوه ی استفاده از این روش نشان داده شده است :

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

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
خودتان امتحان کنید

اضافه کردن کد های CSS در روش Inline

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

در این روش صفت style به عنصر مربوطه اضافه میشود. صفت style اضافه شده میتواند شامل هر صفتی از زبان CSS باشد.

نمونه مثال زیر نشان میدهد که در روش Inline چطور میتوان رنگ و صفت margin-left عنصر <h1> را تغییر داد :

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
خودتان امتحان کنید

نکته : در روش Inline به این دلیل که محتوا و نحوه ی نمایش عناصر با هم ترکیب میشوند، مزایای استفاده از زبان CSS را که یکی از آنها جداسازی محتوا از نحوه ی نمایش است به چالش میکشد. از این روش در موارد ضروری استفاده کنید.


 چندین استایل برای یک عنصر

اگر چندین صفت از زبان CSS برای یک عنصر در روش های مختلف (External ، Internal ، Inline) تعریف شده باشد، آخرین مقداری که خوانده میشود روی عنصر مربوطه اعمال میشود.

فرض کنید که در روش External ، برای عنصر <h1> استایل زیر تعریف شده است :

h1 {
    color: navy;
}

و استایل تعریف شده در روش Internal هم ، برای عنصر <h1> به صورت زیر است :

h1 {
    color: orange;    
}

اگر استایل تعریف شده در روش Internal بعد از ارجاعی باشد که استایل در روش External را مشخص میکند ، عنصر <h1> به رنگ orange خواهد بود :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>
خودتان امتحان کنید

با این حال ، اگر استایل تعریف شده به روش Internal قبل از ارجاع روش External باشد، عنصر <h1> به رنگ orange خواهد بود :

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
خودتان امتحان کنید

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

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

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

در زیر اولویت های نحوه ی اعمال استایل بر روی یک عنصر مشخص شده است. شماره یک دارای بالاترین اولویت و شماره 3 پایین ترین اولویت هستند :

  1.  استایل در روش Inline (داخل یک عنصر HTML)
  2. استایل در روش External و Internal (در قسمت head)
  3. پیشفرض های مرورگر نصب شده بر روی سیستم.

بنابراین یک استایل در روش Inline (داخل یک عنصر خاص در HTML) دارای بیشترین اولویت است. این به این معناست که استایل تعریف شده در تگ head ، استایل تعریف شده در روش External و پیشفرض های مرورگر توسط روش Inline قابل چشم پوشی است. 

خودتان امتحان کنید

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

امیر علیمردانی - ۲ سال قبل
سلام اقای ملکی خسته نباشید سپاس فراوان از شما و همه دست اندرکاران می خواستم بدونم که در روش inline برای اضافه کردن css تر تیب خاصی داره مثلا شما اول color و بعد margin رو اوردین این ترتیب داره ؟؟
حمید رضا ملکی - ۲ سال قبل

سلام.. ممنونم... خیر ... 

امیر علیمردانی - ۳ سال قبل
خیلی ممنون از راه نمایی تون
امیر علیمردانی - ۳ سال قبل
ممنون از مطالبتون ولی ی خورده سنگینه من 15 سالمه نمی تونم خوب بفهمم
حمید رضا ملکی - ۳ سال قبل

سلام.. اگه براتون سنگینه آموزش ویدویی css را مشاهده کنید : 

آموزش ویدویی CSS

هدف لرن سورس

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

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

بخش های اصلی

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

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

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