همه چیز درباره سی اس اس(CSS)

نویسنده : Shahriari_admin

شنبه ۲۰ خرداد ۱۴۰۲ - ۰۹:۱۵ بازدیدها : 720

افرادی که به طراحی سایت علاقه دارند حتما نام سی اس اس(CSS) را شنیده اند. اما واقعا CSS چیست و چه کاربردی دارد؟

عبارت CSS که حتما شنیده اید و به دنبال این هستید که بدانید چیست و همه اطلاعات لازم درباره آن را کشف کنید. عبارتی هست که مختصر عبارت سه کلمه‌ای Cascading Style Sheets  به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. شاید این سوال برای شما پیش بیاید که چرا آبشاری؟ چرا باید اسم یکی از عناصر تشکیل دهنده طراحی وب سایت را برگه های آبشاری گذاشت ؟

 

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

تفاوت نسخه های مختلف CSS چیست؟

CSS نسخه های مختلفی دارد که هر یک از نسخه های CSS یک Level نامیده می شود و هر یک از نسخه ها دارای یکسری نسخه تکمیلی می باشند که به آن ها Profile نیز گفته می شود.

 

کاربرد CSS چیست ؟

می توان گفت که کاربرد CSS این است که این زبان برای توصیف ارائه صفحات وب ، از جمله رنگ بندی ، چیدمان و فونت سایز و رنگ ها به کار می رود. همچنین زبان سی اس اس (css) باعث می شود تا شما بتوانید وب سایت خود را در هر سایزی به صورت سفارشی سازی نمایش دهید.

 

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

هدف تولید زبان برنامه نویسی سی اس اس (CSS) در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. جداسازی این دو قسمت از همدیگر باعث افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

مزایای CSS چیست؟

 پیوسته بودن و صرفه جویی در زمان

در  Cssبا تعیین یکباره مشخصات و ایجاد یک خط فرمان، دیگر نیاز به اعمال تغییرات در هر صفحه سایت نیست. بنابراین تمام صفحات را با یک دستور می‎توانید کنترل و طراحی کنید.

 

افزایش سرعت و بهبود سئو سایت

وجود کدهای کمتر، باعث می‎شود مرورگرهای موتورهای جستجو، زمان کمتری را صرف ایندکس کردن سایت شما کنند. در نتیجه سرعت بارگذاری سایت افزایش می‎یابد و سئو سایت ارتقاء پیدا می‎کند.

 

جلوگیری از دوباره نویسی کدهای HTML

دیگر نیاز نیست در تگ‌ها تغییرات مداوم ایجاد کنید و با یک بار مشخص کردن فونت صفحه، به مشکل کدنویسی برنمی‏‌خورید.

 

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

CSSاین امکان را فراهم می‎کند تا صفحات وب سایت بر روی دستگاه‌های مختلفی مانند رایانه و تلفن‌های همراه، نشان داده شود.

 

کدهای CSSبه چه صورت‌هایی اجرا می‌شوند؟

باید بدانیم که کدهای مربوط به زبان سی‌اس‌اس(CSS) به سه شکل قابل نوشتن و همچنین قابل اتصال به بدنه‌ی HTML هستند:

  • اتصال درونی «Inline Style»

در این روش باید کدهای css در کنار کدهای HTML نوشته شوند که در آن همراه با کدنویسی هر عنصر در اچ‌تی‌ام‌ال(HTML)، باید کدهای سی‌اس‌اس مربوط به آن عنصر نیز به صورت جداگانه نوشته شود که البته اینکا مقداری زمان بر است و به برنامه نویسان پیشنهاد نمی شود.

  • اتصال داخلی «Internal Style Sheet»

در این روش تمام کدهای مربوط به زبان css به صورت جداگانه در قسمت‌های ابتدایی کدنویسی نوشته شده و نحوه اجرای آن برای هر عنصر مشخص می‌شود. آن‌گاه با نوشتن کدهای اچ‌تی‌ام‌ال(HTML)، پس از گذاشتن عناصر موردنظر، کدهای سی‌اس‌اس برای آن‌ها اعمال می‌شود.

  • اتصال خارجی «External Style Sheet»

برای استفاده از اتصال خارجی باید بدانید که فرمت css چیست. فرمت فایل‌های سی‌اس‌اس «.css» است که به صورت مجزا تمام کدها در آن تعریف شده و سپس در کدهای HTML فراخوانی می‌شوند. در این روش کل کدهای سی‌اس‌اس در یک فایل جداگانه نوشته شده‌اند و تنها باید از طریق تگ <link> ‌آن‌ها را به اچ‌تی‌ام‌ال دعوت کرد.اتصال خارجی بهترین و پرکاربردترین نوع استفاده از کدهای سی‌اس‌اس است که بیشتر برنامه‌نویسان از آن کمک می‌گیرند.

 

تا اینجا تا حدودی با سی اس اس (CSS) آشنا شدیم و دانستیم که سی‌اس‌اس عامل اصلی زیباسازی وبسایت‌ها و یکی از عناصر ضروری برای رابط کاربری آن‌ها است. انواع استفاده از css در صفحات تحت وب برای اجرای استایل‌های متنوع بر روی متون، عناوین، کادرها، تصاویر و …. است. با فهمیدن این نکته کهCSS چیست و چه کابردی دارد دانستیم که یک صفحه وب زشت را می توان به کمک سی اس اس به یک صفحه‌ی زیبا، دیدنی و کاربرپسند تبدیل کرد.

 

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

*دوره آموزشی HTMLو CSS

 

  • همه چیز درباره سی اس اس(CSS)