نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ادامه اموزش طراحی سایت با CSS :

خصوصیت Color:

با استفاده از این خاصیت می توان رنگ متن عناصر را تغییر داد. و به پنج طریق می توان آن را مقدار دھی کرد.

استفاده از کلمات کلیدی : می توان از 16 رنگ استاندارد برای مقدار دھی به color استفاده کرد عبارتنداز:

 

استفاده از مبنای ھگزا دسیمال  : رنگ ھا را می توان بر مبنای عبارت متناظر آنھا در مبنای 16 به کار برد.

در این عبارت می توان سه عدد در مبنای 16 نوشت. عدد اول معرف رنگ قرمز، عدد دوم معرف رنگ سبز وعدد سوم معرف رنگ آبی است. فرم کلی این عبارت ھا به شکل rrggbb# است.

 

استفاده از کوتاه نویسی ھگزادسیمال : در این روش زوج مقادیر تکراری را می توان به صورت تکینوشت. برای مثال fff معادل ffffff ، و 000  معادل 000000   و ccddaa معادل cda می باشد.

 

استفاده از تابع rgb : تابع rgb به ترتیب سه رنگ قرمز (red) ، سبز (green) ،  آبی (blue) را به عنوانمقدار می پذیرد. این مقادیر یا اعداد، صحیح ھستند. (از 0 تا 255) و یا به صورت درصد می باشند. (از 0 تا

100 درصد).

 

استفاده از تابع rgba :  این تابع که در css3 معرفی شد، ھمانند تابع rgb است با این تفاوت که پس ازاختیار سه مقدار اول که برای تعیین رنگ به کار می روند، مقدار چھارمی نیز را باید اختیار کرد که مقدار

شفافیت (opacity) رنگ را تعیین می کند. و مقداری بین 0 تا 1 می پذیرد. که مقدار 0 به معنای 0 درصد و 1به معنای 100 درصد است.

 

 

 

background-color خصوصیت:

با استفاده از این خاصیت می توان رنگ پس زمینه عناصر را تغییر داد. و مقداری که می گیرد ھمانند مقداری است کهخصوصیت color می گیرد، یعنی ھمان، تابع rgb و rgba، ھگزادسیمال و رنگ ھای استاندارد.

 

 

background-image خصوصیت:

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

و بجای کلمه Image Address آدرس تصویر قرار می گیرد.

 

background repeat خصوصیت:

با استفاده از این خاصیت می توان نحوه تکرار عکس در پس زمینه را کنترل کرد و یکی از چھار مقدار زیر را می پذیرد:

Repeat : تکرار عکس در دو جھت افقی و عمودی

Repeat-x : تکرار عکس در جھت افقی (horizental)Repeat-y : تکرار عکس در جھت عمودی (vertical)No-repeat : عدم تکرار عکس

 

می بینید که تصویر فقط در جھت افقی (عرض صفحه) تکرار شده…

background-attachment خصوصیت:

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

Fixed : با اسکرول شدن محتوا، عکس پس زمینه  در جای خود ثابت بماند.

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

 

<h2> 7learn.com </h2> * <h2> 7learn.com </h2> * <h2> 7learn.com </h2> * <h2> 7learn.com </h

2> * <h2> 7learn.com </h2> …..

 

نتیجه کدbackground position خصوصیت:

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

کلمات کلیدی:

left , center , right :مقادیر افقی

top , center , bottom : مقادیر عمودی

 

دستور فوق مشخص می کند که تصویر پس زمینه باید 20% به سمت داخل در جھت افقی(به سمت راست) و 65%به سمت داخل در جھت عمودی (به سمت پایین) قرار بگیرد.

مقادیر عددی : این مقادیر نیز عددی بر حسب یکی از واحد ھای محاسباتی در زبان css ھستند:

 

دستور فوق مشخص می کند که تصویر پس زمینه باید از گوشه ی بالا و سمت چت 5 پیکسل به طرف راست ، و 10پیکسل به طرف پایین قرار بگیرد.

ترکیب مقادیر عددی و درصدی و ھمچنین استفاده از مقادیر منفی برای این خصوصیت مجاز است، اما مقادیر عددی ودرصدی نمی توانند با مقادیر کلیدی ترکیب شوند:

 

کوتاه نویسی خصوصیت هاي خاصیت background:

ھمه ی خاصیت ھای فوق که مربوط به خصوصیت background ھستند را می توان با ھم در یک خط ادغام کرد.

قاعده کلی :

Background: background-color | background-image | background-repeat | background-attachment

| background-position;

ھر پنج مقدار ممکن برای background را به طور ھمزمان می توان استفاده کرد. درضمن ترتیب قرار گرفتن خاصیت ھانیز مھم نمی باشد. و اگر مقداری برای یکی از خاصیت ھا ذکر نشود مقدار پیشفرض آن خاصیت در نظر گرفته میشود.

 

بسیار خب تا به اینجا کار ما با کار با پس زمینه به پایان رسید،

اموزش طراحی سایت با CSS !! ادامه اموزش در جلسه بعدی…