جلسه ۰۴- ساختمان کد در css و اجزای آن

طراحی سایت

..جلسه ۰۴- ساختمان کد در css و اجزای آن..
طراحی سایت

جلسه ۰۴- ساختمان کد در css و اجزای آن

پس از آشنایی با CSS در فصل ۱ حالا در این بخش ساختار کد‌های CSS در فصل ۲ رو یاد می‌گیرین و با انتخاب‌کننده آشنا می‌شین. در حال حاضر نیازی به درک کامل نوع استایل اعمال‌شده نیست چرا که در بخش‌های بعدی به‌طور گسترده انواع استایل‌های عناصر رو آموزش خواهیم داد. پس فقط به بخش­‌های مورد استفاده در یک دستور CSS، نحوه جدا کردن ویزگی ها، جایگاه ویژگی ها و بطور کلی ساختار دستور دقت کنید.

سرفصل‌های پست

ساختمان کد‌های CSS

ساختمان کلی یک کد css به صورت زیر هست:

ساختار کد‌های CSS
ساختار کد‌های CSS

کدهای css از دو قسمت اصلی تشکیل شدن:

  1. انتخاب‌کننده یا selector
  2. قسمتی که بین { … } قرار می­گیره و تعیین کننده نحوه نمایش در صفحست.

Selector

یک کد css همیشه از انتخاب‌کننده شروع میشه. درواقع وظیفه­‌ی انتخاب‌کننده اینه که خصوصیات موردنظر که بین { … } نوشته شدن رو به یک عنصر اختصاص بده. برای مثال در اینجا، کد css ای رو داریم که خصوصیات رو به هر عنصر h1 ای که درون صفحه هست مربوط می­کنه. h1، یک انتخاب‌کننده هست.

h1{ … }

انتخاب‌کننده می­تونه اشکال متفاوتی داشته باشه، مثل عناصر، کلاس‌­ها، آیدی­‌ها، انتخاب‌کننده­‌های گروهی، انتخاب‌کننده­‌های فرزندی و خانوادگی و …. که در آینده شرح خواهیم داد.

قسمتی بین { … }

قسمتی که بین { … } قرار می­گیره، تعیین‌کننده­‌ی نحوه نمایش انتخاب‌کننده در صفحه ماست. خود این قسمت از دو بخش “ویژگی” و “مقدار” تشکیل شده و می­‌تونه ویژگی‌­های مختلف رو همراه با مقادیر مربوط به اون­‌ها به انتخاب‌کننده اختصاص بده. برای مثال:

h1 { color : red ; }

این کد بیان می­‌کنه، رنگ تمام متن­‌هایی که داخل h1ها هستن، به رنگ قرمز تغییر کنه.

حالا سه نکته رو با هم بررسی کنیم:

  1. ما می‌­تونیم به هرتعداد که می­خواهیم، به انتخاب‌کننده، ویژگی اختصاص بدیم:
    h1 { color: red ; font-size: 10px ; text-align: center ; }
  2. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:
    h1{ color: red; font-size: 10px; text-align: center;  }
  3. یک عنصر، نمی‌­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:
    div { color: blue; color: black; }

حالا چند مثال رو با هم بررسی کنیم:

p { color: black; background-color: blue; }

تمام پاراگراف­‌ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون­‌ها، آبی باشه.

span { font-family: IranSansWeb; opacity: 0.8 }

عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشن.

نتیجه­‌گیری

در این مقاله یاد گرفتیم که:

  • یک قالب کد css، از انتخاب‌­کننده و قسمت بیان‌­کننده خصوصیات تشکیل شده.
  • انتخاب­‌کننده، عنصر مورد نظر رو برای تغییرات انتخاب می­‌کنه.
  • قسمت بین { … }، خصوصیات عنصر منتخب رو بیان می‌­کنه.
  • بهتره کدها در خطوط جداگانه نوشته بشن.
  • یک عنصر، نمی­‌تونه حاوی ویژگی­‌های تکراری باشه.

امیدوارم این آموزش css براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنید.

مدیر محتوا: علی اسمعیلی

90
14 مهر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

16253
24 فروردین 1398
طراحی سایت

bit.ly چیست ؟

بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند. علت استفاده از...

2806
27 آذر 1398
طراحی سایت

دلایل موفقیت دیجی کالا

یکی از موفق ترین استارت اپ های ایران در دهه ی اخیر سایت دیجی کالا بوده است . به طوری که به جرئت می توان گفت این سایت بزرگ‌ ترین خرده‌ فروشی اینترنتی خاورمیانه است . اقایان محمدی در سال 1384 تصمیم راه اندازی این وب سایت گرفتند و در سال 85 این برند با نام فعلی ” دیجی کالا ” پایه گذاری گردید . مدیران این پروژه با این هدف او...

2555
22 اردیبهشت 1398