آموزش css صفر تا صد

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

Css چیست؟

CSS مخفف عبارت Cascading Style Sheets می باشد و در فارسی اصطلاحاً شیوه نامه خوانده میشود. CSS تعیین می کنه که عناصر HTML به چه صورتی در صفحه نمایش، کاغذ و یا رسانه های دیگر نمایش داده شود CSS میتونه برای صفحات مختلف یک سایت بکار گرفته بشه و نیاز نیست برای هر صفحه یک استایل جدا بنویسید همچنین میشه تو یک صفحه از چندین CSS مختلف استفاده کرد که هر کدوم شکل و چیدمان خاص خودش رو داره

چرا از CSS استفاده می کنیم؟

از شیوه نامه ها برای استایل دهی به صفحات وب، طرح صفحه و نحوه نمایش صفحات در ابزارهای مختلف (موبایل، تبلت، کامیوتر و پرینتر) استفاده میشه. کد های CSS رو میشه در یک فایل با پسوند .CSS ذخیره کرد و در این صورت میشه استایل همه صفحات سایت رو با تغییر یک فایل انجام داد یعنی برای تغییر یک قسمت از طرح سایت نیاز نیست همه صفحات رو تغییر بدیم و فقط فایل شیوه نامه رو تغییر میدیم.

ساختار دستورات CSS :

دستورات CSS از دو قسمت تشکیل میشن: قسمت اول Selector و قسمت دوم Declaration Selector به عنصر html که قصد استایل دادن به آن را داریم اشاره می کند مثلا یه انتخابگر می تونه یه فرم ورود (input) و یا یه دکمه (button) یا تگ های h1 تا h6 یا تگ p ویا هر عنصر دیگه ای باشن تو قسمت Declaration میتونین استایل مورد نظرتون رو به عنصر دلخواه اختصاص بدین که خودش از دو قسمت تشکیل شده، بخش اول Property و بخش دوم Value نامیده میشه. میشه چندین خصوصیت مختلف را در یک مرحله به یک عنصر نسبت داد. برای جدا کردن دستورات باید از سمی کالن ( ; ) استفاده کنین. مثال:

p {
 color: red;
 text-align: center;
}

در مثال فوق متن همه تگ های p قرمز رنگ و وسط چین خواهد شد

انتخابگرها در CSS:

انتخابگرهای css برای یافتن و یا انتخاب کردن عناصر html بر اساس نام عنصر، خاصیت ID، class، attribute هر عنصر مورد استفاده قرار می گیرن

انتخاب بر اساس نام عنصر (element name)

در این حالت انتخابگر عنصر مورد نظر را بر اساس نام آن عنصر در html شناسایی می کند در مثال زیر یک نمونه ازاین نوع انتخاب را می بینید

P { 
 color: blue;
 text-direction: rtl;
}

شما می تونید همه پاراگراف های (<p></p>) موجود در صفحه رو با استفاده از دستور فوق بصورت راست چین و به رنگ آبی در بیارین

انتخاب بر اساس id عنصر

هنگام تعریف هر عنصر در html میشه یه مقدار id براش در نظر بگیرین فقط باید دقت کنین که نباید دو id هم نام در صفحه داشته باشین در واقع id ها مقادیر منحصر به فرد هستند توجه کنین نام id نمی تواند با عدد شروع شود

<p id="para"></p>

در مثال فوق id با مقدار para به تگ p نسبت دادیم. برای انتخاب عنصر در css بر اساس id آن عنصر، از # به همراه id استفاده می کنیم برای مثال بالا در css از

#para {
 color: green;
 font-weight: bold;
}

استفاده می کنیم. این دستور تگ p با id=para رو انتخاب میکنه

انتخاب بر اساس نام کلاس (class)

در html برای هر عنصر علاوه بر یک id می توان یک class نیز تعریف نمود کلاس ها این قابلیت را دارند که برای چندین عنصر در یک صفحه مورد استفاده قرار گیرند یعنی نیاز نیست نام کلاس در یک صفحه منحصر به فرد باشد (برخلاف id) می شه چند عنصر با کلاس هم نام داشت. برای انتخاب عنصر بر اساس کلاس کافیست قبل از نام کلاس از یک نقطه (.) استفاده کنیم فرض کنید صفحه html دارای دو تگ p باشد.

<p id="para">red text</p>
<p class="para1">green text</p>

برای استایل دهی به تگ p با کلاس para1 از دستور زیر استفاده می کنیم:

.para1 { 
  color: green;
  text-align: center;
}

و در آخر انتخابگرهای گروهی (grouping selector)

اگه مثل شکل زیر چند عنصر با استایل یکسان داشته باشیم

h1 { 
	color: red; 
	text-align: center;
}
h2 {
	color: red;
	text-align: center;
}
p {
	color: red;
	text-align: center;
}

میشه بجای اینکه دستورات و استایل رو جداگانه به هر عنصر نسبت بدیم همه عناصر رو در قالب یک گروه انتخاب کرد:

h1, h2, p {
  color: red;
  text-align: center;
}

توضیحات در css

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

p{
	color: red;
	/* this is a single line comment */
	text-align: center;
/*this is
a multi-line
comment*/
}

نحوه اتصال شیوه نامه به صفحه

زمانی که یک صفحه وب در مرورگر اجرا میشه مرورگر بر اساس فایل استایل که به صفحه نسبت داده شده موقعیت عناصر رو تعیین میکنه و به صفحه استایل میده برای اتصال یک استایل به صفحه html سه روش وجود داره

1- Inline Style

2- Internal Style

3- External Style

شیوه نامه خارجی:

با استفاده از external stylesheet می تونین همه صفحات رو با تغییر یک فایل استایل دهی کنید. دقت کنین در این روش ادرس فایل استایل باید در تمامی صفحات سایت اضافه شود. برای این منظور در قسمت head صفحه با استفاده از عنصر لینک میتونید ادرس فایل استایل رو به صفحه معرفی کنین

<head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

دقت کنین که شیوه نامه ها رو میشه در هر ویرایشگر متنی (notepad++, notepad, sublime, dreamweaver,…) نوشت. شیوه نامه ها نیازی به تگ های html ندارن و حتما باید با پسوند CSS ذخیره بشن

شیوه نامه داخلی:

زمانی که یک صفحه وب نیاز به استایل خاصی داشته باشد می توان از internal stylesheet استفاده کرد. این نوع شیوه نامه توسط عنصر <style> داخل بخش head صفحات html تعریف میشوند

<head>
<title></title>
<style type="text/css">
    body {
        background: red;
         }
    h1 {
        color: white;
       }
</style>
</head>

و در آخر شیوه نامه های خطی:

ممکنه بخواهیم برای یک عنصر خاص استایل متفاوتی اختصاص بدیم در این صورت میشه برای اون عنصر خاص از روش استایل دهی inline style استفاده کرد برای این منظور از صفت style در جلوی عنصر مورد نظر در تگHTML استفاده می کنیم به مثال زیر توجه کنین

<h1 style="color: blue; margin: 15px;"> this is a heading.</h1>

استفاده از این روش خیلی توصیه نمیشه چرا که خیلی از مزایای دو روش قبلی را ندارد. نکته قابل توجه اینه که میشه از هر سه روش در یک سایت به طور همزمان استفاده کنید مثل:

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    <style type="text/css">
        body {
            background: red;
        }
        
        h1 {
            color: white;
        }
    </style>
</head>

<body>
    <h1>this is a heading text.</h1>
    <h1 style="color:red; margin:15px">this is a heading text.</h1> 
</body>

</html>

دقت کنین که اولویت اجرای استایل خطی (inline style) از سایر روش ها بیشتره یعنی اگه عنصر خاصی رو در روش خارجی و یا داخلی به رنگ خاصی در بیارین و به همون عنصر به روش خطی رنگ متفاوتی اختصاص بدین خصوصیت روش خطی به روی عنصر اعمال میشه. این آموزش ادامه دارد. تا کامل شدن آموزش با ما همراه باشید. برای مطالعه بیشتر میتونید از سایت w3school استفاده کنید.   مشاهده قسمت بعدی آموزش CSS صفر تا صد