اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › مقالات › CSS چیست؟ | چه کاربردی دارد؟ ‌| چطور کار می کند؟

CSS چیست؟ | چه کاربردی دارد؟ ‌| چطور کار می کند؟

تصویر شاخص - css چیست؟

صفحات ساده و اغلب بدون رنگبندی قابل ملاحظه، پس زمینه سفید، کادر ها و جدول های مربع یا مستطیل شکل با گوشه‌های تیز و بدون خمیدگی که عموما برای ساختاربندی محتوای متنی یا تصویری استفاده می شد و متن‌هایی با فونت‌های پیشفرض مرورگر مثل Arial و Tahoma صفحه را پر کرده بودند. اگر هم مرورگر را کوچکتر می‌کردیم اجزاء صفحه همراه با آن تغییر وضعیت نمی دادند و یک اسکرول‌بار عرضی در پایین صفحه ظاهر می‌شد.

تقریبا این مشخصات تمام وبسایت‌های اواسط تا اواخر دهه هفتاد خورشیدی بود. اما با پیشرفت و گسترش تکنولوژی‌های تحت وب امروزه شاهد طراحی های بسیار پیچیده و جذاب در وبسایت‌ها هستیم. این امر با ظهور و تکامل زبان طراحی و استایل دهی CSS محقق شد.

آنچه در ادامه می‌خوانید:
1. CSS چیست؟
2. سی اس اس چه کاربردی دارد؟
3. سی اس اس چطور کار می کند؟
4. چطور CSS را در HTML فراخوانی کنیم؟
5. طراحی صفحات ریسپانسیو، هدیه CSS!

CSS چیست؟

CSS مخفف (Cascading Style Sheets) به معنی “شیوه نامه های آبشاری” است. این بدین معنیست که دستورات و کدهای CSS از بالا به پایین (مانند جریان آبشار) خوانده می شوند و در خوانش و اجرای آنها اولویت اینکه کدام زودتر یا دیرتر نوشته شده‌اند اهمیت دارد. از CSS برای ایجاد تغییرات ظاهری صفحات وب در جهت هر چه بهتر کردن تجربه کاربر استفاده می شود.

بنر مرجع CSS

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

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

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

سی اس اس چطور کار می کند؟

HTML با فراخوانی CSS استایلها را وارد صفحه می کند. هر صفحه HTML از ترکیب مجموعه ای از عناصر ایجاد می شود. برای مثال برای ایجاد پاراگراف از تگ <p> استفاده می شود:

<p>.این یک متن نمونه است</p>

حال اگر بخواهیم متن پاراگراف را به رنگ قرمز دراوریم و اندازه آن را تغییر دهیم، با استفاده از انتخابگر های CSS (در اینجا p) آن را هدف گرفته و تغییرات دلخواه را اعمال می کنیم:

p {
   color: red;
   font-size: 23px;
}

 سی اس اس با استفاده از انتخابگر ها (در مثال بالا p برای انتخاب پاراگراف) عناصر مختلف HTML را هدف گرفته و تغییرات ظاهری را بر روی آن اعمال می کند. انتخابگر قبل آکولاد باز “}” قرار می گیرد. ویژگی ها و دستورات سی اس اس نیز میان آکولاد های باز و بسته { } قرار می گیرند. در این مثال ویژگی ها مثل اندازه فونت، رنگ، میزان ضخامت فونت، فاصله سطرها از هم، طول سطرها و بسیاری تغییرات دیگر را می توانند بر روی پاراگراف متنی اعمال کنند.

چطور CSS را در HTML فراخوانی کنیم؟

یکی از اولین سؤالاتی که ممکن است برای شما ایجاد شود اینست که چطور می توان از دستورات CSS در HTML استفاده کرد؟ این کار به ۳ روش انجام می شود:

  • روش Inline:

    در این روش کدهای CSS داخل تگ های HTML مورد استفاده قرار می گیرد. این روش توصیه نمی شود چون برای هر تگ باید یک استایل نوشت که این باعث صرف وقت بسیار زیادی می شود و نکته دوم اینکه نمیتوان در این روش تغییرات گروهی و بصورت یکجا در عناصر HTML اعمال کرد.
<p style="color: red; font-size: 23px;"></p>
  • روش Internal:

    در این روش کدهای CSS در قسمت head و داخل تگ <style> قرار می گیرد. این روش نسبت به inline انعطاف پذیری و کارکرد بهتری دارد چون میتوان از کدهای CSS برای انتخاب گروهی عناصر در آن صفحه استفاده کرد. اما باید باز هم برای هر صفحه کدها را تکرار کرد.
<style>
   p {
      color: red;
      font-size: 23px;
   }
</style>
  • روش External:

    این روش به عنوان یک روش استاندارد توسط طراحان و توسعه دهندگان وب مورد استفاده قرار می گیرد. در این حالت کدها داخل فایلی با فرمت (css.) نوشته می شوند و توسط تگ <link> به صفحه HTML فراخوانی می‌شوند.
<link rel="stylesheet" href="https://opentag.ir/css/style.css" type="text/css">

طراحی صفحات ریسپانسیو، هدیه CSS!

اگر تجربه کار با وبسایت‌های غیر ریسپانسیو را دارید حتما تفاوت تجربه کار با صفحات ریسپانسیو برای شما روشن است. با ظهور موبایل‌های هوشمند و تبلت‌ها، یکی از دغدغه های اصلی توسعه دهندگان وب تجربه‌ی هر چه بهتر کاربر در بازدید از صفحات وب در این دستگاه‌ها است. این مسئله بسیار مهم توسط CSS انجام می شود. برای کسب اطلاعات بیشتر می‌توانید به نحوه عملکرد media@ در CSS مراجعه کنید.

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

پست قبلی

ویژگی min-height در CSS

پست بعدی

HTML چیست؟‌ و چه کاربردی دارد؟

پست بعدی
تصویر شاخص HTML چیست؟

HTML چیست؟‌ و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن