آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی

سلام به همه ی عزیزان ITPRO
در جلسات قبل با فرم ها و جداول آشنا شدیم و در جلسات باقی ماندمی خواهیم مباحث ریزی که در میان جلسات قبل گفته نشده را بگویم . در این جلسه ابتدا کمی راجع به کد نویسی اصولی(برای لود سریع تر صفحات) و سپس راجع به Transition ها صحبت کنیم.

اصولی کد بنویسیم


ما در طراحی وبسایت می توانیم که به هر المان یک ID یا یک Class بدیهم و شروع به نوشتن کد CSS کنیم. اما این کار کاملا اشتباه است. ما در کد نویسی های خودمان باید جند نکته را برای اصولی تر شدن کار رعایت کنیم

نوشتن در فایل CSS جدا

ما تا الان همه ی Style ها را داخل Head قرار می دادیم که کاری اشتباه است . ما باید Style های صفحه ی خود را داخل فایلی با پسوند CSS گذاشته و درون Head صفحه قرار دهیم.
برای این کار من پروژه ی 12 را ایجاد می کنم. و داخل آن یک فایل Index.html ایجاد می کنم و کد های اولیه ی هر صفحه ی وب را داخل آن می نویسم. سپس به داخل نرم افزار Notepad ++ می روم و با زدن CTRl+N یک فایل جدید ایجاد می کنم. از منوی Languege در قسمت C گزینه ی CSS را انتخاب می کنم. سپس فایل را در فولدر Project12 در کنار فایل index.html قرار می دهم. سپس فایل Index را باز می کنم تا آن را با فایل CSS مرتبط کنم. فایل HTML:

	
	
	
	
	
	

حالا می خواهم فایل HTML را به فایل CSS مرتبط کنم. برای این کار من از تگ LINK استفاده می کنم:

	
		
	
	
	
	

من با استفاده از تگ Link یک ارتباط بین یک فایل دیگر و صفحه ی HTML ایجاد می کنم. سپس با استفاده از Rel Attribute نوع ارتباط بین این دو فایل و سپس با Href آدرس فایل CSS را می دهم.
حالا فایل های ما با هم در اتباطند برای تست من در فایل Css به Body یک رنگ پس زمینه می دهم:
body{
	background-color:darkred;
}
توجه داشته باشید که داخل فایل CSS نیازی به نوشتن تگ