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

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

آموزش css

سلامی دوباره به دوستان و همراهان سایت سازان. امروز در خدمت شما دوستان هستم با آموزش CSS – بخش دوم و در این جلسه دستوراتی از CSS را که برای:

  • رنگ ها
  • سبک دهی به زمینه المان ها

استفاده می شوند را آموزش خواهیم داد.

یکی از بخش های مهم در طراحی سایت، انتخاب رنگ مناسب برای المان های صفحه وب می باشد. می خواهیم ببینیم رنگ را چگونه و با چه دستوراتی به المان ها اعمال می کنیم:

رنگ ها در CSS

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

  1. استفاده از نام رنگ مثل red ، cyan ، blue  و …
  2. استفاده از مقدار rgb بدین شکل rgb(r,g,b)
  3. استفاده از مقادیر هگزا دسیمال #rrggbb

حال به تشریح این سه روش می پردازیم.

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

در این روش از نام رنگ ها در دستورات CSS استفاده می کنیم که انتخاب رنگ محدود به 140 رنگ است. در نوشتن نام رنگ از حروف بزرگ یا کوچک می توان استفاده کرد که معمولا از حروف کوچک استفاده می کنیم.

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

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

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

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

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

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

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

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

همانطور که می دانید مقادیر هگز، اعدادی بین 0 تا 15 هستند که برای اعداد 10 تا 15 از حروف الفبای لاتین (a معادل 10، b معادل 11 و …) استفاده می کنیم.

لابد می پرسید از حروف بزرگ استفاده کنیم یا کوچیک؟ حروف لاتین را در انتخاب رنگ نیز می توان به صورت بزرگ یا کوچک به کار برد که معمولا از حروف کوچک استفاده می کنیم.

حتما سوال بعدیتون اینه که کد هر رنگ رو از کجا بیاریم؟

هم از ابزار آنلاین می توانید استفاده کنید و هم اگر از IDE استفاده کنید، خود IDE امکاناتی دارد که توسط آن می توان کد رنگ دلخواه را پیدا کرد.

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

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

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

در مرحله بعد به سراغ زمینه المان ها می رویم و میبینیم که چطور می توان زمینه المان ها را به دلخواه سبک دهی کرد؟

سبک زمینه المان ها

در ادامه بخش دوم آموزش CSS به سبک دهی به زمینه المان ها می پردازیم. در CSS ویژگی های دسته background-… برای سبک دهی به پس زمینه المان هاست که این ویژگی ها عبارتند از:

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

بیایید با هم این ویژگی ها را بررسی کنیم:

background-color

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

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

یک مثال دیگر در این زمینه را با هم بررسی می کنیم:

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

background-image

وقتی می خواهیم عکسی را برای زمینه هر المان قرار دهیم از ویژگی background-image  استفاده می کنیم. توجه کنید که عکس زمینه باید به گونه ای انتخاب شود که متن درون المان به راحتی دیده شود.

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

مقدار این ویژگی url()  خواهد بود که آدرس عکسی که می خواهیم زمینه باشد را در پرانتز و همراه با علامت نقل قول می نویسیم.

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

background-repeat

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

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

برای هر المان می توان دو محور را تعریف کرد. محور x که در جهت عرض صفحه می باشد و محور y که در جهت ارتفاع صفحه امتداد دارد. مبدا این دو محور گوشه بالا سمت چپ صفحه می باشد.

ویژگی background-repeat  برای تنظیم تکرار عکس به کار می رود. که مقادیر زیر را می تواند بپذیرد:

 repeat-x : عکس را در جهت محور x تکرار می کند.

repeat-y : عکس را در جهت محور y تکرار می کند.

repeat : که همان حالت پیش فرض است و عکس را در جهت محور x و y تکرار می کند.

no-repeat : که مانع از تکرار عکس می شود.

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

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

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

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

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

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

می خواهیم عکس زیر را در پس زمینه یک دیو قرار دهیم. که اگر عکس را تکرار نکنیم، پس زمینه خوبی را نخواهیم داشت.

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

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

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

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

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

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

همان طور که می بینید با تکرار عکس در جهت های مختلف، می توان زمینه های دلخواهی را برای المان ها ایجاد کرد.

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

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

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

مکان عکس زمینه

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

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

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

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

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

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

در مثال بعدی، عکس را از بالای صفحه فاصله می دهیم:

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

تصویر پس زمینه ثابت

زمانی که می خواهیم یک زمینه ثابت را برای صفحه قرار دهیم که با صفحه اسکرول شود، از ویژگی background-attachment  استفاده می کنیم:

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

دوستای گلم نکات تکمیلی در مورد عکس زمینه را در جلسه دهم آموزش CSS خواهیم آموخت.

همانطور که در مثال بالا می بینید برای سبک دهی به زمینه از 4 ویژگی دسته background  در چهار خط استفاده شد که کار خیلی خوبی نیست بهتره که تا حد امکان کدها را خلاصه نویسی کرد.

در CSS می توان ویژگی های مخصوص هر دسته را در یک ویژگی کوتاه شده نوشت و به آن مقدار دهی کرد. در مثال زیر می بینید که به چه صورت می توان زمینه یک المان را با دستوری یک خطی و کوتاه و خلاصه شده (shorthand) سبک دهی کرد:

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

در خلاصه نویسی دستورات سبک دهی زمینه المان ها نیاز به رعایت ترتیب خاصی نیست. مثلا در مثال بالا دستور سبک دهی به زمینه را می توان به صورت زیر نوشت:

خب عزیزان، آموزش CSS – بخش دوم را در اینجا به پایان می رسانم. در جلسه سوم آموزش CSS با دستورات دیگری از CSS آشنا خواهیم شد.

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

سر افراز و سربلند باشید.

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