آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خواص مقدماتی CSS

پس زمينه Background :

از خاصيت پس زمينه ( background ) در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه يک عنصر مثل جدول يا صفحه استفاده می شود .

خاصيت background :

خاصيت چند مقداری برای دريافت کليه ويژگی های پس زمينه عنصر است که هر يک از ويژگی ها بايد به ترتيب زير در خاصيت background وارد شود :

background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]

توجه : هر يک از خواص فوق را می توان به صورت تکی نيز ، تعريف و مقدار دهی کرد . به مثال های پايين صفحه دقت کنيد .

در جدول زير هر يک از ويژگی های فوق را بررسی می کنيم :

خواص background
نام خاصيت نوع خاصيت شرح
background-color نام رنگ
rgb (r,g,b)
عدد هگزادسيمال
تعيين کننده يک رنگ به عنوان پس زمينه عنصر است . رنگ میتواند به روش های زير تعيين شود :
  1. نام رنگ مثل blue يا red .
  2. تعيين رنگ به وسيله تابع rgb به صورت زير :
    ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
    اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود .

    Example : rgb (10,65,232)

  3. نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال :
    ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #

    Example : #08FF00

background-image URL
مسير فايل
مسير کامل يک عکس را که قرار است به عنوان پس زمينه عنصر استفاده شود ، را تعيين می کند .
background-repeat repeat
repeat-x
repeat-y
no-repeat
چنانچه عکس انتخابی به عنوان پس زمينه يک عنصر از اندازه آن عنصر کوچکتر باشد ، تعيين می کند که آيا با تکرار عکس در سطح پس زمينه عنصر ، کل آنرا بپوشاند يا خير . که حالت های تکرار به صورت زير می تواند باشد :
- repeat : عکس در جهت افقی و عمودی تکرار خواهد شد .
- repeat-x : عکس فقط در جهت محورها x ها يعنی افقی تکرار خواهد شد .
- repaet-y : عکس فقط در جهت محور y ها يعنی عمودی تکرار خواهد شد .
- no-repaet : عکس در هيچ جهتی تکرار نخواهد شد ، که انتخاب پيش فرض است .
background-attachement scroll
fixed
تعيين می کند کند که آيا عکسی که به عنوان پس زمينه عنصر انتخاب شده است ، ثابت باشد و يا با حرکت عنصر در هنگام بالا و پايين رفتن صفحه ، آن عکس نيز حرکت کند . اين مسئله در مواردی مثل تعيين پس زمينه برای کل يک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمايش در مرورگر است ، کاربرد دارد . که 2 حالت زير را می تواند داشته باشد :
- scroll : عکس با حرکت عنصر حرکت می کند .
- fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند .
background-position top
bottom
center
left
right
مکان شروع قرارگيری عکس را در پس زمينه عنصر تعيين می کند . اين حالت معمولا در هنگام کوچکتر بودن عکس از پس زمينه عنصر کاربرد دارد و می تواند يکی از حالت های زير باشد :
- top : بالای عنصر .
- bottom : پايين عنصر
- center : در مرکز عنصر .
- left : در سمت چپ عنصر .
- right : در سمت راست عنصر .

مثال : در جدول زير چندين حالت ويژگی background را در عنصر table و td نشان داده ايم :

Example
< table style="background-color: #10AA32" >
  < tr >
    < td >
       اين خانه جدول دارای رنگ پس زمينه جدول است
    < /td >

  < /tr >
  < tr >
    < td style="background-color: Blue" >
       اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت style آن تعيين شده است
    < /td >

  < /tr >

< /table >
کد
اين خانه جدول دارای رنگ پس زمينه جدول است
اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت style آن تعيين شده است
خروجی
در مثال دوم يک تصوير که کوچکتر از خانه جدول است ، به عنوان پس زمينه جدول تعيين شده است .
< table style= "background-image : url(../pic/bgexample.jpg) ; background-repeat : repeat ; background-attachment : fixed ; background-position : top ; width : 100% ; height : 200px" >
  < tr >
    < td >
      اين جدول دارای پس زمينه تصويری است
    < /td >

  < /tr >

< /table >
کد
اين جدول دارای پس زمينه تصويری است
خروجی

نکته مهم : در مثال دوم هر يک از ويژگی های background را به صورت تکی مقدار دهی کرده ايم . تمام آن ويژگی ها را می توان به صورت زير در خاصيت چند مقداری background نيز تعيين کنيم :

< table style="background : url(../pic/bgexample.jpg) repeat fixed top" >
... .

مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ، به مثال زير توجه کنيد :

Example
< p style="background-color: Green" >
   This paragraph has a background color .
< /p >
کد

This paragraph has a background color .

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟