• به وب استیودنت خوش آمدیدد
  • آموزش های ما را از وب سایت به نشانی www.WebStudent.ir پیگیری کنید
  • لطفا قوانین را مطالعه فرمایید
  • آموزش های گام به گام و تصویری
  • لطفا قوانین را مطالعه فرمایید
درود مهمان گرامی! ورود ثبت نام

آخرین اخبار انجمن وب استیودنت

آموزش سی اس اس (CSS) مقدماتی به زبان ساده

آموزش سی اس اس (CSS) مقدماتی به زبان ساده

این صفحه را به اشتراک بگذارید:



آموزش سی اس اس (CSS) مقدماتی به زبان ساده
زمان کنونی: 1397-8-24، 05:52:50
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: Bahrami
آخرین ارسال: Bahrami
پاسخ 1
بازدید 2986



امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش سی اس اس (CSS) مقدماتی به زبان ساده
#1
با درود به دوستان، هموندان، کاربران و بازدیدکنندگان تالار گفتگوی وب استیودنت.
در این نوشته می خواهیم به آموزش سی اس اس (CSS) به زبان ساده بپردازیم و امیدوارم که بتوانیم این آموزش را به فرجام برسانیم با این آرزو که برای همه فرزندان این آب و خاک سودمند باشد.

برای شروع یادگیری سی اس اس (CSS) بایستی با (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) آشنایی داشته باشید. برای اطلاعات بیشتر در رابطه با (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)می توانید به (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) و یا (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) نوشته جناب آقای (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) در انجمن وب استیودنت مراجعه فرمایید.

سی اس اس (CSS) چیست؟
  • سی اس اس (CSS) در واقع سرنام Cascading Style Sheets که معنای آن را می توان "برگه های سبک آبشاری" دانست!
  • سی اس اس (CSS) تعیین می کند که چلونه صفحات (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)نمایش داده شوند.
  • سی اس اس (CSS) باعث می شود که در بسیاری از کارها (کدها) صرفه جویی شود.
  • عبارات سی اس اس (CSS) خارجی در فایل هایی با پسوند (.css) ذخیره می شوند.

در کل CSS زبانی برای شکل دادن و تنظیم نحوه ی آرایش عناصر مختلف صفحات وب است. یعنی اینکه در ابتدا با استفاده از زبان HTML محتوای صفحات وب پیکربندی شده و سپس با استفاده از CSS، به عناصر مختلف سبک دهی می شود. در نتیجه این کاملا اشتباه است اگر بگوییم که با اچ تی ام ال صفحات وب طراحی می شوند، چرا که HTML و CSS هر دو مکمل یکدیگر بوده و به کمک یکدیگر می توانند صفحات وب را نمایش بدهند.

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

[تصویر:  google_1.png]

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

[تصویر:  google_2.png]

در رابطه با اینکه سی اس اس (CSS) چگونه می تواند باعث کاهش بسیاری از کارها (کدها) شود، اجازه دهید یک مثال را بیان کنم:
فرض کنید که شما یک وب سایت با ۵۰ صفحه را راه اندازی کرده اید و در این وب سایت شما تیترها را با رنگ زرد نشان داده اید. حال بعد از مدتی رئیس شما از شما می خواهد که رنگ تیترها را از زرد به قرمز تغییر دهید!!! حال باید شما در تمامی ۵۰ صفحه رنگ زرد را به قرمز تبدیل کنید (مثلا عبارت yellow را به red تغییر دهید) که واضح است چقدر سخت، کسل کننده و پر اشتباه خواهد بود!
اما اگر در سایت یاد شده از سی اس اس (CSS) استفاده کرده بودید، کافی بود تنها یک بار در فایل CSS رنگ را از yellow (زرد) به red (قرمز) تغییر می دادید و در همه جای سایت شما این تغییر اعمال می شد. (فرض کنید که اگر بخواهیم بدون CSS رنگ و ظاهر (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) را تغییر دهیم، چقدر طول می کشد؟ Huh Wink)

بنابراین اچ تی ام ال (HTML) شامل تگ هایی است که فقط محتوا را تعریف می کند و فاقد تگ هایی برای تعیین قالب بندی (فرمت دهی یا Formatting) محتوا است.

امروزه تمامی مرورگرها (Browser) از سی اس اس (CSS) پشتیبانی می کنند.

به نظرم نوشته بالا برای بخش اول (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)کافی است.
در ادامه ی این آموزش در وب استیودنت، روش نگارش (Syntax) دستورات در سی اس اس (CSS) آموزش داده خواهد شد.

نیک فرجامی برای شما آرزومندم.
شاد زی و تندرست.
بهرامی
اینک سخن می دارم،
برای شما ای خواستاران، و برای شما ای دانایان ، از دو نهاده ی بزرگ.
و می ستایم،
اهورا و اندیشه ی نیک را، و دانش نیک و آیین راستی را،
تا فروغ و روشنایی را دریابید،
و به رسایی و شادمانی برسید.
گاثا 3 - یسنا 30
[تصویر:  farvahar.png]
 
پاسخ
[-] 3 کاربر زیر از Bahrami به مایه این نوشته سپاسگزاری کرده اند:
gatsby (1392-10-29 04:53), m00e00h00d00i (1392-10-13 23:45), Odin (1392-4-13 23:47)
  



پرش به انجمن:


کاربران در حال بازدید: 1 مهمان



:fixed;left : 2px;top :130px;float : left;width : 35px;height:320px;text-align:left;padding:0px;;border:0px #fff solid; background: #005ea7; background: -moz-linear-gradient(top, #005ea7 0%, #003965 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005ea7), color-stop(100%,#003965)); background: -webkit-linear-gradient(top, #005ea7 0%,#003965 100%); background: -o-linear-gradient(top, #005ea7 0%,#003965 100%); background: -ms-linear-gradient(top, #005ea7 0%,#003965 100%); background: linear-gradient(to bottom, #005ea7 0%,#003965 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ea7', endColorstr='#003965',GradientType=0 ); } .tdicons a{-webkit-transition : all 0.5s ease-in-out;-moz-transition : all 0.5s ease-in-out;-o-transition : all 0.5s ease-in-out;display : block;float : left;margin : 8px;padding : 5px;font-weight : bold;color : #fff;border-radius : 8px 0 8px 0;} .tdicons img{-webkit-transition : all 0.2s ease-in-out;-moz-transition : all 0.2s ease-in-out;-o-transition : all 0.2s ease-in-out;padding:0px;} .tdicons img:hover{padding : 0px 0px 0px 8px;}