دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » فیلم آموزش CSS چیست و نحوه اتصال CSS به HTML
فیلم آموزش CSS چیست و نحوه اتصال CSS به HTML

فیلم آموزش CSS چیست و نحوه اتصال CSS به HTML

در اولین قسمت از فیلم آموزش CSS اول CSS را معرفی کرده ایم و سپس نحوه اتصال CSS به HTML را آموزش داده ایم . اول از هر چیز باید بدانید که CSS چیست ؟

CSS چیست ؟

CSS مخفف Cascading Style Sheet است و به معنی شیوه نامه آبشاری هستش و جزء زبان های طراحی وب محسوب میشود و این امکان را به طراحان وب میدهد تا فایل HTML خود را استایل دهی کنند .

برای اطلاعات بیشتر ، تاریخچه و نسخه های مختلف CSS کلیک کنید . 

سینتکس CSS :

سینتکس یک زبان یعنی نحوه نوشتن آن زبان ، سینتکس زبان CSS به صورت عکس زیر است :

سینتکس CSS

سینتکس CSS

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

نکاتی باید در نوشتن CSS رعایت کنید :

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

2 . هر تعداد ویژگی ( Property ) زبان CSS رو که می خواهید بنویسید باید آن ها را داخل {  } بنویسید .

3 . اگر خواستید بیش از یک ویژگی برای یک سلکتور بنویسید حتماً باید با سیمی کالون آن ها را از هم جدا بکنید .

 

سلکتور ها دو نوع هستند : سلکتورهای عمومی و سلکتور های اختصاصی

سلکتور های عمومی همان تگ های html هستند که می خواهید به آن ها استایل بدهید و سلکتور های اختصاصی هم سلکتور هایی هستند که با Class و Id مشخص میشوند . در ادامه با این ها بیشتر آشنا میشوید .

نحوه اتصال CSS به HTML

در فیلم آموزش CSS ما سه روشی که بیشتر برای وصل کردن CSS به HTML استفاده می شود را برای شما گفته ایم .

روش اول : اکسترنال

در این روش یک فایل جداگانه برای CSS درست می کنیم و اون رو به فایل HTML وصل می کنیم همانند کد زیر ، این روش بیش تر استفاده می شود چون کد نویسی مرتب و تمیزی خواهیم داشت :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		
	</head>
	<body>
		
	</body>
</html>

همان طور که می بینید در داخل کد های HTML و در فسمت head یک تگ link نوشته ایم برای اتصال CSS به HTML و خاصیت rel نوع رابطه را مشخص می کند و type نوع فایلی که می خواهیم به html وصل کنیم را مشخص می کند و href هم آدرس فایل CSS را مشخص می کند .

روش دوم : اینترنال

در این روش با استفاده از تگ Style در داخل تگ head به html استایل می دیم به صورت زیر :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		
		<style>
				h1{
					color: #ff0;
				}
		</style>
		
	</head>
	<body>
		<h1> Web30ty </h1>
	</body>
</html>

روش سوم : روش خطی

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

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>	
	</head>
	<body>
		<h1 style="color: #ff0;"> Web30ty </h1>
	</body>
</html>

توضیحات بیشتر در فیلم آموزش CSS چیست داده شده است .

فیلم آموزش CSS چیست را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

نظرات کاربران :


  1. Zahra گفت:

    سلام خسته نباشید
    اتصال css به html از سه طریق بود من دو روش میتونم وصل بشم اما روش اکسترنال اصلا وصل نمیشه میتونید راهنماییم کنید…

    • رضا طوماری گفت:

      سلام
      تو فیلم آموزشی هر سه روش کامل توضیح داده شده هر کجاش مشکل داشتید بگید کمکتون کنم

  2. s.Ali گفت:

    سلام استاد خدا قوت . . . استاد شما کی اموزش ساخت قالب رو در سایت عزیز web 30ty می گذارید؟

  3. نودی گفت:

    خوب بود

  4. سونیا گفت:

    واقعا عالی بود،کلی روش امتحان کردم نشدولی این روش عالی بود💚

جواب سوال چیه ؟ *