دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • خرداد

جلسه ۰۲ : ساختار کد نویسی CSS

  • دسته‌بندی‌ها :
جلسه ۰۲ : ساختار کد نویسی CSS
    • جزئیات
    • نوع مطلبآموزشی تصویری

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش ساختار کد نویسی css ، و چگونگی تعریف یک style در css برای عناصر html بپردازیم.

      CSS مخفف عبارت Cascading Style Sheets می باشد.که در واقع توصیف می کند که چگونه عناصر HTML روی صفحه نمایش، کاغذ یا سایر رسانه ها نمایش داده شود.با استفاده از css می توان برای عناصر html در چندین صفحه وب، الگو یا طرح تعریف کرد. و تمام این الگوه ها و طرح ها در قالب یک فایل css ذخیره می شود.

      در این آموزش چگونگی تعریف کردن این طرح ها و الگوها را در داخل css  ( ساختار کد نویسی css ) مورد بررسی قرار می دهیم.

      css- ساختار کد نویسی css

      css- ساختار کد نویسی css

      ساختار کد نویسی css

      یک ساختار کد css به طور کلی شامل یک مجموعه طرح های تعریف شده در css و یک عنصر html برای اعمال طرح هاست.

       

      selector

      selector

      • Selector یک عنصر html است که آن را برای اعمال طرح های css ، انتخاب می کنید.
      • Declaration شامل یک یا چند کد css مستقل برای Selector است که با  ” ; ” از هم جدا شده است.
      • Property عنوان یا نام صفتی است که در Declaration تعریف شده است.
      • Value مقداری است که به Property اختصاص می یابد.
      • شروع و پایان کدهای css مربوط به هر عنصر html، با پرانتز باز و بسته به شکل ” {} ” مشخص می شود.

      مثال: تعریف کد های css برای تگ های <p> صفحه وب:

      مثال : ترازبندی تگ p و تغییر رنگ
      خودتان امتحان کنید »

      روشهای انتخاب یک عنصر html برای تعریف کردن css

      برای دسترسی به یک عنصر html و تعریف طرح در css از ویژگی های name, id, class و… که برای عناصر html تعیین شده، استفاده می کنیم.

      انتخاب یک تگ html

      در این روش یکی از تگ های html برای طرح دادن در css انتخاب می شود. برای مثال اگر شما بخواهید برای تگ <p> طرح تعریف کنید،باید از نام p در css استفاده کنید. و در این روش ، کدهای css تعریف شده برای تمام تگ های <p> موجود در صفحه وب ، اعمال می شود.

      شما می توانید تمام عناصر <p> را بر روی یک صفحه مانند این (همه موارد <p> انتخاب کنید و با یک رنگ متن قرمز) در این مورد انتخاب کنید:

      مثال :  انتخاب عنصر p
      خودتان امتحان کنید »

      انتخاب یک عنصر با استفاده از id

      در این روش css با استفاده از شناسه id که برای عناصر html تعریف شده به آن دسترسی دارد. مقدار id در عناصر html مانند یک نام  برای آن عنصر می باشد و هر عنوانی می تواند باشد. در css برای مشخص کردن id مربوطه ، قبل از عنوان id از کاراکتر “#” استفاده می شود.

      مثال: تعریف css برای عنصر html با id با مقدار “para1” :

      مثال : انتخابگر id
      خودتان امتحان کنید »

      انتخاب یک عنصر با استفاده از class

      در این روش مانند روش قبلی ،  css با استفاده از یک شناسه class که برای عناصر html تعریف شده به آن دسترسی دارد. مقدار class در عناصر html مانند یک نام  برای آن عنصر بوده و هر عنوانی می تواند باشد.  در css نیز برای مشخص کردن class مربوطه ، قبل از عنوان class ، از کاراکتر نقطه (“.“)  استفاده می شود.

      مثال: تعریف css برای یک عنصر html با شناسه کلاس “class=”center :

      مثال : انتخاب عناصر با استفاده از class
      خودتان امتحان کنید »

      در مثال زیر، تنها عناصر <p> با class = “center” در مرکز قرار دارند:

      مثال : مثال دوم انتخاب عناصر با استفاده از class
      خودتان امتحان کنید »

      در مثال زیر، عنصر <p> با توجه به class = “center” و class = “large” طراحی شده است:

      مثال : مثال سوم انتخاب با استفاده از class
      خودتان امتحان کنید »

      نکته: یک نام کلاس نمی تواند با یک عدد شروع شود!

      گروه بندی عناصر html در css

      نحوه گروه بندی و مشخص کردن شروع و پایان هر css تعریف شده برای یک عنصر به این صورت است:

      مثال : 

      تعریف یک css برای چند عنصر

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

      مثال:

      مثال : تعریف یک css برای چند عنصر
      خودتان امتحان کنید »

      توضیحات در CSS

      نظرات برای توضیح کد مورد استفاده قرار می گیرند و ممکن است هنگامی که کد منبع را بعدا ویرایش می کنید کمک کنید.

      نظرات و یا توضیحات توسط مرورگرها نادیده گرفته می شوند.

      یک نظر CSS با / * شروع می شود و به پایان می رسد با * /. در نظرات همچنین می توانید چندین خط را بگذارید:

      مثال : توضیجات در CSS
      خودتان امتحان کنید »

      کلام آخر

      دربخش قبلی مقدمات و توضیحاتی را برای آشنایی با CSS و کاربرد آن در HTML ارائه کردیم ، در این بخش برای شروع کار با CSS ابتدا به معرفی سینتکس و ساختار کدنویسی CSS در HTML پرداختیم.

      QR:  جلسه ۰۲ : ساختار کد نویسی CSS
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر