برای تماس با ما کلیک کنید

آموزش CSS (بخش دوم)

خانه

رنگ ها در css

رنگ ها با استفاده از نام رنگ که به صورت پیش فرض در css تعریف شده اند و یا با ارزش های RGB، HEX، HSL، RGBA، HSLA تعریف شوند.

نام های رنگ :

یکی از روش های تعریف رنگ در HTML، استفاده از نام رنگ می باشد.

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

استفاده از RGB برای تولید رنگ :

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

rgb(red, green, blue)

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند. به عنوان مثال (۲۵۵,۰,۰)rgb به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و بقیه موارد ۰ تنظیم شده است. برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود و برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود.

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

برای ایجاد سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود:

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

استفاده از RGBA برای تولید رنگ :

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

rgba(red, green, blue, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

استفاده از مقادیر HEX برای تولید رنگ :

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

#rrggbb

که دراین نوع تولید رنگ rr (قرمز)، gg (سبز) و bb (آبی) را تعیین می کند، مقادیر هگزادسیم بین ۰۰ و ff هستند (همانند decimal 0-255). به عنوان مثال، ff0000# به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگر مقادیر به کمترین مقدار (۰۰) تنظیم شده اند.

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

#ff0000

#۰۰۰۰ff

#۳cb371

#ee82ee

#ffa500

#۶a5acd

استفاده از مقادیر HSL برای تولید رنگ :

در HTML، رنگ را می توان با استفاده از مقادیر hue , saturation , lightness در فرم مشخص کرد:

hsl(hue, saturation, lightness)

hue : یک درجه در چرخ رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.

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

Lightness : نیز یک مقدار درصدی است، ۰٪ سیاه است، ۵۰٪ بین روشن یا تاریک است، ۱۰۰٪ سفید است.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

saturation را می توان برای شدت یک رنگ تعریف کرد. ۱۰۰٪ رنگ خالص است، بدون سایه خاکستری، ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید و ۰٪ به طور کامل خاکستری است و شما دیگر نمی توانید رنگ را ببینید.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

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

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

استفاده از مقادیر HSLA برای تولید رنگ :

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

hsla(hue, saturation, lightness, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

آموزش CSS (بخش سوم)

نوشته‌های تازه

آموزش CSS (بخش پنجم)

خانه

تعیین فاصله ها در حاشیه عناصر CSS Margins

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

CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:

  • margin-top
  • margin-right
  • margin-left
  • margin-bottom

اگر margin دارای چهار مقدار باشد (;margin: 25px 50px 75px 100px) :

  • حاشیه بالای ۲۵ پیکسل است
  • حاشیه راست ۵۰ پیکسل است
  • حاشیه پایین ۷۵ پیکسل است
  • حاشیه سمت چپ ۱۰۰ پیکسل است
<h2>The margin shorthand property - 4 values</h2>
<div style="border: 1px solid black;margin: 25px 50px 75px 100px;background-color: darkblue;">
This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
</div>

خروجی :

The margin shorthand property – 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.

اگر margin دارای دو مقدار باشد (;margin: 25px 50px) :

  • حاشیه بالا و پایین ۲۵ پیکسل است
  • حاشیه راست و چپ ۵۰ پیکسل است

اگر margin دارای یک مقدار باشد (;margin: 25px) :

تمام چهار طرف حاشیه ۲۵ پیکسل است.

شما می توانید مقدار margin را auto قرار دهید که در این صورت عنصر درون ظرف خود به صورت افقی در وسط صفحه قرارمی گیرد و در واقع عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:

<h2>Use of margin:auto</h2>
<p>
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
</p>
<div style="width:300px; margin: auto; border: 1px solid red;">
This div will be horizontally centered because it has margin: auto;
</div>

خروجی :

Use of margin:auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

This div will be horizontally centered because it has margin: auto;

تعیین فاصله ها در داخل مرز عناصر CSS Padding

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

CSS دارای خصوصیاتی برای تعیین Padding برای هر طرف یک عنصر است.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  •  

توجه : مقادیر منفی برای خصوصیت padding مجاز نیستند.

مثال زیر padding های مختلف را برای هر چهار طرف یک عنصر تنظیم می کند:

<h2>Using individual padding properties</h2>
<div style="border: 1px solid black; background-color: darkblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;">
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</div>

خروجی :

Using individual padding properties

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.

برای کوتاه کردن کد، می توان تمام خواص padding را در یک ویژگی مشخص کرد. اگر خصوصیت padding دارای چهار مقدار باشد (;padding: 25px 50px 75px 100px) :

  • مقدار padding بالا ۲۵ پیکسل است.
  • مقدار padding راست ۵۰ پیکسل است.
  • مقدار padding پایین ۷۵ پیکسل است.
  • مقدار padding چپ ۱۰۰ پیکسل است.
<h2>The padding shorthand property - 4 values</h2>
<div style="border: 1px solid black; padding: 25px 50px 75px 100px; background-color: darkblue;">
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
</div>

The padding shorthand property – 4 values

This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.

اگر خصوصیت padding دارای سه مقدار باشد (;padding: 25px 50px 75px) :

  • بالا ۲۵ پیکسل است
  • راست و چپ ۵۰ پیکسل است
  • padding پایین ۷۵ پیکسل است

اگر خصوصیت padding دارای دو مقدار باشد (;padding: 25px 50px) :

  • سطوح بالا و پایین ۲۵px هستند
  • مقادیر راست و چپ ۵۰ پیکسل است

اگر خصوصیت padding دارای یک مقدار باشد (;padding: 25px) :

تمام چهار طرف ۲۵ پیکسل است.

اگر یک عنصر دارای عرض مشخص شده باشد، ابعاد اضافه شده padding به آن عنصر، به عرض کل عنصر افزوده می شود. این اغلب یک نتیجه نامطلوب است.

در مثال زیر، عنصر دارای عرض ۳۰۰px می باشد. با این حال، پهنای واقعی رندر عنصر ۳۵۰px خواهد بود (۳۰۰px + 25px + 300px + 25px ) :

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; background-color: darkblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.

برای حفظ عرض در ۳۰۰px، بدون توجه به مقدار padding، شما می توانید از box-sizing با مقدار border-box استفاده کنید. این باعث می شود که عنصر برای حفظ عرض آن، اگر padding را افزایش دهید، فضای موجود در دسترس کاهش خواهد یافت. به عنوان مثال:

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; box-sizing: border-box; background-color: darktblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.
آموزش CSS (بخش ششم)

نوشته‌های تازه

با کارشناسان ما تماس بگیرید 09125959757