طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش دوم

آموزش css

دراین قسمت از آموزش CSS به نحوه تعیین رنگ برای اجزا می‌پردازیم و 3 روش را برای این کار بررسی می‌کنیم. بعد از رنگ به سراغ قرار دادن عکس برای پس‌زمینه می‌رویم و با پراپراتی های دسته‌ی background آشنا می‌شویم و درنهایت با عبارت shorthand آشنا می‌شویم.

رنگ‌ها در CSS

رنگ‌ها را به 3 طریق می‌توان تعیین کرد که عبارتند از:

1) استفاده از نام رنگ مثل red ، cyan ، blue و …

2) استفاده از مقدار rgb بدین شکل rgb(r,g,b)

3) استفاده از مقادیر هگزا دسیمال #rrggbb

این 3 روش را در این قسمت به‌طور کامل باهم بررسی می‌کنیم.

استفاده از نام رنگ‌ها

در این روش از نام رنگ‌ها در دستورات CSS استفاده می‌کنیم. زبان HTML و CSS از 140 رنگ پشتیبانی می‌کند. این تعداد رنگ محدودیت استفاده از نام رنگ‌ها در تعیین رنگ است. یعنی می‌توانیم فقط 140 رنگ را ایجاد کنیم.

[us_single_image image=”10764″ align=”center”]

توجه: برای نوشتن نام رنگ‌ها می‌توانید حروف اول و یا تمام حروف هر نام را با حرف بزرگ بنویسید. اما بهتر است که از حروف کوچک استفاده کنید.

استفاده از مقدار rgb

در این روش به پراپرتی مرتبط بارنگ مقداری به این صورت می‌دهیم: rgb(r,g,b) . درون پرانتز را با اعدادی از 0 تا 255 پر می‌کنیم که عدد اول شدت رنگ قرمز، عدد دوم شدت رنگ سبز و عدد سوم شدت رنگ آبی را تعیین می‌کند. با ترکیب این رنگ‌ها می‌توان تعداد زیادی رنگ را ساخت.

[us_single_image image=”10765″ align=”center”]

وقتی‌که شدت مقادیر هر سه رنگ در rgb یکسان باشد، سایه‌هایی از رنگ سیاه به وجود می‌آید. اگر همه مقادیر 0 باشند رنگ سیاه و اگر همه 255 باشند رنگ سفید خواهد بود.

[us_single_image image=”10766″ align=”center”]

استفاده از مقادیر هگزا دسیمال

روش سوم تعیین رنگ، استفاده از مقادیر هگزا دسیمال رنگ‌هاست. بدین ترتیب که مقدار هر پراپرتی مربوط به رنگ را به این صورت تعیین می‌کنیم: #rrggbb که rr برای شدت رنگ قرمز، gg برای شدت رنگ سبز و bb برای شدت رنگ آبی می‌باشند. این روش بهترین روش تعیین رنگ است چراکه بیشترین تعداد رنگ را می‌توان با این روش در اختیار داشت.

مقادیری که می‌توانیم بدهیم اعدادی از 0 تا 9 و بجای اعداد بزرگ‌تر از 10 حروف لاتین از a تا f است. فرض کنید می‌خواهیم شدت رنگ آبی یعنی bb را تعیین کنیم. مقادیری که می‌توانیم به دو عدد سوم بدهیم بدین‌صورت است: 00 ، 5a ، d0 ، cc است. یعنی می‌توان هر دو رقم را حروفی بین a تا f، یکی حرف و دیگری عددی بین 0 تا 9 و یا اینکه هر دو را عدد انتخاب کرد.در تعیین حروف، می‌توان حرف کوچک و یا حرف بزرگ را انتخاب کرد. با جستجو در اینترنت می‌توانید به‌راحتی مقدار هرگز هر رنگ را پیدا کنید.

[us_single_image image=”10767″ align=”center”]

اگر برای هر سه شدت رنگ، مقادیر یکسانی را انتخاب کنید، سایه‌های رنگ سیاه به وجود می‌آید:

[us_single_image image=”10768″ align=”center”]

استایل دادن به پس‌زمینه

در این قسمت از بخش دوم CSS به استایل دادن به زمینه اجزاء می‌پردازیم. در CSS پراپرتی background-… برای استایل دادن به پس‌زمینه اجزاست که به‌جای سه‌نقطه مقادیر: color ، image ، repeat ، attachment و position قرارمی گیرند و در کل پراپرتی پس‌زمینه به اشکال زیر خواهد بود که مقادیر آن‌ها را در همین قسمت بررسی می‌کنیم:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 Background Color

در مثال‌های مختلف این پراپرتی را استفاده کرده‌ایم و می‌دانیم که این پراپرتی برای تعیین رنگ پس‌زمینه هر جزء است. مقداری را که می‌توانید به این پراپرتی بدهید نام رنگ، rgb و یا مقدار هگزا دسیمال هر نگ است.

[us_single_image image=”10769″ align=”center”]

در مثال زیر به هر جزء به روش مختلفی استایل داده‌ایم و رنگ پس‌زمینه آن را تغییر داده‌ایم:

[us_single_image image=”10770″ align=”center”]

 Background Image

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

اما چگونه به پراپرتی background-image مقدار بدهیم؟

با اتریبیوت src آشنا هستید و میدانید که برای قرار دادن یک عکس در صفحه، از طریق این اتریبیوت آدرس عکس را انتخاب می‌کنیم. این برای زمانی است که نمی‌خواهیم عکس پس‌زمینه باشد. وقتی عکسی را می‌خواهیم در پس‌زمینه یک جزء قرار دهیم، ابتدا پراپرتی background-image را نوشته و در ادامه آدرس عکس را درون مقدار این پراپرتی که url( ” ” ) است، می‌نویسیم. عکس‌های پس‌زمینه را درون پوشه images و در پوشه‌ای بانام bgimages قرار دهید و بر اساس محل قرارگیری این پوشه، آدرس دهی را انجام دهید. آدرس عکس را می‌توانید درون علامت نقل‌قول قرار دهید یا ندهید و حتما فرمت عکس را در آدرس دهی عکس لحاظ کنید.

[us_single_image image=”10771″ align=”center”]

Background Repeat

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

[us_single_image image=”10772″ align=”center”]

یک عکس می‌تواند در طول یا عرض صفحه تکرار شود. یعنی تکرار را از دیفالت که به‌صورت هم‌افقی ( horizontal ) و هم عمودی ( vertical ) است، به افقی و یا عمودی تغییر داد. برای این کار به پراپرتی background-color مقدار repeat-x برای تکرار افقی و repeat-y برای تکرار عمودی را می‌دهیم. و اگر مقدار repeat دهیم، به حالت دیفالت یعنی تکرار هم‌افقی و هم عمودی برمی‌گردد. در مثال‌های زیر تکرار افقی و عمودی را می‌بینیم.

در مثال زیر عکس در جهت محور طول‌ها یعنی x تکرار شده است:

[us_single_image image=”10773″ align=”center”]

در مثال بعد عکس در جهت محور عرض‌ها یعنی y تکرار شده است:

[us_single_image image=”10774″ align=”center”]

اما این تکرار عکس چه موقع مناسب است؟

گاهی عکس‌هایی نامناسب ( از یک رنگ با شدت رنگ بیشتر شروع می‌شوند و به‌مرور به سمت رنگ سفید می‌روند ) را برای پس‌زمینه انتخاب می‌کنیم که برای یک دست شدن پس‌زمینه مجبوریم عکس را در یک‌جهت تکرار کنیم. به مثال زیر دقت کنید.می‌خواهیم عکس زیر را در پس‌زمینه div قرار دهیم. که اگر عکس را تکرار نکنیم، پس‌زمینه خوبی را نخواهیم داشت.

[us_single_image image=”10775″ align=”center”]

[us_single_image image=”10776″ align=”center”]

اکنون عکس زیر را درزمینه این دو div قرار می‌دهیم و نتیجه را با تکرار و بدون تکرار می‌بینیم.

[us_single_image image=”10777″ align=”center”]

[us_single_image image=”10778″ align=”center”]

توجه کنید که اندازه پیکسلی عکس را تغییر داده‌ایم و در هر دو مثال عکس را به نوار باریکی تبدیل کرده‌ایم که این کار را می‌توانید با نرم‌افزار paint که در ویندوزها نصب است انجام دهید.

پس تا اینجا فهمیدیم که هر عکسی با هراندازه پیکسلی را در صفحه قرار دهید می‌تواند در یک و یا هر دو محور تکرار شود. اگر یک عکس متجانس را انتخاب کنید در این صورت نیازی به تکرار در جهت‌های مختلف ندارد و همان عکس را در صفحه و بدون تکرار تنظیم می‌کنیم. برای این کار باید به پراپرتی background-repeat مقدار no-repeat می‌دهیم. یعنی عکس را در تمام صفحه و بدون تکرار ثابت نگه‌دار.

به مثال زیر توجه فرمایید:

[us_single_image image=”10779″ align=”center”]

در این مثال دیدیم که عکس فقط در نقطه از صفحه قرارگرفته و تمام صفحه را در برنمی‌گیرد و به‌صورت دیافالت در گوشه بالا سمت چپ قرارگرفته است. می‌توان این عکس را در هر نقطه‌ای از صفحه قرارداد و متن را بر اساس محل این درون سند جای داد. اما چگونه این کار را باید انجام دهیم؟ روش کار تعیین محل عکس است که در ادامه آن را بررسی می‌کنیم.

Background Position

برای تعیین محل عکس از پراپرتی background-position استفاده می‌کنیم. مقداری را که به این پراپرتی می‌دهیم، محل دلخواه برای قرارگیری عکس است. به‌عنوان‌مثال برای قرار دادن عکس در گوشه بالا سمت راست، مقدار آن را right top; می‌دهیم. به مثال زیر توجه فرمایید:

[us_single_image image=”10780″ align=”center”]

در مثال زیر عکس را در سمت چپ قرار داده‌ایم:

[us_single_image image=”10781″ align=”center”]

پراپرتی background-position را می‌توانید با مقدار پیکسل نیز مقداردهی کنید. در مثال‌ها دیدید که مقدار این پراپرتی دوقسمتی بود. در مقداردهی با پیکسل، قسمت اول برای تعیین فاصله پیکسلی برای سمت چپ و قسمت دوم برای تعیین فاصلی پیکسلی عکس از بالا هستند. در مثال‌های زیر می‌بینیم که چگونه مقداردهی را با پیکسل انجام می‌دهیم.

[us_single_image image=”10782″ align=”center”]

Background Attachment

این پراپرتی برای چسباندن عکس به صفحه است که با بالا و پایین کردن صفحه ( scroll کردن صفحه ) عکس درزمینهٔ ثابت خواهد ماند و با صفحه پایین و بالا می‌شود. کدهای زیر را همراه با متن آن درون ادیتور کپی پیست کرده و نتیجه را مشاهده کنید.

[us_single_image image=”10783″]

نوشته های مرتبط

دیدگاه ‏خود را بنویسید