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

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

در این مطبی به این مورد میپردازیم که CSS چه نقشی در طراحی وب دارد .پس با ما همراه باشید .

CSS دقیقا به چه معناست ؟

لغت CSS مخفف شده ” Cascading Style Sheets ” میباشد که سبک و فرم عناصر موجود در یک صفحه را مشخص میکند .

HTML یک صفحه وب را نمایش میدهد در حالی که این CSS است که تمامی تزئینات و زیبایی های صفحه را تنظیم میکند . شیوه آبشاری یا Cascade حالتی است که CSS از ابتدا براساس آن طراحی شده است و به همین دلیل نیز است که آن را CSS یا Cascading Style Sheet می‌نامند.

CSS چگونه با HTML ارتباط برقرار میکند ؟

ابتدا HTML بارگذاری می شود و سپس CSS اعمال می شود . کد های CSS گاهی اوقات در کنار HTML قرار داده می شوند و در اکثر مواقع که پیشنهاد می شود از این نوع استفاده کنید ، به صورت یک فایل جدا ( style sheet ) قرار داده می شود که با استفاده از لینک ( URL ) به صفحه اضافه می شوند .

تفاوت استفاده از این دو روش دقیقا به نوع و کاربرد کد ها در صفحه وب شما بستگی دارد . اگر میخواهید صفحه وب شما اصولی تر و دقیق تر  باشد ما به شما استفاده از روش دوم یعنی ( style sheet ) را پیشنهاد می کنیم . اگر از روش اول استفاده کنید و کد CSS را مستقیم در تگ های HTML قرار دهید CSS تنها در همان تگ HTML اعمال می شود .

HTML دارای تگ های مختلفی میباشد به طور مثال h1 برای عنوان تگ body برای ساختار بدنه ، تگ head برای جایگیری مهمترین بخش های سایت از جمله title و … تگ p برای تعریف یک پاراگراف میباشد و کاری که CSS انجام میدهد این است که اندازه ، رنگ و … این تگ ها تنظیم میکند .

CSS چیست ؟

بیاید نگاهی کوتاه به کدهای CSS داشته باشیم .

کدهای CSS که در خود فایل HTML قرار داده می شوند باید دارای تگ باز و بسته <style> باشند .

قطعه کد زیر ، رنگ ، اندازه و ترازبندی تگ h2 را تنظیم میکند .

<style>

h2 {

font-size: 24px;

color: blue;

text-align: center;

}

</style>

در ابتدا تگ باز style قرار داده می شود در خط بعدی تگ HTML مورد نظر خود را که در این کد h2 قرار می دهیم . در خط بعدی با استفاده از ویژگی font-size اندازه h2 را تنظیم میکنیم دقت کنید که بعد از قرار گرفتن نام ویژگی علامت : و سپس مقدار آن ( در این کد 24px ) قرار داده می شود و سپس دستور با استفاده از ; بسته می شود . px هم مخفف pixel میباشد . در خط بعدی color برای تغییر رنگ قرار داده شده است که با blue یعنی رنگ آبی مقدار دهی شده است و در خط آخر دستور زیر text-align قرار داده شده که مقدار center یعنی وسط چین برای آن در نظر گرفته شده است . نکته دیگر اینکه بعد از قرار دادن نام تگ یک برکت باز و در آخر هم قبل از این style بسته شود یک براکت بسته برای دسته بندی کد خود قرار دهید .

نحوه استفاده از CSS

CSS و HTML ( و سایر زبان مهای برنامه نویسی وب ) توسط برنامه نویسان بک اند ( Back End ) استفاده می شوند .

اگر بخواهیم Back End را به صورت خلاضه توضیح دهیم :

برنامه نویسی بک اند (Back End) مربوط به کدنویسی و برنامه نویسی هر آن چیزی است که کاربر آن را مشاهده نمیکند و مربوط به کارهای پشت صحنه وب سایت است. برای مثال وقتی که یک وبسایت، مقالات را از دیتابیس دریافت میکند، یک امر مربوط به بک اند است. وظیفه‌ی یک برنامه نویس بک اند، برنامه نویسی چیزهایی است که هسته اصلی یک وبسایت هستند و کاربر کدهای آن‌را بصورت مستقیم مشاهده نمیکند.

طراحان وب از CSS برای سبک تر شدن صفحه وب ، بارگذاری دقیق استفاده می کنند

CSS چه کاربردی دارد ؟

کار CSS تنها تغییر رنگ و اندازه تگ های HTML نمیباشد . با استفاده از آن میتوانید به صفحات وب خود قابلیت انیمیشن و حرکات زیبا اضافه کنید . همچین قابلیت حرکات 3D را نیز به عناصر خود اضافه کنید این موارد با استفاده از خود HTML انجام پذیر نمیباشد و اگر هم بخواهید انجام دهید مدت زمان زیادی را باید هدر دهید .

از CSS میتوانید نمایش و متناسب صفحات وب تغییر اندازه صفحه در نمایشگر های مختلف ( ریسپانسیو ) بهره مند شوید .

مطمئن باشید یادگیری CSS بسیار مفید میباشد و برای یک طراح وب از نان شب هم واجب تر است .

آموزش CSS را از کجا شروع کنم ؟

برای یادگیری CSS منابع زیادی  ( فارسی و انگلیسی ) وجود دارد ولی میتوانید برای شروع از وب سایت W3Schools.com استفاده کنید که منابع و آموزش های بسیار زیادی را در اختیار شما قرار می دهد . همچنین میتوانید از دو وب سایت freecodecamp و CSS-Tricks نیز استفاده کنید .

جمله آخر :

همانطور که در این مطلب مشاهده کردید قبل از یادگیری CSS در ابتدا HTML را یادبگیرید و بدانید اگر CSS در وب سایت ها استفاده نشده باشد ، سایت ها بسیار کسل کننده و با چیدمان بسیار بد نمایش داده می شوند .

برای یادگیری هرگز دیر نیست