آموزش مقدماتی css

آموزش مقدماتی cssReviewed by مهدی موسی زاده on Feb 24Rating: 4.5آموزش css قسمت اول (روش های استفاده css) | مرکز طراحی سایت در ارومیهآموزش css و نحوه استفاده کد های css در html ، مواردی همچون انواع روش های استفاده css در html ، کلاس ها ، آیدی ها ، استایل به تگ ها ، آدرس دهی و ...

آموزش css و مواردی که در ابتدا باید بدانید

در این مقاله (“آموزش css”) از طراحان وب ارومیه قصد آموزش css و آموزش و نحوه استفاده کد های css در html را داریم ، مواردی همچون انواع روش های استفاده css در html ، کلاس ها ، آیدی ها ، استایل به تگ ها ، آدرس دهی برای اعمال استایل و کامنت گذاری و … که شامل این مقاله خواهند بود .

css چیست ؟

آموزش css قسمت اول (روش های استفاده css) | مرکز طراحی سایت در ارومیه

مخفف Cascade Style Sheets است و برای ایجاد تغییرات و استایل دهی در کد های html به کار میرود .

به طور مثال فرض کنید یک وب سایت را راه اندازی کرده اید و بعد از مدتی قصد دارید که مثلا فونت سایت را عوض کنید ، در این صورت باید تمام مواردی که مربوط به فونت هستند را به صورت دستی تک تک تغییر دهید.

بیشتر بخوانید »»» تفاوت بین HTML و CSS

استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.

CSS ابزاری است که بوسیله‌ی آن میتوانید صفحات وب خود را زیبا کنید .

شما با استفاده از HTML میتوانید ساختار کلی صفحه وب خود را بسازید و با استفاده از CSS میتوانید ساختار سایت خودتان را زیبا کنید، به آن رنگ اضافه کنید، اندازه‌ی آن‌ها را مشخص کنید، روش نمایش آن‌ها را تنظیم کنید و… .

نحوه استفاده و اعمال کد های css در html

کد ها و استایل های مد نظرمان در css را به سه روش میتوانیم به تگ های html اعمال کنیم که بسته به شرایط یکی را بایستی انتخاب کنید :

  1. inline
  2. Internal
  3. External

حال به توضیح هر یک خواهیم پرداخت و نحوه استفاده :

روش اول

در این روش ما کد های css را به صورت خطی و مستقیما به یک تگ مشخص اعمال میکنیم ، با استفاده از خاصیت style که میتونیم به هر تگ بدیم و داخلش کد های css رو بنویسیم ، به طور مثال :

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="width: 500px;height: 50px;margin: auto;">
		<p style="color: red;text-align: center;">...we can use css in html codes like this...</p>
	</div>
</body>
</html>

در قطعه کد بالا به تگ div طول و عرض دادیم و اینکه به صورت وسط چین باشد ، و به تگ p هم خاصیت رنگ قرمز و اینکه وسط چین باشد را اعمال کردیم.

  • width : برای تعیین طول المان مورد نظر است که میتوانید به صورت درصدی هم بهش مقدار بدید مثلا 50% که در این صورت نصف اندازه مرورگر خواهد .
  • margin : میتوانیم فاصله یک المان را از چهار جهت تعیین کنیم اگر از margin استفاده کنید و مقدار auto برای ان بدهید المان مد نظر از چپ و راست به یک اندازه فاصله خواهد گرفت.

روش دوم

در این روش ما تمام کد های مربوط به css را در تگ head مینویسیم ، و به هر المال که میخواهیم به آن استایل بدهیم یک id یا class در نظر میگیریم ، بعد با ذکر نام id یا کلاسی که برای تگ نوشته ایم استایل های خود را اعمال میکنیم .

خب حالا من یک تکه کد html دارم که میخوام به یکسری از المان (تگ) هاش استایل بدم ، برای هر کدوم که میخوام بهش id میدم :

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="main">
		<div id="top">
			
		</div>
		
		<div id="mid">
			
		</div>

		<div id="bottom">
			
		</div>
	</div>
</body>
</html>

خب برای اینکه بتونیم در css بگیم فلان استایل به فلان id مربوط میشه باید از علامت # در ابتدای نام id که مد نظر داریم استفاده کنیم ، به این صورت :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#main {width: 600px;height: 900px;}
		#top {width: 600px;height: 300px;background-color: red;}
		#mid {width: 600px;height: 300px;background-color: blue;}
		#bottom {width: 600px;height: 300px;background-color: green;}
	</style>
</head>
<body>
	<div id="main">
		<div id="top">
			
		</div>

		<div id="mid">
			
		</div>

		<div id="bottom">
			
		</div>
	</div>
</body>
</html>

خب این هم به این صورت ، یک مورد دیگه هم که مربوط میشه به کلاس دادن :

تفاوتی که میان کلاس و ایدی وجود داره اینه که مثلا من تو سایت قراره بارها و بارها دکمه ی بیشتر بخوانید رو قرار بدم ، حالا به جای اینکه بیام برای هر دکمه آیدی بدم و براش استایل بدم ، یه کلاس تعریف میکنم فقط برای دکمه ها و هرجا دکمه استفاده کردم اون کلاس رو میدم بهش.

نحوه استفاده هم به این صورته که در css به جای # از . استفاده میکنیم و در کد html هم به تگ به جای id مینویسیم Class .

روش سوم

تو این روش هم استایل ها و کد های css در فایل جداگانه ایی نوشته میشن که پسوندش css هست نوشته میشن ، تنها کاری که باید بکنیم اینه که به آدرس فایل css در کد html مورد نظرمون اشاره کنیم ، به این صورت :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div id="main">
		<div id="top"> </div>
	</div>
</body>
</html>

با استفاده از تگ link که در بین تگ head باید نوشته بشه ، و مقدار اول rel که باید روی stylesheet بزارید و مقدار href که به آدرس فایل اشاره داره .

اگه سند css شما کناره html هست (یعنی در یک دایرکتوری قرار دارند) فقط کافی هست اسمش رو بنویسید ، ولی اگه جاش فرق میکنه ریشه شما محلی است که فایل html قرار داره و از اونجا باید ادرس رو بدید مثلا :

<link rel="stylesheet" href="mystyle/urmiasiteStyles/styles.css">

خب دوستان روش هایی که میشد از css در یک سند html استفاده کرد تمام کمال بهتون توضیح دادم ، امیدوارم توضیحات به اندازه کافی شفاف و واضح بوده باشن.

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

 

منبع : طراحان وب ارومیه | urmiasite.com

مشاهده دیگر مقالات مفید سایت مرکز طراحی سایت در ارومیه

نوشتن نظر

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *