شیوه‌نامه‌های آبشاری یا CSS زبانی است که به یک صفحه وب می‌گوید چگونه به نظر برسد. CSS به ساختار ساده یک وب‌سایت، رنگ، سبک و طرح‌بندی اضافه می‌کند. همانطور که شما لباس‌هایتان را انتخاب می‌کنید تا احساس خوبی داشته باشید و مرتب به نظر برسید، CSS به یک صفحه وب کمک می‌کند تا لباس بپوشد و جذاب به نظر برسد. در توسعه وب، ما از CSS برای تغییر رنگ، اندازه و موقعیت متن و کادرها در صفحه استفاده می‌کنیم. این درس شما را با اصول اولیه CSS به زبان ساده آشنا می‌کند. ما یاد خواهیم گرفت که CSS چیست، چرا مهم است و چگونه با HTML کار می‌کند.
CSS مخفف Cascading Style Sheets است. این یک زبان خاص است که برای استایل‌دهی به صفحات وب استفاده می‌شود. CSS را به عنوان رنگ و تزئینات یک ساختمان در نظر بگیرید. این ساختمان از HTML ساخته شده است و CSS آن را زیبا می‌کند. با استفاده از CSS می‌توانید رنگ پس‌زمینه، سبک فونت و فضای اطراف عناصر را در صفحه وب خود تغییر دهید. CSS ابزاری است که به طراحان وب کمک می‌کند تا وب‌سایت‌ها را بهتر و سرگرم‌کننده‌تر جلوه دهند.
تصور کنید که در حال رنگ‌آمیزی یک نقاشی هستید. خطوط نقاشی مانند ساختار اولیه یک وب‌سایت هستند. CSS مانند مداد رنگی‌ها و ماژیک‌هایی است که به نقاشی جان می‌بخشند. با چند قانون ساده، می‌توانید کل نقاشی خود را از حالت ساده به رنگی تغییر دهید!
CSS برای جذاب و آسان کردن استفاده از وب‌سایت‌ها استفاده می‌شود. CSS استایل را از محتوا جدا نگه می‌دارد. این بدان معناست که کلمات و تصاویر موجود در صفحه (ارائه شده توسط HTML ) یکسان باقی می‌مانند، در حالی که CSS نحوه نمایش آنها را کنترل می‌کند. وقتی استایل را به‌روزرسانی می‌کنید، نیازی به تغییر محتوا ندارید. این جداسازی به توسعه‌دهندگان وب کمک می‌کند تا سریع‌تر کار کنند و سایت‌ها را برای بازدید دلپذیرتر می‌کند.
CSS را مانند لباسی که انتخاب می‌کنید در نظر بگیرید. اگر لباس‌های متفاوتی بپوشید، ظاهرتان متفاوت می‌شود، اما همچنان همان فرد قبلی هستید. CSS ظاهر یک وب‌سایت را بدون تغییر اطلاعات موجود در آن تغییر می‌دهد. این امر به‌روزرسانی طراحی کل یک وب‌سایت را با ویرایش تنها یک فایل CSS ساده می‌کند.
CSS دست در دست HTML. HTML پایه و اساسی است که مشخص می‌کند هر چیزی در یک صفحه وب کجا قرار گیرد. سپس CSS برای اضافه کردن رنگ‌ها، فونت‌ها و سبک‌ها وارد عمل می‌شود. وقتی مرورگر یک صفحه وب را بارگذاری می‌کند، ابتدا ساختار آن را با HTML می‌سازد و سپس سبک‌های تعریف شده در CSS را اعمال می‌کند.
CSS به صورت مجموعه‌ای از قوانین نوشته می‌شود. هر قانون دو بخش دارد: یک انتخابگر (selector) و یک بلوک اعلان (declaration block). انتخابگر به مرورگر می‌گوید که کدام عنصر HTML را استایل‌دهی کند. بلوک اعلان شامل یک یا چند اعلان است. هر اعلان دارای یک ویژگی (property) و یک مقدار (value) است. ویژگی چیزی است که می‌خواهید تغییر دهید و مقدار نحوه تغییر آن را بیان می‌کند.
برای مثال، برای تنظیم رنگ پس‌زمینه صفحه به آبی روشن، می‌توانید قانونی بنویسید که به این شکل باشد:
<کد>بدنه {
رنگ پس‌زمینه: آبی روشن؛
</code>این قانون ساده، پس‌زمینه کل صفحه را تغییر می‌دهد.
یک قانون اساسی CSS از یک الگوی ساده پیروی می‌کند. این الگو، انتخابگر و بلوکی از ویژگی‌ها و مقادیر را نشان می‌دهد. این الگو به شکل زیر است:
انتخابگر {
ویژگی: ارزش؛
</code>در اینجا، انتخابگر انتخاب می‌کند که کدام عنصر HTML را هدف قرار دهد. ویژگی چیزی است که می‌خواهید تغییر دهید و مقدار نحوه تغییر آن را نشان می‌دهد.
برای مثال، اگر می‌خواهید تمام متن پاراگراف آبی باشد، باید بنویسید:
<کد>p {
رنگ: آبی;
</code>این قانون به مرورگر وب می‌گوید که هر عنصر <p> (پاراگراف) باید متن آبی داشته باشد.
انتخابگرهای CSS به شما این امکان را می‌دهند که انتخاب کنید کدام عناصر در صفحه وب شما تحت تأثیر قوانین سبک قرار گیرند. انواع مختلفی از انتخابگرها وجود دارد و هر کدام کمی متفاوت عمل می‌کنند.
این انتخابگرهای مختلف به شما قدرت زیادی برای استایل‌دهی به بخش‌های خاصی از صفحه وب‌تان می‌دهند. آنها به شما اجازه می‌دهند عناصر را دقیقاً هدف قرار دهید و تصمیم بگیرید که چگونه باید به نظر برسند.
CSS ویژگی‌های مختلفی را ارائه می‌دهد که می‌توانید از آنها برای استایل‌دهی به صفحه وب خود استفاده کنید. هر ویژگی به شما امکان می‌دهد جنبه خاصی از ظاهر یک عنصر را تغییر دهید. برخی از ویژگی‌های رایج عبارتند از:
هر ویژگی CSS با یک مقدار دنبال می‌شود. برای مثال، برای دادن رنگ قرمز به متن، می‌توانید بنویسید:
<کد>p {
رنگ: قرمز;
</code>این قانون ساده باعث می‌شود تمام پاراگراف‌ها متن قرمز داشته باشند. ویژگی color نحوه نمایش متن را کنترل می‌کند و مقدار red به آن می‌گوید که چه رنگی باشد.
کلمه «آبشاری» در CSS به این معنی است که استایل‌ها می‌توانند از یک قانون به قانون دیگر جریان داشته باشند. اگر دو قانون بتوانند روی یک عنصر اعمال شوند، ترتیب آنها می‌تواند تعیین کند که کدام یک برنده می‌شود. این شبیه به روی هم چیدن بلوک‌ها است که در آن یک بلوک گاهی بخشی از بلوک دیگر را می‌پوشاند.
یک قانون رایج این است که استایل‌هایی که مستقیماً درون یک عنصر HTML نوشته می‌شوند (که استایل‌های درون‌خطی نامیده می‌شوند) استایل‌های موجود در فایل CSS شما را لغو می‌کنند. قانون دیگر این است که اگر به یک عنصر والد استایل داده شود، عناصر فرزند آن می‌توانند آن استایل را به ارث ببرند، مگر اینکه خلاف آن به آنها گفته شود.
برای مثال، اگر رنگ متن یک <div> را سبز تنظیم کنید، متن داخل <div> نیز اغلب به دلیل وراثت سبز به نظر می‌رسد. این به حفظ طراحی سازگار در یک صفحه وب کمک می‌کند.
با CSS می‌توانید رنگ‌ها را به روش‌های مختلفی تغییر دهید. می‌توانید از نام‌های رایج رنگ‌ها مانند قرمز ، آبی و سبز استفاده کنید. همچنین می‌توانید از کدهای هگزادسیمال مانند <code>#FF0000</code> برای قرمز یا از مقادیر RGB مانند <code>rgb(255, 0, 0)</code> استفاده کنید.
فونت‌ها بخش مهم دیگری از CSS هستند. یک فونت مانند سبک دستخطی است که در یک دفترچه یادداشت انتخاب می‌کنید. در CSS می‌توانید خانواده فونت، اندازه، ضخامت و سبک آن را تغییر دهید. برای مثال، اگر می‌خواهید پاراگراف‌های شما با Arial نمایش داده شوند، می‌توانید از موارد زیر استفاده کنید:
<کد>p {
خانواده فونت: Arial، sans-serif؛
</code>این قانون به مرورگر می‌گوید که اگر متن با فونت Arial موجود است، آن را نمایش دهد و اگر فونت مشابه دیگری موجود نیست، از آن استفاده کند.
تغییر رنگ‌ها و فونت‌ها با CSS، خواندن متن را آسان‌تر و صفحه وب شما را جذاب‌تر می‌کند.
مدل جعبه‌ای CSS روشی برای درک نحوه چیدمان قسمت‌های مختلف یک عنصر در صفحه است. هر عنصر مانند یک جعبه است. مدل جعبه‌ای چهار بخش دارد:
یک عکس را تصور کنید. خود عکس، محتوا است. حصیری که عکس را احاطه کرده است مانند لایه‌ی زیرین است. قابی که همه چیز را در کنار هم نگه می‌دارد، حاشیه است. و فضای اطراف قاب، حاشیه است. با استفاده از این مدل، می‌توانید مطمئن شوید که تمام قسمت‌های طراحی شما از فضای مناسب و تعادل برخوردارند.
CSS فقط مربوط به رنگ‌ها و فونت‌ها نیست؛ بلکه به شما کمک می‌کند تا عناصر را در یک صفحه وب مرتب کنید. به این کار چیدمان و موقعیت‌یابی می‌گویند. با CSS, می‌توانید تصمیم بگیرید که هر عنصر در کجای صفحه ظاهر شود.
روش‌های مختلفی برای کنترل طرح‌بندی یک صفحه وب وجود دارد، از جمله:
استفاده از این تکنیک‌های چیدمان مانند چیدن اسباب‌بازی‌ها روی قفسه است. شما تصمیم می‌گیرید که هر اسباب‌بازی کجا قرار گیرد تا همه آنها فضای کافی داشته باشند و مرتب به نظر برسند. این باعث می‌شود صفحه وب شما منظم‌تر و جذاب‌تر شود.
در اینجا مثالی از نحوه‌ی همکاری HTML و CSS آورده شده است. این کد نمونه، یک صفحه وب ساده را با کمی استایل‌بندی نشان می‌دهد:
<کد><!DOCTYPE html>
<html>
<سر>
<سبک>
بدن {
رنگ پس‌زمینه: آبی روشن؛
}
h1 {
رنگ: سرمه‌ای؛
اندازه فونت: ۲۴ پیکسل؛
}
پ {
رنگ: سبز;
اندازه فونت: ۱۸ پیکسل؛
}
</style>
</head>
<بدنه>
<h1>اولین صفحه وب من</h1>
<p>این یک صفحه وب ساده است که با استفاده از CSS طراحی شده است.</p>
</body>
</html></code>این کد یک صفحه وب با رنگ پس‌زمینه آبی روشن ایجاد می‌کند. متن هدر به رنگ سرمه‌ای و متن پاراگراف به رنگ سبز است. CSS درون تگ <code><style></code> نحوه نگارش و اعمال قوانین را نشان می‌دهد.
شما می‌توانید CSS به سه روش اصلی به HTML خود اضافه کنید. هر روش بسته به موقعیت، کاربرد خاص خود را دارد:
روش خارجی رایج‌ترین روش در توسعه وب حرفه‌ای است زیرا HTML مرتب نگه می‌دارد و به شما امکان می‌دهد سبک‌ها را در چندین صفحه به طور همزمان به‌روزرسانی کنید.
CSS از بسیاری جهات بسیار مفید است. در اینجا به برخی از مزایای استفاده از CSS در توسعه وب اشاره می‌کنیم:
استفاده از CSS مانند داشتن یک جعبه ابزار ویژه است. هر ابزار موجود در جعبه ابزار به شما کمک می‌کند تا ظاهر صفحه وب خود را به راحتی بهبود بخشید. با تمرین، خواهید دید که CSS چقدر می‌تواند در زیبا و کاربرپسند کردن وب‌سایت‌ها قدرتمند باشد.
هر وب‌سایتی که بازدید می‌کنید به نوعی از CSS استفاده می‌کند. از سایت‌های کارتونی مورد علاقه‌تان گرفته تا صفحات پروژه‌های مدرسه، CSS به ایجاد یک طرح‌بندی سرگرم‌کننده و آسان برای خواندن کمک می‌کند. وقتی یک صفحه وب رنگارنگ با فاصله‌گذاری مرتب و متن واضح می‌بینید، CSS در حال کار است.
طراحی وب‌سایت‌های محبوب مانند وب‌سایت‌های بازی، کارتون یا داستان‌های آنلاین را در نظر بگیرید. استفاده‌ی هوشمندانه از رنگ‌ها، فونت‌ها و طرح‌بندی‌ها به جذاب و هیجان‌انگیز شدن این وب‌سایت‌ها کمک می‌کند. CSS همچنین در برنامه‌ها و سایت‌های موبایل استفاده می‌شود و تضمین می‌کند که محتوا هم در صفحه‌های نمایش بزرگ و هم در تلفن‌های کوچک به خوبی نمایش داده شود.
در زندگی روزمره، CSS شبیه به تزئین یک اتاق است. شما ممکن است برای اتاق خود یک تم انتخاب کنید، تصاویر رنگارنگ آویزان کنید و مبلمان خود را به طور مرتب بچینید. CSS همین کار را برای وب سایت ها انجام می دهد. این کار نظم و زیبایی را به فضای دیجیتال می بخشد و آن را برای بازدیدکنندگان دلپذیر می کند.
نکات اصلی که در مورد CSS:
CSS بخش حیاتی توسعه وب است و سایت‌ها را زیبا و پیمایش آنها را آسان می‌کند. همانطور که بیشتر کاوش می‌کنید و سعی می‌کنید صفحات وب خود را بسازید، به یاد داشته باشید که CSS ابزاری برای ابراز خلاقیت شماست. از آزمایش رنگ‌ها، فونت‌ها و طرح‌بندی‌ها لذت ببرید، زیرا هر تغییر کوچکی به جادوی یک وب‌سایت با طراحی خوب می‌افزاید.
به تمرین و مشاهده وب‌سایت‌های مورد علاقه‌تان ادامه دهید. توجه کنید که چگونه از سبک‌های مختلف برای جلب توجه شما و ایجاد یک تجربه دلپذیر استفاده می‌شود. با گذشت زمان، خواهید دید که CSS چقدر می‌تواند در تبدیل ساختارهای ساده HTML به صفحات وب جذاب از نظر بصری قدرتمند باشد.