آشنایی مقدماتی با CSS

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

آشنایی مقدماتی با CSS

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

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

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

درون خطی ( Inline ): که با استفاده از خصیصه Style در تگ آغاز هر المان، آن را سبک دهی می کردیم که در بخش های گذشته ازاین روش استفاده کردیم.
داخلی ( Internal ): در این روش دورن تگ <head> تگی به نام <style> را ایجاد کرده و درون آن سبک های دلخواه را برای المان های سند می نویسیم. تگ <style> زوج بوده و دارای تگ آغاز و پایان است.
خارجی ( External ): در این روش تمام کدهای CSS را در یک فایلی جدا نوشته و آنها را به صفحه لینک می دهیم. مزیت این روش این است که می توان تمام کدهای نوشته شده را به چند صفحه متصل کرد و نیازی به نوشتن کدهای تکراری برای هر صفحه نیست.

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

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

p { property: value; }

1	p { property: value; }

در اینجا p انتخاب کننده ( Selector ) است و یعنی هر پاراگرافی درون صفحه را انتخاب کن و CSS ها را به آن اعمال کن. به نحوه نوشتن CSS ها توجه کنید. ابتدا property را نوشته و بعد ” : ” و بعد مقدار را می نویسیم و در انتها ” ; ” را می نویسیم.

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

روش درون خطی

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="color:green"> این پاراگراف را با استفاده از خصیصه استایل به رنگ سبز تغییر داده ایم </p>

	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

</head>

<body>

<p style="color:green"> این پاراگراف را با استفاده از خصیصه استایل به رنگ سبز تغییر داده ایم </p>

</body>

</html>

روش داخلی

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>
		body { background-color: cyan; }
		h1 { color: blue; }
		p { color: green; }
		</style>
	</head>
	<body>
		
		<h1> عنوان مطلب نوشته شده در صفحه </h1>

		<p> پاراگرافهایی در صفحه </p>

		
	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

body { background-color: cyan; }

h1 { color: blue; }

p { color: green; }

</style>

</head>

<body>

<h1> عنوان مطلب نوشته شده در صفحه </h1>

<p> پاراگرافهایی در صفحه </p>

</body>

</html>

روش خارجی

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

زمانی که تمام دستورات سبک دهی را در فایل خارجی نوشتیم، در تگ <head> هر سند HTML می توان فایل خارجی دستورات CSS را به آن سند متصل کرد. به مثال زیر توجه فرمایید:

می خواهیم یک فایل خارجی برای CSS هایمان ایجاد کنیم. در نرم افزار sublime یک صفحه جدید را با فشردن کلیدهای Ctrl+N ایجاد کنید. در منوی File بر روی Save As کلیک کنید. توجه کنید که برای فایل های CSS نام دلخواه را تایپ کرده و در ادامه .CSS را اضافه کنید و در کنار فایل index.html ذخیره کنید.

در این فایل کدهای زیر را تایپ کنید:

body {
    background-color: yellow;
}
h1 {
    color: red;
}
p {
    color: green;
}

body {

background-color: yellow;

}

h1 {

color: red;

}

p {

color: green;

}

برای لینک کردن فایل CSS به فایل HTML به این صورت عمل می کنیم که درون تگ <head> تگ <link> را ایجاد می کنیم. این تگ دارای دو خصیصه rel و href است که خصیصه rel رابطه فایل CSS با صفحه HTML تعریف می کند و خصیصه href برای تعیین آدرس فایل CSS می باشد. به کدهای زیر دقت کنید:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		
		<link rel="stylesheet" href="style.css">

	</head>
	<body>
		
		<h1> عنوان مطلب نوشته شده در صفحه </h1>

		<p> پاراگرافهایی در صفحه </p>

		
	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

</head>

<body>

<h1> عنوان مطلب نوشته شده در صفحه </h1>

<p> پاراگرافهایی در صفحه </p>

</body>

</html>

فونت و سبک دهی به آن

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

برای تعیین رنگ فونت از ویژگی color استفاده می کنیم.
برای تغیین خانواده فونت از ویژگی font-family استفاده می کنیم.
برای تغییر اندازه فونت از ویژگی font-size استفاده می کنیم. واحد اندازه فونت را می توان px و یا % ، em و … انتخاب کرد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>
		h1 { font-family: tahoma; 
			color: blue;
			font-size: 300%;
			}

		p { font-family: A shekari;
			color: red;
			font-size: 40px;
		 }

		
		</style>
	</head>
	<body>
		
		<h1> عنوان مطلب نوشته شده در صفحه </h1>

		<p> پاراگرافهایی در صفحه </p>

		
	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

h1 { font-family: tahoma;

color: blue;

font-size: 300%;

}

p { font-family: A shekari;

color: red;

font-size: 40px;

}

</style>

</head>

<body>

<h1> عنوان مطلب نوشته شده در صفحه </h1>

<p> پاراگرافهایی در صفحه </p>

</body>

</html>

حاشیه ، فاصله داخلی و فاصله خارجی

Border: با استفاده از این ویژگی می توان المان ها را حاشیه گذاری کرد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>

		p { border: 2px solid red;
		    
		  }
		
		</style>
	</head>
	<body>

		
			<p> پاراگراف شماره یک </p> <br>

			<p> پاراگراف شماره دو </p> <br>

			<p> پاراگراف شماره سه </p> <br>



	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

p { border: 2px solid red;

}

</style>

</head>

<body>

<p> پاراگراف شماره یک </p> <br>

<p> پاراگراف شماره دو </p> <br>

<p> پاراگراف شماره سه </p> <br>

</body>

</html>

Padding: با استفاده از این ویژگی، بین متن و حاشیه فاصله خالی ایجاد کنیم که به آن فاصله داخلی می گوییم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>

		p { border: 2px solid red;
		    padding: 20px;
		  }
		
		</style>
	</head>
	<body>

		
			<p> پاراگراف شماره یک </p> <br>

			<p> پاراگراف شماره دو </p> <br>

			<p> پاراگراف شماره سه </p> <br>



	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

p { border: 2px solid red;

padding: 20px;

}

</style>

</head>

<body>

<p> پاراگراف شماره یک </p> <br>

<p> پاراگراف شماره دو </p> <br>

<p> پاراگراف شماره سه </p> <br>

</body>

</html>

Margin: در قسمت های قبل گفتیم که مروگرها بین المان های سند، فاصله ای را به صورت پیش فرض قرار می دهند. با استفاده از ویژگی margin می توان بین این المان های ( درواقع بین حاشیه های المان ها ) فاصله دلخواهی را ایجاد کرد که به آن فاصله خارجی می گوییم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>

		p { border: 2px solid red;
		    padding: 20px;
		    margin: 70px;
		  }
		
		</style>
	</head>
	<body>

		
			<p> پاراگراف شماره یک </p> <br>

			<p> پاراگراف شماره دو </p> <br>

			<p> پاراگراف شماره سه </p> <br>



	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

p { border: 2px solid red;

padding: 20px;

margin: 70px;

}

</style>

</head>

<body>

<p> پاراگراف شماره یک </p> <br>

<p> پاراگراف شماره دو </p> <br>

<p> پاراگراف شماره سه </p> <br>

</body>

</html>

شناسه

وقتی که می خواهیم سبکی را به یک المان خاص نسبت دهیم، برای آن المان خصیصه شناسه ( id ) را در تگ آغاز تعریف می کنیم. شناسه را می توان به صورت انتخاب کننده استفاده کرد. بدین صورت که وقتی می خواهیم المانی با شناسه ای خاص را انتخاب کنیم، ابتدا # را می نویسیم و سپس شناسه آن المان را که بنویسیم، انتخاب می شود. شناسه باید یکتا ( unique ) باشد. یعنی نمی توان برای چند المان شناسه یکسان را در نظر گرفت.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>

		#p01 { border: 2px solid red;
		    padding: 20px;
		    margin: 70px;
		  }
		
		</style>
	</head>
	<body>

		
			<p id="p01"> پاراگراف شماره یک </p> <br>

			<p> پاراگراف شماره دو </p> <br>

			<p> پاراگراف شماره سه </p> <br>



	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

#p01 { border: 2px solid red;

padding: 20px;

margin: 70px;

}

</style>

</head>

<body>

<p id="p01"> پاراگراف شماره یک </p> <br>

<p> پاراگراف شماره دو </p> <br>

<p> پاراگراف شماره سه </p> <br>

</body>

</html>

در مثال بالا ابتدا برای پاراگراف اول شناسه p01 را تعریف کردیم. در تگ <style> با نوشتن #p01 پاراگراف اول انتخاب شد. همانطور که در عکس مشاهده می کنید، CSS های نوشته شده به پاراگراف اول اعمال می شوند.

کلاس

اگر بخواهیم چندین المان را همزمان با هم انتخاب کرده و سبک های خاصی را به آنها بدهیم، از خصیصه کلاس ( class ) استفاده می کنیم. این خصیصه را در تگ آغاز تعیین می کنیم و برای انتخاب المان های با class یکسان، نام تگ را نوشته و بعد ” . ” و در ادامه کلاسی را که تعیین کرده بودیم می نویسیم. مثلا برای انتخاب چندین پاراگراف با کلاس یکسان، در تگ <style> اینگونه عمل می کنیم:

 p.class { css rule }

1	p.class { css rule }

به مثال زیر توجه فرمایید:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>

		p.par { border: 2px solid red;
		    padding: 20px;
		    margin: 70px;
		  }
		
		</style>
	</head>
	<body>

		
			<p class="par"> پاراگراف شماره یک </p> <br>

			<p> پاراگراف شماره دو </p> <br>

			<p> پاراگراف شماره سه </p> <br>

			<p class="par"> پاراگراف شماره چهار </p> <br>

			<p> پاراگراف شماره پنج </p> <br>

			<p> پاراگراف شماره شش </p> <br>

			<p> پاراگراف شماره هفت </p> <br>

			<p class="par"> پاراگراف شماره هشت </p> <br>

			<p> پاراگراف شماره نه </p> <br>

	</body>
</html>

<!DOCTYPE html>

<head>

<title> عنوان صفحه </title>

<style>

p.par { border: 2px solid red;

padding: 20px;

margin: 70px;

}

</style>

</head>

<body>

<p class="par"> پاراگراف شماره یک </p> <br>

<p> پاراگراف شماره دو </p> <br>

<p> پاراگراف شماره سه </p> <br>

<p class="par"> پاراگراف شماره چهار </p> <br>

<p> پاراگراف شماره پنج </p> <br>

<p> پاراگراف شماره شش </p> <br>

<p> پاراگراف شماره هفت </p> <br>

<p class="par"> پاراگراف شماره هشت </p> <br>

<p> پاراگراف شماره نه </p> <br>

</body>

</html>

در مثال بالا با استفاده از خصیصه class پاراگراف های 1 و 4 و 8 را انتخاب و سبک دهی کردیم.

با این آشنایی مقدماتی با CSS آموزش های HTML را ادامه می دهیم. بعد از یادگیری کامل HTML در قدم بعد به یادگیری CSS می پردازیم.

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

خلاصه

عنوان

آشنایی مقدماتی با CSS

توضیحات

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

شرکت

سایت سازان

وب سایت

سایت سازان

لوگوی شرکت

آشنایی مقدماتی با CSS

آشنایی مقدماتی با CSS

روش درون خطی

روش داخلی

روش خارجی

فونت و سبک دهی به آن

حاشیه ، فاصله داخلی و فاصله خارجی

شناسه

کلاس

دیدگاه ‏خود را بنویسید لغو پاسخ