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



  • ۲۰
  • مهر

جلسه ۱۲ : رنگ ها در HTML

  • دسته‌بندی‌ها :
جلسه ۱۲ : رنگ ها در HTML
    • جزئیات
    • نوع مطلبآموزشی تصویری

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست قصد داریم به آموزش نحوه کار با رنگ ها در HTML بپردازیم. تعریف و رنگ بندی تگ ها و بخش های یک وب سایت از مباحثی است که در جذابیت و زیبایی صفحه وب نقش بسیار مهمی دارد. صفحه وبی که دارای رنگ های متنوع و مرتبط نباشد، خسته کننده و کسل کننده است. در آموزش های قبلی چگونگی کار با تگ های Table , Div و تگ img را در صفحات html را توضیح دادیم. در ادامه این پست نیز به آموزش تعریف رنگ های html برای بخش های مختلف صفحه وب ،می پردازیم.

      رنگ ها در HTML

      رنگ های html با استفاده از نام رنگ های از پیش تعریف شده یا RGB، HEX، HSL، RGBA، HSLA مشخص می شوند. رنگ ها در HTML می تواند با استفاده از نام  آن رنگ مشخص شود:

      رنگ ها در HTML

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

      تنظیم رنگ پس زمینه

      شما می توانید رنگ پس زمینه برای عناصر و تگ های HTML را تنظیم کنید:

      مثال:

      مثال : تنظیم رنگ پس زمینه
      خودتان امتحان کنید »

      رنگ متن

      شما همچنین می توانید ،رنگ متن ها را تعیین کنید:

      مثال:

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

      رنگ Border

      می توانید برای border کادر دور عناصر html ، رنگ تعریف کنید

      مثال:

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

      border-color - رنگ ها در HTML

      border-color – رنگ ها در HTML

       

      مقادیر رنگ ها در HTML

      در HTML رنگها نیز می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند. همانند نام رنگ “Tomato” :

      فرمت rgba

      رنگ های فوق را می توان با شفافیت بیشتر نیز نشان داد :

      شفافیت rgba

      مثال:

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

      مقدار RGB

      در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:

      (rgb(red, greenblue

      در فرمول بالا هر کدام از پارامتر های red , green , blue می تواند مقادیر بین ۰ تا ۲۵۵ را داشته باشد.

      برای مثال مقدار (۰, ۰, ۲۵۵) رنگ قرمز را نمایش می دهد.

      برای رنگ سیاه باید تمام پارامتر ها را  به صفر تنظیم کنید مانند: (rgb(0, 0, 0.

      برای رنگ سفید باید تمام پارامتر ها را به ۲۵۵ تنظیم کرد مانند: (rgb(255, 255, 255.

      مثال : نوع RGB
      خودتان امتحان کنید »

      مثال : مثال دوم از RGB
      خودتان امتحان کنید »

      مقدار HEX

      در html می توان رنگ را بر مبنای Hex تعریف کرد مانند فرمول زیر:

      rrggbb #

      جایی که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین ۰۰ و ff هستند (مانند دهدهی ۰-۲۵۵).

      به عنوان مثال، # ff0000 به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) و دیگران به پایین ترین مقدار (۰۰) تنظیم شده است.

      مثال:

      ff0000 #
      #۰۰۰۰ff
      #۳cb371
      ee82ee #
      ffa500 #
      #۶a5acd
      مثال : مثال HEX
      خودتان امتحان کنید »
      مثال :  رنگ بندی خاکستری
      خودتان امتحان کنید »
      مقدار HSL
      در HTML، رنگ را می توان با استفاده از رنگ، اشباع و سبک (HSL) در فرم مشخص کرد:
      ( hsl(hue, saturation, lightness
      • hue: بصورت درجه ای بر روی چرخ رنگ ها، از ۰ تا ۳۶۰ است. ۰ قرمز ، ۱۲۰ رنگ سبز و ۲۴۰ آبی است.
      • saturation :یک درصد است، ۰٪ به معنای یک سایه خاکستری است و ۱۰۰٪ رنگ کامل است.
      • lightness : همچنین درصد، ۰٪ سیاه است، ۵۰٪ نه خیلی سیاه یا سفید است، ۱۰۰٪ سفید است.
      مثال :  نوع HSL
      خودتان امتحان کنید »

      Saturation

      Saturation در واقع به معنی شدت و کمیت یک رنگ است.

      ۱۰۰٪ رنگ خالص است، بدون سایه خاکستری.

      ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید.

      ۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

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

      روشنایی (Lightness)

      Lightness یک رنگ را می توان به این صورت توضیح داد: مقدار روشنایی رنگ، که ۰٪ به معنای هیچ نوری (سیاه و سفید)، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه نور) ۱۰۰٪ به معنی نور کامل (سفید) توصیف می شود.

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

      در رنگ های خاکستری:

      مثال : روشنایی رنگ های خاکستری
      خودتان امتحان کنید »

      مقدار RGBA

      مقادیر رنگ RGBA یک فرمت ارزش رنگی RGB با یک کانال آلفا است که کدورت را برای یک رنگ مشخص می کند.

      مقدار رنگ RGBA با فرمت زیر تعیین می شود:

      rgba(red, greenblue, alpha)

      پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (بیشترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.

      مثال : مقدار RGBA
      خودتان امتحان کنید »

      مقدار HSLA

      مقدار HSLA شامل مقادیر نوع HSL به همراه یک پارامتر alpha که میزان شفافیت رنگ را مشخص می کند همراه است.

      برای استفاده از مقادیر HSLA باید از فرمت زیر استفاده کرد :

      hsla(hue, saturationlightness, alpha)

      پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (بیشترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.

      مثال : مقادیر HSLA
      خودتان امتحان کنید »

      کلام آخر

      رنگ بندی تگ ها و بخش های یک وب سایت از مباحثی است که در جذابیت و زیبایی صفحات وب نقش بسیار مهمی دارد. و به نوعی باعث جذب کاربران بیشتر به وب سایت می شود. از این در این بخش به بررسی فرمت های مختلف رنگ ها در HTML پرداختیم.

      QR:  جلسه ۱۲ : رنگ ها در HTML
      به اشتراک بگذارید