CSS (Cascading Style Sheets) به شما اجازه می دهد تا صفحات وب با ظاهری عالی ایجاد کنید، اما چگونه کار می کند؟ این مقاله با یک مثال نحوی ساده توضیح می‌دهد که CSS چیست و همچنین برخی از اصطلاحات کلیدی در مورد این زبان را پوشش می‌دهد.
پیش نیازها: سواد اولیه کامپیوتر، نرم افزار پایه نصب شده، دانش اولیه کار با فایل ها و اصول اولیه HTML (مطالعه مقدماتی بر HTML.)
هدف: یادگیری CSS چیست.
در ماژول مقدمه ای بر HTML، توضیح دادیم که HTML چیست و چگونه برای علامت گذاری اسناد استفاده می شود. این اسناد در یک مرورگر وب قابل خواندن خواهند بود. سرفصل ها بزرگتر از متن معمولی به نظر می رسند، پاراگراف ها روی یک خط جدید شکسته می شوند و بین آنها فاصله وجود دارد. پیوندها رنگی و زیر خط کشیده شده اند تا از بقیه متن متمایز شوند. آنچه می‌بینید سبک‌های پیش‌فرض مرورگر است،سبک‌های بسیار ابتدایی که مرورگر روی HTML اعمال می‌کند تا مطمئن شود که صفحه اساساً قابل خواندن است، حتی اگر استایل واضحی توسط نویسنده صفحه مشخص نشده باشد.
CSS برای چیست؟
همانطور که قبلا ذکر کردیم، CSS زبانی است برای تعیین نحوه ارائه اسناد به کاربران،نحوه استایل دهی، چیدمان و غیره.
یک سند معمولاً یک فایل متنی است که با استفاده از یک زبان نشانه گذاری ساختار یافته است. HTML رایج ترین زبان نشانه گذاری است، اما ممکن است با زبان های نشانه گذاری دیگری مانند SVG یا XML نیز برخورد کنید.
ارائه یک سند به کاربر به معنای تبدیل آن به فرمی قابل استفاده برای مخاطبان است. مرورگرهایی مانند فایرفاکس، کروم یا اج برای ارائه اسناد به صورت بصری، به عنوان مثال، روی صفحه نمایش کامپیوتر، پروژکتور یا چاپگر طراحی شده اند.
نکته: مرورگر گاهی اوقات یک عامل کاربر نامیده می شود، که اساساً به معنای یک برنامه رایانه ای است که یک شخص را در یک سیستم رایانه ای نشان می دهد. مرورگرها نوع اصلی عامل های کاربری هستند که هنگام صحبت در مورد CSS به آنها فکر می کنیم، با این حال، آنها تنها نیستند. عوامل کاربری دیگری نیز در دسترس هستند، مانند آنهایی که اسناد HTML و CSS را برای چاپ به PDF تبدیل می کنند.
از CSS می توان برای استایل بندی متن بسیار ابتدایی سند ؛ به عنوان مثال، برای تغییر رنگ و اندازه سرفصل ها و پیوندها استفاده کرد. می توان از آن برای ایجاد یک طرح بندی استفاده کرد ، به عنوان مثال، تبدیل یک ستون متن به یک طرح با یک منطقه محتوای اصلی و یک نوار کناری برای اطلاعات مرتبط. حتی می توان از آن برای افکت هایی مانند انیمیشن استفاده کرد. برای نمونه های خاص به پیوندهای این پاراگراف نگاهی بیندازید.
CSS syntax
تا این جا به صورت مختصر فهمیدیم CSS چیست.حال میخواهیم بخش های اساسی CSS را بررسی کنیم!
CSS یک زبان مبتنی بر قانون است! شما قوانین را با مشخص کردن گروه‌هایی از سبک‌ها تعریف میکنید که باید برای عناصر خاص یا گروه‌هایی از عناصر در صفحه وب خود اعمال شوند.به عنوان مثال، می توانید تصمیم بگیرید که عنوان اصلی در صفحه شما به صورت متن قرمز بزرگ نشان داده شود. کد زیر یک قانون CSS بسیار ساده را نشان می دهد که می تواند به استایلی که در بالا توضیح داده شد دست یابد:
h1 {
color: red;
font-size: 5em;
}
در مثال بالا، قانون CSS با یک انتخابگر باز می شود. این عنصر HTML را انتخاب می کند که می خواهیم به آن استایل دهیم. در این مورد، ما سرفصل های سطح یک (h1) را یک ظاهر طراحی می کنیم.
سپس مجموعه ای از بریس های مجعد { } داریم.
در داخل brace ها یک یا چند اعلان وجود دارد که به شکل جفت دارایی و ارزش است. ویژگی (رنگ در مثال بالا) را قبل از دو نقطه و مقدار خاصیت را بعد از دو نقطه (در این مثال قرمز) مشخص می کنیم.
این مثال شامل دو اعلان است:
یکی برای رنگ و دیگری برای اندازه فونت. هر جفت یک ویژگی از عنصر(هایی) را که انتخاب می کنیم مشخص می کند (در این مورد h1)، سپس مقداری را که می خواهیم به آن ویژگی بدهیم.
خواص CSS بسته به اینکه کدام ویژگی مشخص شده است مقادیر مجاز متفاوتی دارند. در مثال ما، ویژگی رنگ را داریم که می تواند مقادیر رنگ مختلفی را بگیرد. ما همچنین دارای ویژگی اندازه فونت هستیم. این ویژگی می تواند واحدهای اندازه های مختلف را به عنوان مقدار در نظر بگیرد.
یک شیوه نامه CSS حاوی بسیاری از قوانین است که یکی پس از دیگری نوشته می شوند.
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}
متوجه خواهید شد که برخی از ارزش ها را به سرعت یاد می گیرید، در حالی که برخی دیگر را باید جستجو کنید. صفحات خصوصیات فردی در MDN به شما یک راه سریع برای جستجوی ویژگی ها و مقادیر آنها در زمانی که فراموش می کنید یا می خواهید بدانید چه چیز دیگری می توانید به عنوان مقدار استفاده کنید، می دهد.
توجه: می‌توانید پیوندهایی به تمام صفحات دارایی CSS (همراه با سایر ویژگی‌های CSS) فهرست شده درمرجع MDN CSS پیدا کنید. از طرف دیگر، هر زمان که نیاز به یافتن اطلاعات بیشتر در مورد یک ویژگی CSS داشتید، باید عادت کنید که «mdn css-feature-name» را در موتور جستجوی مورد علاقه خود جستجو کنید. مثلاً «mdn color» و «mdn font-size» را جستجو کنید!
ماژول های CSS
از آنجایی که چیزهای زیادی وجود دارد که می توانید با استفاده از CSS به آنها استایل دهید، زبان به ماژول ها تقسیم می شود. با کاوش در MDN، ارجاع به این ماژول ها را مشاهده خواهید کرد. بسیاری از صفحات مستندات حول یک ماژول خاص سازماندهی شده اند. برای مثال، می‌توانید به مرجع MDN به ماژول Backgrounds and Borders نگاهی بیندازید تا بدانید هدف آن چیست و ویژگی‌ها و ویژگی‌هایی که دارد. در آن ماژول، پیوندی به مشخصات نیز خواهید دید که این فناوری را تعریف می کند.
در این مرحله، لازم نیست زیاد نگران نحوه ساختار CSS باشید. با این حال، اگر به عنوان مثال، آگاه باشید که احتمالاً یک ویژگی خاص در میان چیزهای مشابه دیگر یافت می شود و بنابراین احتمالاً در همان مشخصات است، می تواند یافتن اطلاعات را آسان تر کند.
برای یک مثال خاص، اجازه دهید به ماژول Backgrounds and Borders برگردیم! ممکن است فکر کنید منطقی است که خصوصیات رنگ پس‌زمینه و رنگ حاشیه در این ماژول تعریف شوند. و حق با شماست!
مشخصات CSS
تمام فناوری های استاندارد وب (HTML، CSS، جاوا اسکریپت و غیره) در اسناد غول پیکری به نام specifications (یا «specs») تعریف شده اند، که توسط سازمان های استاندارد (مانند W3C، WHATWG، ECMA، یا Khronos) منتشر شده و به طور دقیق تعریف می شوند این فناوری ها قرار است چگونه رفتار کنند.
CSS متفاوت نیست!
این زبان توسط گروهی در W3C به نام CSS Working Group توسعه یافته است. این گروه از نمایندگان فروشندگان مرورگرها و سایر شرکت هایی که به CSS علاقه دارند تشکیل شده است. افراد دیگری نیز وجود دارند که به عنوان کارشناسان دعوت شده شناخته می شوند که به عنوان صداهای مستقل عمل می کنند. آنها به یک سازمان عضو مرتبط نیستند.
ویژگی‌های جدید CSS توسط گروه کاری از دولوپر های CSS توسعه داده میشوند یا مشخص میشوند؛ گاهی اوقات به این دلیل که یک مرورگر خاص علاقه‌مند به داشتن برخی قابلیت‌ها است، گاهی اوقات به این دلیل که طراحان و توسعه‌دهندگان وب یک ویژگی را می‌خواهند، و گاهی اوقات به این دلیل که خود گروه کاری یک نیاز را مشخص کرده است.
CSS به طور مداوم در حال توسعه است و ویژگی های جدیدی در دسترس است. با این حال، یک چیز کلیدی در مورد CSS این است که همه سخت کار می کنند تا هرگز چیزها را طوری تغییر ندهند که وب سایت های قدیمی را خراب کند. یک وب سایت ساخته شده در سال 2000، با استفاده از CSS محدود موجود در آن زمان، هنوز باید در یک مرورگر قابل استفاده باشد.
به‌عنوان یک تازه‌وارد در CSS، احتمالاً مشخصات CSS را بسیار زیاد می‌یابید. این مشخصات برای مهندسان برای پیاده‌سازی پشتیبانی از ویژگی‌ها در عامل های کاربر در نظر گرفته شده است، نه برای توسعه‌دهندگان وب برای خواندن و درک CSS. بسیاری از توسعه دهندگان باتجربه ترجیح می دهند به مستندات MDN یا سایر آموزش ها مراجعه کنند. با این وجود، دانستن وجود این مشخصات و درک رابطه بین CSS مورد استفاده، پشتیبانی مرورگر و مشخصات، ارزش دارد.
اطلاعات پشتیبانی مرورگر
بعد از اینکه یک ویژگی CSS مشخص شد، تنها زمانی برای ما در توسعه صفحات وب مفید است که یک یا چند مرورگر این ویژگی را پیاده سازی کرده باشند. این به این معنی است که کد نوشته شده است تا دستورات موجود در فایل CSS ما را به چیزی تبدیل کند که بتوان به صفحه نمایش خروجی داد. در درس نحوه کارکرد CSS بیشتر به این فرآیند خواهیم پرداخت. برای همه مرورگرها اجرای همزمان یک ویژگی غیرمعمول است، بنابراین معمولاً یک شکاف وجود دارد که در آن می‌توانید از بخشی از CSS در برخی مرورگرها استفاده کنید و در برخی دیگر نه. به همین دلیل، بررسی وضعیت پیاده سازی مفید است.
وضعیت پشتیبانی مرورگر در هر صفحه ویژگی MDN CSS در جدولی به نام “سازگاری مرورگر” نشان داده می شود. برای بررسی اینکه آیا ویژگی که می تواند در وب سایت شما استفاده شود یا خیر، با اطلاعات موجود در آن جدول مشورت کنید. برای مثال، جدول سازگاری مرورگر را برای ویژگی CSS font-family ببینید.
بر اساس نیازهای خود، می‌توانید از جدول سازگاری مرورگر برای بررسی نحوه پشتیبانی از این ویژگی در مرورگرهای مختلف استفاده کنید، یا بررسی کنید که آیا مرورگر خاص شما و نسخه‌ای که دارید از این ویژگی پشتیبانی می‌کند، یا اینکه آیا هشدارهایی وجود دارد که باید از آن آگاه باشید. مرورگر و نسخه ای که استفاده می کنید.
در پایان
شما به پایان مقاله رسیدید! اکنون که درک درستی از چیستی CSS دارید، به سراغ شروع کار با CSS می‌رویم، جایی که می‌توانید خودتان شروع به نوشتن CSS کنید.
حتما به لینک هایی که در مقاله وجود دارد مراجعه کنید و آن ها را بررسی کنید چرا که در آموزش های بعدی به کار می آیند و شما آماده تر خواهید بود. سلسله مقالات CSS تازه شوع شده است و شگفتی های دیگری در راه است.
خوشحالیم که کیهان وب را در این رسالت آموزشی همراهمی میکنید!منتظر نظرات ، سوالات و پیشنهاد ها و انتقادات شما هستیم!