جلسه ۰۴- ساختمان کد در 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 براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنید.

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

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

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

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

6447
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

611
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

542
04 دی 1397