محتوای آموزشی

مقدمات کار با سی اس اس

مقدمات کار با سی اس اس

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

سلسله مراتب اجرای کدهای سی اس اس

در سی اس اس (CSS) همواره آخرین دستوری که نوشته شود برنده است. به عبارت دیگر آخرین دستورات سی اس اس (CSS) موجب می گردند دستورات پیشین تاثیر خود را از دست بدهند.به عنوان مثال به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="styleshee" type="text/css" href="styles.css"/>
	</head>
	<body>
		<p>آشنایی با سلسله مراتب اجرای کدهای سی اس اس</p>
	</body>
</html>

همانطور که در کدهای بالا مشاهده می کنید یک تگ p که حاوی عبارت " آشنایی با سلسله مراتب اجرای کدهای سی اس اس " است را داخل تگ body قرار داده ایم.یک فایل سی اس اس با نام styles.css را نیز به صفحه خود اضافه کرده ایم.اکنون به اضافه کردن کدهای سی اس اس (CSS) خود داخل این فایل می پردازیم.

body {
	direction:rtl;
}
p {
   color:blue;
   font-size:20px;
}
p {
   color:red;
}

همانطور که در کد فوق مشاهده می کنید ابتدا با استفاده از یک element selector تگ p را انتخاب کرده ایم و رنگ و اندازه مد نظر خود را نوشته ایم و در نهایت مجدد رنگ Selector تحت عنوان p را از آبی به قرمز تغییر داده ایم.

نکته : چنانچه با مباحث مربوط به selector ها و همچنین انواع پراپرتی های css آشنایی ندارید،نگرانی از این بابت نداشته باشید چرا که در مقالات بعدی این مفاهیم به طور کامل آموزش داده خواهند شد.

حال زمانی که مرورگر در حال مرور کدهای css ما می باشد ابتدا رنگ محتویات تگ p را آبی کرده و ساز متن داخل آن را نیز 20 پیکسل قرار می دهد،اما زمانی که به سراغ ادامه کدهای css ما می رود مجددا مجددا استایل های جدیدی که به تگ p داده ایم را اعمال می کند بنابراین رنگ محتوای تگ p را از آبی به قرمز تغییر می دهد اما از انجا که سایز تگ p را دیگر تغییر نداده ایم،سایز آن تغییر نکرده و همان 20 پیکسل باقی می ماند.به طور کلی زمانی که در چند نقطه از فایل سی اس اس خود از سلتکتورها و پراپرتی های یکسان استفاده کرده باشیم همواره آخرین کدها مد نظر قرار داده می شوند.بنابراین خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود :

مرورگرها کدهای html را از بالا به پایین خط به خط تفسیر کرده و به کاربر نمایش می دهند،بنابراین این قضیه در مورد ترتیب قرارگیری کدهای سی اس اس External و Internal هم صدق می کند. برای روشن شدن این موضوع کد زیر را در نظر بگیرید :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<style>
			p{
				color:green;
			}
		</style>
	</head>
	<body>
		<p>آشنایی با سلسله مراتب اجرای کدهای سی اس اس</p>
	</body>
</html>

همانطور که در کد فوق مشخص است پس از لینکی که به فایل styles.css خود در تگ head قرار داهی ایم تگ styleرا نوشته و در آن رنگ p را به سبز تغییر داده ایم. از آنجا که تگ style بعد از تگ link که به فایل styles.css لینک داده است آمده، رنگ سبز به جای رنگ قرمز در نظر گرفته می شود.خروجی قطعه کد بالا را در مرورگر مشاهده می کنید.

حال قصد داریم تا رنگ این پاراگراف را با استفاده از کدهای سی اس اس Inline هم تغییر دهیم. برای این منظور کد خود را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<style>
			p{
				color:green;
			}
		</style>
	</head>
	<body>
		<p style="color:fuchsia">آشنایی با سلسله مراتب اجرای کدهای سی اس اس</p>
	</body>
</html>

مجددا مروگر را به روز رسانی می کنیم و مشاهده می کنیم که رنگ بنفش به تگ p اعمال شده است.

در واقع از آنجا که کدهای سی اس اس Inline پس از کدهای سی اس اس External و Internal قرار گرفته اند برنده این بازی هستند!

توضیحات یا comment ها در CSS

comment به منظور ارائه ی توضیح درباره ی کد مورد نظر استفاده می شود، در صورت لزوم همچنین می توانید توضیحاتی برای کدهای خود قرار دهید تا در آینده که قصد تغییر تغییر یا توسعه کدهای خود را داشتید به شما کمک کنند.ممکن است گاهی چند نفر بر روی یک فایل css کار کنند،در این مواقع می توانید با استفاده از کامنت ها،کدهایی که خودتان نوشته اید را متمایز از کدهای سایر افراد کنید.توضیحات (Comment) توسط مرورگرها نادیده گرفته می شوند و در نحوه نمایش عناصر هیچ تغییری ایجاد نمی کنند.

یک کامنت CSS با عالمت /* آغاز گردیده و با کاراکتر /* پایان می یابد . توضیحات نیز ممکن است چندین خط را به خود تخصیص دهند.به مثال زیر توجه کنید:

p {
	color: red;
	/* this is a single line comment */
}
p {
	color:red;
	/*  
		this is a 
		mulitiline comment 
	*/
}

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'