آموزش جامع CSS به زبان ساده مقدمه صفحه ای که هم اکنون در آن حضور دارید، همانند جاده ای است که رسیدن به انتهای آن، به معنی یادگیری CSS است. کافیست در کنار دیگر همراهان همیشگی وب سایت ها دات کام در این مسیر قدم بگذارید و با گذراندن یک دوره آموزش رایگان، این زبان طراحی لذت بخش را یکبار برای همیشه به ساده ترین شکل ممکن بیاموزید. در طول آموزش همواره تلاش شده مطالب به زبان ساده و مفید بیان شود. بنابراین در آموزش ها از مثال های آموزشی کاربردی به همراه فایل های کمک آموزشی قابل دانلود استفاده شده است. برنامه آموزش در این دوره آموزشی آنلاین و رایگان، کلیه مطالب آموزشی CSS طبق سرفصل های سازمان جهانی w3s به صورت گام به گام ارائه خواهد شد. روند مطالب آموزش طبق فهرستی که ارائه شده است خواهد بود و در هر جلسه آموزشی، یک بخش از فهرست در این صفحه درج خواهد شد. بدیهی است بخش هایی که هم اکنون مشاهده میکنید، سرفصل هایی است که تا این لحظه تقدیم شرکت کنندگان در این دوره آموزشی شده است. دریافت رایگان فایل pdf آموزش CSS وفایل های کمکی آموزش در هر مرحله بلافاصله پس از درج بخش جدید، اعضای خبرنامه از طریق ایمیل مطلع و به این صفحه دعوت خواهند شد. از آنجا که اعضای خبرنامه مخاطبان رسمی این دوره آموزشی محسوب میشوند، فایل pdf و فایل های کمک آموزشی مربوط به هر بخش از آموزش بعد از درج در سایت، برای اعضای خبرنامه توسط ایمیل ارسال خواهد شد. چنانچه از اواسط آموزش با این دوره آشنا شده اید و اکنون قصد دنبال کردن آن را دارید، پس از عضویت در خبرنامه، از طریق بخش تماس با من، درخواست خود را ارسال نمایید تا کلیه فایل های pdf و تمرینی بخش های گذشته، برای شما ارسال شوند. همچنین در پایان دوره، کتاب آموزشی کامل به همراه فایل های آموزشی تمامی بخش ها بصورت رایگان تقدیم علاقمندان خواهد شد. لازم به ذکر است عضویت در خبرنامه صرفا برای اطلاع رسانی و دریافت فصول بعدی آموزش می باشد و هر زمان که مایل باشید، میتوانید عضویت خود را لغو نمائید. فهرست عناوین آموزشی CSS ♦ CSS پایه • پیش نیازهای یادگیری CSS • CSS چیست؟ • چرا باید از CSS استفاده کنیم؟ • ساختار نحوی کدهای CSS • id و Class در CSS • دستورات CSS را کجا بنویسیم؟ ♦ استایل عناصر • استایل پس زمینه ها • استایل متن ها • استایل فونت ها • استایل لینک ها • استایل لیست ها • استایل جداول ♦ ساختار و لایه بندی باکس ها • ساختار لایه ها و باکس ها • حاشیه (Border) • خطوط بیرونی (Outline) • فاصله از لبه بیرونی باکس (Margin) • فاصله از لبه داخلی باکس (Padding) ♦ CSS پیشرفته • گروهبندی و عناصر تودرتو (Grouping/Nesting) • ابعاد عناصر (Dimension) • نحوه نمایش عناصر (Display) • موقعیت دهی به عناصر (Positioning) • چیدمان عناصر شناور (Floating) • چپ چین، راست چین و وسط چینی عناصر (Align) • شبه کلاس ها (Pseudo-class) • شبه عناصر (Pseudo-element) • نوار منو افقی (Navigation Bar) • گالری تصاویر (Image Gallery) • شفافیت تصاویر (Image Opacity) • تکنیک نمایش تصاویر همجوار (Image Sprites) • انواع رسانه ها (Media Types) • انتخاب عناصر توسط صفت (Attribute Selectors) فصل اول: CSS پایه چه چیزهایی باید در حال حاضر بدانید؟ پیش از شروع یادگیری CSS شما باید یک دانش پایه از HTML داشته باشید. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می توانید به آن مسلط شوید. HTML زبانی است که تمامی عناصر موجود در صفحات وب مانند جعبه های متن، دکمه ها و غیره توسط آن ساخته می شود و با ترکیب آن با کدهای CSS ظاهر صفحه شکل می گیرد. CSS چیست؟ CSS دستوراتی است که توسط آنها میتوان تمامی خصوصیات ظاهری صفحه وب سایت را تعیین کرد. بنابراین شما توسط کدهای HTML صفحه وب سایت خود را پیاده سازی میکنید و با دستورات CSS مشخص میکنید هر عنصر چه خصوصیات ظاهری داشته باشد. خصوصیاتی مانند رنگ عنصر، اندازه هر عنصر، رنگ و اندازه فونت های مورد استفاده، فاصله عنصرها از یکدیگر، حاشیه و غیره . CSS مخفف کلمه Cascading Style Sheets و به معنی شیوه نامه آبشاری است. علت این نامگذاری نحوه اعمال دستورات به عناصر موجود در صفحه است. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که بعد از استفاده از دستورات متوجه این موضوع خواهید شد. چرا باید از CSS استفاده کنیم؟ CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد. نکته: در گذشته طراحی و چیدمان عناصر صفحات وب، از طریق جدول انجام می گرفت. در آن روزها جدول مطمئن ترین عنصر برای چیدن عناصر به نحوی که در تمامی مرورگرها ظاهر سایت یکسان باشد و بهم ریختگی نداشته باشیم، محسوب میشد. جداول مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جدداول میتوان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. حتما تاکنون وب سایت هایی را مشاهده کرده اید که در هنگام باز شدن، مدت زیادی هیچ عنصری در صفحه نشان داده نمیشود و پس از چندین ثانیه و یا حتی دقیقه که در حالت انتظار و سردرگمی یک صفحه سفید را مشاهده میکنید، اگر انسان صبوری باشید به یکباره تمامی عناصر بر روی صفحه ظاهر میشود. این ویژگی منفی وب سایت هایی است که با جدول پیاده سازی می شدند. در مقابل در وب سایتی که با CSS پیاده سازی شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت تا زمانی که بارگزاری کامل شود، باشد. ساختار نحوی دستورات CSS در این بخش ساختار دستورات CSS را یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چراکه در بخش های بعدی بطور مفصل انواع استایل های عناصر را آموزش خواهم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت نمایید. Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم. کد: p {color:red;text-align:center;} Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است. مثال : در دستور زیر، مشاهده میکنید که مقدار هر خاصیت، بعد از علامت دو نقطه ":" در جلوی آن نوشته می شود. همچنین در پایان هر جفت خاصیت و مقدار علامت ";" گذاشته می شود. کل خاصیت ها و مقدارها در علامت براکت نوشته میشود: کد: p {color:red;text-align:center;} برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید: کد: { color:red; text-align:center; } CSS Comment در تمامی زبان های برنامه نویسی امکانی وجود دارد که در کنار کدهای اصلی خود، توضیحاتی بنویسید که کدهای آن قسمت را شرح میدهند و هنگامی که مدت ها بعد شما و یا شخص دیگری به آنها مراجعه میکند، این توضیحات اضافه کمک بسیاری برای تغییرخواهند کرد. این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را که می خواهید با هر زبانی درج کنید. شرط اینکار اینست که توضیحات خود را با علامت "/*" شروع کنید و با علامت "*/" به پایان برسانید. کد: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } id و Class در CSS همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می خواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم. اعمال دستورات فقط بر روی یک عنصر واحد توسط id برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد "#" قبل از آن اضافه کنید مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم : کد: <p id="para1">This is a Paragraph.<p> سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت "#" می نویسیم: کد: #para1 { text-align:center; color:red; } بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند. نکته: هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد. اعمال دستورات بر روی یک گروه از عناصر توسط Class برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد "." قبل از آن اضافه کنید مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم : کد: <p class="cneter">This is a Paragraph.</p> سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت "." می نویسیم: کد: .cneter { text-align:center; } بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند. نکته: هرگز صفت Class را با عدد شروع نکنید چراکه فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد. دستورات CSS را کجا بنویسیم؟ برای نوشتن دستورات CSS در یک وب سایت سه روش وجود دارد: External Style Sheet : شیوه نامه خارجی Internal Style Sheet : شیوه نامه داخلی Inline Style : شیوه درون خطی External Style Sheet در این روش تمامی دستورات CSS در یک فایل مجزا از دیگر فایل ها و صفحات وب سایت نوشته میشود و با فرمت .css در کنار دیگر فایل های وب سایت در فولدر پروژه ذخیره میشود. سپس در هر صفحه ای که می خواهیم این دستورات بر عناصر آن اعمال شوند، به بخش <head> رفته و توسط تگ <link> فایل css خود را به صفحه متصل میکنیم: این روش بهترین روش برای وب سایت های چند صفحه ای و بزرگ امروزی است چراکه می توان یکبار نوشت و به هر تعداد صفحه که نیاز است اعمال کرد. همچنین در صورت نیاز به تغییر در ظاهر سایت کافیست به یک فایل مراجعه کرده و تغییرات را به کل سایت اعمال کرد. این فایل های CSS را می توان توسط هر برنامه ویرایش متنی نوشت و در پایان آن را با فرمت .css ذخیره کرد. برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای این منظور قابل استفاده هستند. فراموش نکنید فایل های CSS فقط حاوی دستورات CSS هتند و هیچ کد و تگی از HTML در آنها نباید نوشته شود. در زیر یک نمونه از فایل CSS را مشاهده میکنید که کافیست ان را در یک فایل notepad نوشته و با فرمت .css ذخیره کنید: کد: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} Internal Style Sheet این روش نوشتن دستورات باید زمانی استفاده شود که قصد دارید یک سری استایل ها را فقط بر روی یک صفحه خاص اعمال کنید و عناصر صفحه مورد نظر با عناصر سایر صفحات وب سایت ظاهر متفاوتی دارد. برای استفاده از این روش به صفحه مورد نظر رفته و دستورات مورد نظر را در بین تگ <style> می نویسیم: کد: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Inline Style با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که CSS بخاطر آنها به وجود آمد را از دست میدهید. چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود. همچنین باعث افزایش حجم صفحات و در نتیجه کاهش سرعت بارگزاری خواهد شد. در ضمن کدها پیچیده، شلوغ و ناخوانا خواهد شد. پس باید در استفاده از آنها صرفه جویی کنید! برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید. در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم: کد: <p style="color:yellow;">This is a paragraph.</p> شیوه نامه های چندگانه گفتیم که به سه طریق می توان استایلی را بر روی عناصر موجود در صفحه وب اعمال کرد. حال تصویر کنید که استایلی برای یک عنصر با هر سه روش ذکر شده نوشته شود. چه اتفاقی خواهد افتاد؟ در این حالت استایلی که به صورت خاص و محدودتر نوشته شده است جایگذین استایلی می شود که همگانی نوشته شده است برای مثال فرض کنید یک شیوه نامه خارجی حاوی دستورات زیر برای تغییر ظاهر تگ های h3 است: کد: h3 { color:red; text-align:left; font-size:8pt; } سپس دستورات زیر را به صورت شیوه نامه داخلی به یک صفحه وب اضافه میکنیم: کد: h3 { text-align:right; font-size:20pt; } حال اگر شیوه نامه خارجی را توسط تگ link به صفحه حاوی شیوه نامه داخلی متصل کنیم، مجموع دستورا تی که بر روی تگ های h3 اعمال میشوند، به صورت زیر خواهد بود: کد: color:red; text-align:right; font-size:20pt; همانطور که مشاهده میکنید، دستورات مشترک در دو شیوه نامه، از شیوه نامه داخلی که به صورت خاص برای یک صفحه نوشته شده است مورد استفاده قرار گرفته است و نه از شیوه نامه خارجی که به صورت همگانی برای سایر صفحان نیز استفاده می شود. دستورات غیر مشترک نیز همگی اعماب می شوند. در این دستورات، دستور تغییر رنگ از شیوه نامه خارجی و دو دستور دیگر که در هر دو شیوه نامه مشترک هستند از شیوه نامه داخلی خوانده شده است. به طور کلی هنگامی یک دستور به هر سه روش برای یک عنصر HTML نوشته میشود، اولویت اجرای آنها به صورت زیر است: استایل های درون خطی شیوه نامه های داخلی شیوه نامه های خارجی پس استایل هایی که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می شود، باعث می شود دستورات مربوط به آن عنصر در شیوه نامه داخلی که در تگ نوشته شده و همچنین دستورات مربوطه در شیوه نامه خارجی که با تگ به صفحه فعلی متصل شده نادیده گرفته شوند. نکته: چنانچه لینک یک شیوه نامه خارجی بعد از دستورات شیوه نامه داخلی در تگ قرار داده شود، در نهایت دستورات شیوه نامه خارجی اعمال خواهند شد.
فصل دوم: استایل عناصر مقدمه در فصل اول با مفهوم CSS ، روش ها و نحوه بکارگیری دستورات و همچنین مزایا و معایب هر روش آشنا شدید. در این فصل با دستورات مربوط به استایل دهی عناصر آشنا خواهید شد. توسط دستورات استایل دهی می توانید ظاهر کلیه عناصری را که در صفحه HTML مورد استفاده قرار داده اید، تغییر دهید. شما می توانید رنگ، نوع و سایز فونت، رنگ یا تصویر پس زمینه و هر آنچه را که مایلید ظاهری مطابق خواسته شما داشته باشد، توسط این دستورات تغییر دهید. استایل پس زمینه ها توسط CSS می توانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. دستوراتی که در CSS برای کار با پس زمینه ها وجود دارد عبارتند از: background-color background-image background-repeat background-attachment background-position استفاده از رنگ برای پس زمینه ( background-color) توسط این دستور میتوانید رنگ پس زمینه عنصر مورد نظر خود را تغییر دهید. مثلا پس زمینه یک پاراگراف، جعبه متن، div و یا هر عنصر دیگری را با رنگ دلخواه پر کنی. به عنوان نمونه دستور زیر رنگ پس زمینه کل صفحه را قرمز می کند: کد: body {background-color:red;} شما به سه روش می توانید رنگ مورد نظر خود را در دستور فوق بنویسید: از طریق کد هگزای رنگ- مانند #b0c4de"" از طریق کد rgb رنگ - مانند "rgb(255,0,135)" از طریق نام رنگ - مانند "blue" در مثال زیر عناصر h1، p و div دارای پس زمینه هایی با رنگ های متفاوت خواهند بود: کد: h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} استفاده از تصویر برای پس زمینه ( background-image ) توسط این دستور می توانید یک عکس دلخواه را به عنوان پس زمینه عنصر مورد نظر خود در صفحه وب قرار دهید. نحوه استفاده از این دستور به شکل زیر است کد: body {background-image:url('paper.gif');} در دستور فوق 'paper.gif' نام تصویر مورد نظر است. همیشه در پس زمینه متن ها از تصاویری استفاده کنید که از خوانایی متن کاسته نشود. به یاد داشته باشید، اگر عکس مورد نظر شما داخل یک فولدر قرار دارد، باید نام فولدر نیز در پارامتر url ذکر شود. به عنوان مثال اگر تصاویر مورد استفاده در وب سایت شما، در فولدری به نام images قرار دارد، دستور فوق به شکل زیر باید نوشته شود کد: body {background-image:url('images/paper.gif');} تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat ) برای داشتن صفحه ای با سرعت بارگزاری بالا، همواره باید حجم صفحه را پائین نگه دارید. افزودن پس زمینه هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری خواهد شد. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده میکنند. تصویری که هر تعداد از آن را در کنار یکدیگر قرار دهیم، باعث بوجود آمدن تصویری واحد و یکپارچه خواهد شد. به عنوان مثال توسط تصویر زیر میتوان یک پس زمینه برای کل صفحه وب ایجاد کرد: توجه داشته باشید که بطور پیش فرض، با نوشتن دستور پس زمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار میشود: کد: body {background-image:url('paper.gif');} اگر بخواهیم تصویر فقط در محور افقی تکرار شود، باید از دستور زیر استفاده کنیم: کد: background-repeat:repeat-x; اگر بخواهیم تصویر فقط در محور عمودی تکرار شود، باید از دستور زیر استفاده کنیم: کد: background-repeat:repeat-y; اگر بخواهیم تصویر فقط یکبار نشان داده شود و تکرار نشود، باید از دستور زیر استفاده کنیم: کد: background-repeat:no-repeat; تعیین موقعیت مکانی تصویر در پس زمینه ( background-position ) هنگامی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. برای این منظور توسط دستور زیر موقعیت تصویر در پس زمینه را تعیین میکنیم: کد: background-position:right top; به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشان داده می شود: ثابت و یا قابل اسکرول بودن تصویر پس زمینه ( background-attachment ) شاید وبسایتهایی را دیده باشید که هنگامی که صفحه را برای مطلعه اسکرول میکنیم، پس زمینه آنها در جای خود ثابت مانده و محتوای آن صفحه حرکت میکند. این کار توسط دستور background-attachment انجام می شود برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت باقی بماند، از دستور زیر استفاده میکنیم: کد: Background-attachment:fixed; برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کند، از دستور زیر استفاده میکنیم: کد: Background-attachment:scroll;
