طراخی فروشگاه اینترنتی

کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست. حالا چرا آبشاری؟ چون دستورات CSS اعمال شده به هرعنصر، بر فرزندان اون عنصر هم تاثیر دارن. این مسئله رو تو مقاله‌های آینده، بیشتر متوجه می‌شیم!

چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟

می‌شه گفت که تنها پیش‌نیاز برای یادگیری مفاهیم CSS، تسلط مناسبی به HTML هست. مباحث زیر در بدو شروع، مهم‌ترین مباحث مورد نیاز شما برای یادگیری CSS هستن:

تسلط به مبحث فرزند – پدر (parent-child)
تسلط به مفهوم عنصر و صفت (element, attribute)
بنابراین قبل از آموزش CSS شما باید آموزش HTML رو دیده باشین. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می‌تونین به اون مسلط بشین. HTML زبانی هست که تمامی عناصر موجود در صفحات وب مثل جعبه های متن، دکمه ها و غیره توسط اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر صفحه شکل می‌گیره.

یک صفحه وب از اجزای زیر تشکیل شده:

Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.
Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.
Behavior (رفتار) این بخش وب به وسیله  JavaScript ایجاد می‌شه. 

CSS چیست؟

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

برای مثال، اگه یک طوطی رو، به عنوان صفحه وب‌سایت در نظر بگیریم، کدهای HTML و CSS اون به فرم زیر تعریف می‌شن!

یا مثلا به متن ساده زیر توجه کنین:

متن سمت چپ، با کمک کدهای CSS نوشته شده. اما در متن سمت راست، کدهای HTML بدون کد CSS رو مشاهده می‌کنیم.

چرا باید از کدهای CSS استفاده کنیم؟

کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.

خوبه که بدونین گوگل در رتبه بندی وب‌سایت‌ها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.

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

در مقابل در وب‌سایتی که با کدهای CSS پیاده‌سازی بشه، عناصر یکی بعد از دیگری در هنگام بارگزاری بر روی صفحه پدیدار می‌شن و کاربر از لحظه درخواست می‌تونه مشغول مطالعه و مشاهده وب‌سایت تا زمانی که بارگزاری کامل بشه، باشه.

همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.

ساختار نحوی کدهای CSS:

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

Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.

id و Class در CSS:

همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

حالا اگه بخوایم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال بشه باید از id و Class استفاده کنیم.

اعمال دستورات فقط بر روی یک عنصر واحد توسط id
برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

This is a Paragraph.

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1 {
     text-align:center;
     color:red;
}

اعمال دستورات بر روی یک گروه از عناصر توسط Class

برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

This is a Paragraph.

.center {
text-align:center;
}
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

کدهای CSS را کجا بنویسیم؟

این کد ها رو می‌تونیم داخل هر ویرایشگر کدی بنویسیم، که پیشنهاد ما به شما برای شروع، ویرایشگر هایی مثل brackets، sublime text و notepad هستن.

برای نوشتن کدهای CSS و اتصال اون ها به HTML، سه روش وجود داره:

External Style Sheet : اتصال خارجی
Internal Style Sheet : اتصال داخلی
Inline Style : اتصال درون خطی

External style sheet یا اتصال خارجی
استایل های خارجی فایل هایی با فرمت css هستن که بوسیله تگ در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک وب سایت که از صفحات زیادی درست شده هستن.
کد های موجود در اون فایل ها، شکلی شبیه به زیر رو دارن:

hr {
   color: sienna;
}
p {
   margin-left:20px;
}
body {
   background-image:url("images/back40.gif");
}

Internal Style Sheet یا اتصال داخلی

نحوه نوشتن این استایل ها مثل استایل خارجی هست ولی تنها فرق اون اینه که به جای تگ از تگ

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

برای استفاده از این روش باید به عنصر مورد نظر صفت style را افزوده و بعد خاصیت ها و مقدار ها رو به این صفت اضافه کنین. تو مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده می‌کنیم:

اولویت تاثیرگذاری روش های اتصال کد CSS

به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:

استایل های درون خطی
شیوه نامه های داخلی
شیوه نامه های خارجی
پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه، باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.

نکته: چنانچه لینک اتصال یک فایل CSS خارجی بعد از دستورات CSS اتصال داخی در تگ head قرار داده بشن، در نهایت دستورات فایل CSS خارجی اعمال خواهند شد.