Cascading Style Sheets یا CSS زبانی است که به صفحه وب می‌گوید چگونه ظاهر شود. CSS رنگ، سبک و چیدمان را به ساختار ساده یک وب سایت اضافه می کند. درست همانطور که لباس‌های خود را انتخاب می‌کنید تا احساس خوبی داشته باشید و مرتب به نظر برسید، CSS به صفحه وب کمک می‌کند تا لباس‌های زیبا داشته باشد و جذاب به نظر برسد. در توسعه وب، ما از CSS برای تغییر رنگ، اندازه و موقعیت متن و کادرها در صفحه استفاده می کنیم. این درس شما را با اصول CSS به زبان ساده آشنا می کند. ما یاد خواهیم گرفت که CSS چیست، چرا مهم است و چگونه با HTML کار می کند.
CSS مخفف عبارت Cascading Style Sheets است. این یک زبان خاص است که برای استایل دادن به صفحات وب استفاده می شود. CSS را به عنوان رنگ و تزئینات ساختمان در نظر بگیرید. این ساختمان از HTML ساخته شده است و CSS آن را زیبا کرده است. با استفاده از CSS، می توانید رنگ پس زمینه، سبک فونت و فضای اطراف عناصر صفحه وب خود را تغییر دهید. CSS ابزاری است که به طراحان وب کمک می کند تا وب سایت ها را بهتر و سرگرم کننده تر نشان دهند.
تصور کنید در حال رنگ آمیزی یک نقاشی هستید. خطوط نقاشی مانند ساختار اصلی یک وب سایت هستند. CSS مانند مداد رنگی و نشانگرهایی است که به نقاشی زندگی می بخشند. با چند قانون ساده، می توانید کل نقاشی خود را از ساده به رنگارنگ تغییر دهید!
از CSS برای جذاب کردن وب سایت ها و استفاده آسان استفاده می شود. این سبک را از محتوا جدا نگه می دارد. این بدان معنی است که کلمات و تصاویر موجود در صفحه (ارائه شده توسط HTML) یکسان باقی می مانند، در حالی که CSS نحوه ظاهر آنها را کنترل می کند. وقتی سبک را به روز می کنید، نیازی به تغییر محتوا ندارید. این جداسازی به توسعه‌دهندگان وب کمک می‌کند سریعتر کار کنند و بازدید از سایت‌ها را بهتر می‌کند.
به CSS مانند لباسی که انتخاب می کنید فکر کنید. اگر لباس های متفاوتی بپوشید، متفاوت به نظر می رسید، اما همچنان همان فرد هستید. CSS ظاهر یک وب سایت را بدون تغییر اطلاعات روی آن تغییر می دهد. این امر باعث می شود که طراحی کل یک وب سایت با ویرایش تنها یک فایل CSS به روز رسانی شود.
CSS با HTML کار می کند. HTML پایه ای است که تعیین می کند چیزها در یک صفحه وب کجا پیش می روند. سپس CSS برای اضافه کردن رنگ ها، فونت ها و سبک وارد می شود. هنگامی که یک مرورگر یک صفحه وب را بارگذاری می کند، ابتدا ساختار را با HTML می سازد و سپس سبک های تعریف شده در CSS را اعمال می کند.
CSS به عنوان مجموعه ای از قوانین نوشته شده است. هر قانون دارای دو بخش است: یک انتخابگر و یک بلوک اعلام. انتخابگر به مرورگر می‌گوید که کدام عنصر HTML را سبک کند. بلوک اعلامیه حاوی یک یا چند اعلان است. هر اظهارنامه دارای یک ویژگی و یک ارزش است. ویژگی همان چیزی است که می خواهید تغییر دهید، و مقدار نشان می دهد که چگونه آن را تغییر دهید.
به عنوان مثال، برای تنظیم رنگ پس‌زمینه صفحه به آبی روشن، می‌توانید قاعده‌ای به شکل زیر بنویسید:
<code>body{
رنگ پس زمینه: آبی روشن.
}</code>این قانون ساده پس‌زمینه کل صفحه را تغییر می‌دهد.
یک قانون اساسی CSS از یک الگوی ساده پیروی می کند. انتخابگر و بلوکی از خواص و مقادیر را نشان می دهد. الگوی شبیه به این است:
<code>انتخابگر {
دارایی: ارزش;
}</code>در اینجا، انتخابگر انتخاب می کند که کدام عنصر HTML را هدف قرار دهد. ویژگی همان چیزی است که می خواهید تغییر دهید، و ارزش آن است که چگونه می خواهید آن را تغییر دهید.
به عنوان مثال، اگر می خواهید تمام متن پاراگراف آبی باشد، می نویسید:
<code>p {
رنگ: آبی؛
}</code>این قانون به مرورگر وب می گوید که هر عنصر <p> (پاراگراف) باید متن آبی داشته باشد.
انتخابگرهای CSS به شما این امکان را می دهند که انتخاب کنید کدام عناصر در صفحه وب شما تحت تأثیر قوانین سبک قرار می گیرند. انتخابگرها انواع مختلفی دارند و هر کدام کمی متفاوت عمل می کنند.
این انتخابگرهای مختلف به شما قدرت زیادی می‌دهند تا به بخش‌های خاصی از صفحه وب خود سبک دهید. آنها به شما امکان می دهند عناصر را دقیقاً هدف قرار دهید و تصمیم بگیرید که چگونه باید به نظر برسند.
CSS ویژگی های مختلفی را ارائه می دهد که می توانید از آنها برای استایل دادن به صفحه وب خود استفاده کنید. هر ویژگی به شما امکان می دهد جنبه خاصی از ظاهر یک عنصر را تغییر دهید. برخی از خواص رایج عبارتند از:
هر ویژگی CSS با یک مقدار دنبال می شود. به عنوان مثال، برای دادن رنگ قرمز به متن، می توانید بنویسید:
<code>p {
رنگ: قرمز؛
}</code>این قانون ساده باعث می شود همه پاراگراف ها دارای متن قرمز باشند. رنگ ویژگی نحوه نمایش متن را کنترل می کند و مقدار قرمز به آن می گوید که چه رنگی باشد.
کلمه "Cascading" در CSS به این معنی است که سبک ها می توانند از یک قانون به قانون دیگر منتقل شوند. اگر دو قانون برای یک عنصر اعمال شود، ترتیب می تواند تصمیم بگیرد که کدام یک برنده است. این شبیه به انباشتن بلوک‌ها است که گاهی اوقات یک بلوک بخشی از بلوک دیگر را می‌پوشاند.
یک قانون رایج این است که سبک هایی که مستقیماً در یک عنصر HTML نوشته می شوند (به نام سبک های درون خطی) سبک های موجود در فایل CSS شما را لغو می کنند. قانون دیگر این است که اگر یک عنصر والد استایل داده شود، عناصر فرزند آن ممکن است آن سبک را به ارث ببرند، مگر اینکه خلاف آن گفته شود.
به عنوان مثال، اگر رنگ متن یک <div> را سبز تنظیم کنید، متن داخل <div> نیز به دلیل وراثت اغلب سبز نشان داده می شود. این به حفظ یک طراحی ثابت در یک صفحه وب کمک می کند.
با CSS می توانید رنگ ها را به طرق مختلف تغییر دهید. می توانید از نام های رنگ رایج مانند قرمز ، آبی و سبز استفاده کنید. همچنین می توانید از کدهای هگزادسیمال مانند <code>#FF0000</code> برای قرمز یا مقادیر RGB مانند <code>rgb(255, 0, 0)</code> استفاده کنید.
فونت ها یکی دیگر از بخش های مهم CSS هستند. فونت مانند سبک دست خطی است که در دفترچه یادداشت انتخاب می کنید. در CSS می توانید خانواده فونت، اندازه، وزن و سبک را تغییر دهید. به عنوان مثال، اگر می خواهید پاراگراف های شما در Arial ظاهر شوند، می توانید از موارد زیر استفاده کنید:
<code>p {
font-family: Arial, sans-serif;
}</code>این قانون به مرورگر می‌گوید که در صورت موجود بودن، متن را با فونت Arial نمایش دهد و در صورت نبودن، از فونت مشابه دیگری استفاده کند.
تغییر رنگ ها و فونت ها با CSS خواندن متن را آسان تر می کند و صفحه وب شما را جذاب تر می کند.
CSS Box Model راهی برای درک نحوه چیدمان قسمت های مختلف یک عنصر در یک صفحه است. هر عنصر مانند یک جعبه است. مدل جعبه دارای چهار قسمت است:
یک عکس را تصور کنید. عکس خود محتواست. حصیری که اطراف عکس را احاطه کرده است مانند بالشتک است. قابی که همه آن را کنار هم نگه می دارد، حاشیه است. و فضای اطراف قاب حاشیه است. با استفاده از این مدل می توانید مطمئن شوید که تمام قسمت های طراحی شما دارای فضای مناسب و تعادل است.
CSS فقط در مورد رنگ ها و فونت ها نیست. همچنین به شما کمک می کند تا عناصر را در یک صفحه وب مرتب کنید. به این می گویند چیدمان و موقعیت. با CSS، می توانید تصمیم بگیرید که هر عنصر در کجا ظاهر شود.
چندین روش برای کنترل طرح بندی یک صفحه وب وجود دارد، از جمله:
استفاده از این تکنیک های چیدمان مانند چیدن اسباب بازی ها در قفسه است. شما تصمیم می گیرید که هر اسباب بازی کجا برود تا همه آنها فضای کافی داشته باشند و مرتب به نظر برسند. این باعث می شود صفحه وب شما سازماندهی شده و جذاب تر باشد.
در اینجا مثالی از نحوه کار HTML و CSS با هم آورده شده است. این کد نمونه یک صفحه وب ساده با سبکی را نشان می دهد:
<code><!DOCTYPE html>
<html>
<سر>
<سبک>
بدن {
رنگ پس زمینه: آبی روشن.
}
h1 {
رنگ: سرمه ای;
اندازه فونت: 24px;
}
p {
رنگ: سبز؛
اندازه فونت: 18px;
}
</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 به صفحات وب جذاب بصری باشد.