بعد از HTML وارد قسمت هیجانی و بسیار کاربردی تر دنیای وب می شیم ، یعنی آموزش CSS ، پس با ما باشید. با CSS شما می تونید بسیاری از کارهاتون را ذخیره کنید و خیلی اصولی تر صفحات وبتون را طراحی کنید. در این آموزش تو یاد می گیری که چگونه با CSS میتونی style ها و لایه های مختلف یک صفحه وب چند گانه را همگی با هم تحت کنترل خود قرار دهی.
برای شروع چه چیزهایی را باید بدونم ؟
لازمه قبل از شروع CSS ، آموزش HTML را که قبلا در سایت ارائه داده بودیم را مطالعه کنید. اگر می خواهی به آموزش HTML بری ، کلیک کن .
CSS چیست ؟
CSS stands for Cascading Style Sheets Style به شما میگه که چگونه عناصر HTML را نمایش دهید ، که در آموزش HTML مفصل به style ها پرداختیم. Styleها معمولا در Style Sheets ها ذخیره می شوند. اگر یادتون باشه گفتیم که به 3 طریق می تونیم style ها را تعریف کنیم . خوبه یک یادآوری هم درباره Style ها بکنیم . با یک مثال : در این مثال ما یک پاراگراف با استفاده از تگ <p> تعریف می کنیم . کد زیر را من در notepad نوشتم شما می تونید در هر ویرایشگر متن کدهای HTML تون را بنویسید. <html> <body> <p>AntiCom...The Best Way to Learn</p> </body> <head/> </html> ساختار کدهای HTML همیشه به همین صورت هست ، یعنی با تگ <html> شروع میشه ، و دارای دو قسمت header و body می باشد. ما پاراگرافمون را در قسمت بدنه با استفاده از تگ <p> کردیم . حالا می خوایم ببینیم این پاراگراف ما در یک مرورگر اینترنت چگونه به نمایش در می آید ، برای این کار فایل بالا را با پسوند .html ذخیره می کنیم. و اما Style ..... حالا می خوایم برای این پاراگراف یک سری خصوصیات بذاریم ، که همه این ها با Style ممکن میشه. خصوصیت اول : برای پارگرافمون یک فونت تعریف کنیم : <html> <body> <p style="font: Tahoma">AntiCom...The Best Way to Learn</p> </body> </html> اگر به قسمت قرمز رنگ توجه کنید ، ما به کمک Inline Styles برای تگ پاراگرافمون ، نوع فونتش را مشخص کردیم . و : <html> <body> <p style="font: Tahoma; text-align: center">AntiCom...The Best Way to Learn</p> </body> </html> یک ویژگی دیگر هم به پاراگرافمون اضافه کردیم ، با این ویژگی پاراگراف ما وسط چین می شود . به مثال های بالا توجه کردید در این نوع روش تعریف ، یعنی روش Inline Style ما باید هر ویژگی ای که نیاز داریم را به طور جدا جدا برای هر قسمت تعریف کنیم که این بسیار وقت گیر است و کدنویسی ما حالتی مبتدی به خود می گیرد . دو روش دیگر برای تعریف Style ها ، روش External Style Sheets , Internal Style Sheets است . پای CSS از این جا به بعد وارد ماجرا می شود . External Style Sheets , Internal Style Sheets در فایل های CSS نگه داری می شوند این دو روش فرق زیادی با هم ندارند ، فقط در روش External محتویات فایل CSS در کدHTML شما وجود ندارد ، یعنی کدهای فایل CSSقبلا جدا نوشته شده و ما برای استفاده از آن فقط آدرس آن را در وب به کد HTML خودمون اضافه می کنیم. ولی در روش Internal کدها داخل فایل CSS ، و فابل CSS به کدهای HTML پیوست می شود. این قسمت یک توضیح کلی بود درباره CSS در قسمت های بعد با نحوه نوشتن کدهای CSS آشنا می شوید .