جلسه دوم آموزش css
آموزش این جلسه را با کامنت گذاشتن در زبان css آغاز می کنیم. همان طور که در زبان html اشاره می شود گاهی نیاز است شما قسمتی از کد را غیر فعال کنید. یا متنی را بنونیسید که جز دستورات زبان نیست. برای مثال توضیحی برای خود می خواهید بنویسید که بعدا بخوانید در این صورت می توانید از کامنت استفاده کنید. یا قسمتی از دستورات را غیر فعال کنید تا اثر آن را مشاهده کنید اما نمی خواهید این دستورات را کامل پاک کنید . برای این کار از کامنت استفاده می کنید.
کامنت گذاشتن در زبان css به صورت زیر است.

/*
در این جا ما سه نوع کامنت را توضیح دادیم.
کامنت چند خطی . 
کامنت تک خطی. 
و کامنت کردن یک دستور.
*/
P{
Color:red;/* this is a comment /*
}
Input{
/* color:blue;*/
}

در ادامه به مبحث رنگ ها می پردازیم. زبان css همان طور که از ماهیتش پیداست تماما در مورد رنگ ها و اندازه ها و شکل ظاهر است. در نتیجه رنگ در آن بسیار نقش اساسی ایفا می کند و آشنایی با آن بسیار مهم است.
همان طور که در مثال های قبلی دیده شده است. رنگ های معروف را می توانید به صورت نوشتاری اعمال کنید. مانند رنگ سیاه ، سفید، قرمز و سایر رنگ ها . محدوده این رنگ ها بسیار زیاد است اما خوب همه رنگ ها را شامل نمی شود. تعدادی از این رنگ ها را در زیر آورده ایم.
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
...
علاوه بر این لیست شما می توانید کد رنگ مورد نظر خود را نیز به کار ببرید .
در زیر انواع روش های رنگ دهی را خواهیم دید.مانند مثال زیر

p{
color:#234356; /* hex*/
color:rgb(255,255,255); /* rgb*/
color:rgba(43,45,23,0.3); /* rgba*/
}

از متود rgba نیز میتوانید استفاده کنید. در این روش سه عدد اول مانند تابع rgb برای رنگ های قزمر ، سبز و آبی است و مقدار سوم برای میزان شفافیت است. این مقدار بین صفر تا یک است. صفر بی رنگ است و ۱ کاملا پر رنگ است. سایر مقادیر بین صفر و ۲۵۵ است.
اولین دستور css که بار ها از آن استفاده کردیم color است. از این دستور برای تغییر رنگ نوشته استفاده می کنیم.
هر تگی که نوشته داخلش داشته باشد با این دستور رنگ نوشته را می توان عوض کرد.

<p> red color css</p>
<style>
p{
color:red;
}
</style>

دستور بعدی مربوط به سری دستورات background می باشد. اولین عضو این خانواده رنگ است.background-color برای تغییر رنگ پس زمینه استفاده می شود. مانند مثال زیر:

<p> red color css</p>
<style>
p{
background-color:red;
}
</style>

دستور دیگر از این خانواده برای تخصیص عکس به بکگراند استفاده می شود با دستور background-image.
برای ادرس دهی عکس باید از فانکشن url استفاده کنیم و آدرس تصویر را بدهیم. مانند مثال زیر.

<p> red color css</p>
<style>
p{
background-image:url('https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/css_100x69.png');
color:black;
}
</style>

دستور بعدی برای تکرار پذیری عکس های بکگراند است. ممکن است تصویر شما کوچک تر از. اندازه المان شما باشد. حالا می توانید این تصویر را تکرار کنید یا تنها یک بار استفاده کنید. مقادیر قابل قبول شامل . تکرار در دو بعد ، تکرار در افق ، تکرار عمودی و عدم تکرار و … باشد.

<p> red color css</p>
<style>
p{
background-image:url('https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/css_100x69.png');
background-repeat:no-repeat;
}
</style>

نکته مهمی که باید قبل از ادامه آموزش به آن بپردازیم آموزش کار با ابزار است. در هر مرورگری یک سری ابزار برای برنامه نویسان وجود دارد که برنامه نویسی را بسیار راحت تر می کند. چون در زمینه css آموزش می دهیم به ابزار این بخش اشاره می کنیم.
برای اینکه به صورت آنلاین تغییراتی که در css اعمال می کنید را ببینید کافی است روی المان مورد نظر در صفحه مرور گرد راست کلیک کرده و گزینه inspect را انتخاب کنید. پنجره ای به قسمت پایینی مرورگر اضافه می شود که در سمت چپ کد html در سمت راست آن کد های مربوط به css قرار گرفته است. شما میتوانید در سمت چپ المان مورد نظر را انتخاب کنید و در سمت راست کد css را نوشته و نتیجه را مشاهده کنید. یکی از ویزگی های این پنل راهنمایی برای مقادیر ممکن و دستورات موجود است . برای مثال اگر بخواهید از دستور color استفاده کنید. مقادیر ممکن را برایتان لیست می کند. و یا اگر بخواهید بک گراند تگ را عوض کنید مقادیر ممکن را به شما نشان می دهد. در نتیجه نیاز به حفظ کردن مفاهیم نیست. تنها کلیات را یا بگیرید و مابقی را با ابزار موجود پیاده سازی کنید.
در ادامه دستورات مربوط به بکگراند شما می توانید محل این عکس را نیز در تگ مورد نظر مشخص کنید. به این صورت که اگر عکس کوچک تر یا بزرگتر از تگ شما باشد و شما گزینه تکرار را غیر فعال کرده باشد . می توانید مشخص کنید تصویر در کجای تگ قرار بگیرد. یا اگر تصویر بزرگتر از تگ بود کدام قسمت از تصویر نمایش داده شود.
برای این کار از دستور  background-position استفاده می کنیم و می توان با مشخص کردن مقادیر از قبیل top , bottom , left , right یا ترکیبی از آن ها مشخص کنیم که تصویر چگونه نمایش داده شود.
مهم ترین استفاده از این دستور برای بکگراند کل صفحه می باشد.

<p> red color css</p>
<style>
p{
background-image:url('https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/css_100x69.png');
background-repeat:no-repeat;
background-position:bottom left;
color:black;
}
</style>