آموزش Css جلسه اول

آموزش Css جلسه اول:

سلام خدمت دوستاران وردپرسی و کاربران سایت تمینا.از امروز اموزش css رو شروع کردیم و به امید خدا هر روز یک جلسه آموزش  قرار داده میشه.امیدوارم از این آموزش ها نهایت استفاده رو ببرید.

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

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

 

آموزش Css جلسه اول آموزش css جلسه اول آموزش Css جلسه اول css

 

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

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

مثلا نمونه کد  زیر دقت کنید:

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

 

اضافه کردن CSS به صفحه:

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

مانند مثال زیر

 <p style=”color: red; “>متن با رنگ قرمز </p>

 

نحوه دیگر استفاده از سی‌اس‌اس، استفاده از تگدر صفحه و در بین تگاست. این نوع سی‌اس‌اس را internal یا همان داخلی می‌نامند. در استفاده از این نوع سی‌اس‌اس باید توجه داشته باشید که استایل‌های شما تنها در همان صفحه خوانده می‌شود و نمی‌توانید از آن‌ها در دیگر صفحات استفاده کنید.
بهترین نحوه استفاده از CSS که ما در این دوره آن را آموزش خواهیم داد و به شما هم پیشنهاد می‌کنیم که در پروژه‌هایتان از آن استفاده کنید، استفاده از یک فایل مجزای CSS است. برای ساخت یک فایل CSS، ابتدا در ادیتور کد خود (که در اولین جلسه اچ‌تی‌ام‌ال آن‌ را معرفی کرده‌ایم)، یک فایل جدید ایجاد کرده و آن را با نام دلخواه و با پسوند CSS. ذخیره کنید.

مانند:

 

 

پایان آموزش Css جلسه اول/موفق باشید

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید