گیفت کارت آیتونز
نمایش نتایج: از 1 به 1 از 1

موضوع: خواص مقدماتی CSS

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    5.1.5
    سن
    23
    نوشته ها
    4,060
    مورد پسند
    2,645 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 17.0
    میزان امتیاز
    465

    پیش فرض خواص مقدماتی CSS

    خطوط حاشيه در CSS :
    با استفاده از مجموعه خواص border در CSS ، می توان برای بيشتر عنصرهای HTML خطوط حاشيه تعيين کرد . خطوط حاشيه خطوطي هستند ، که به دور عنصر مورد نظر کشيده می شوند .
    توضيح : خطوط حاشيه به دور يک عنصر در چهار جهت بالا ، پايين ، راست و چپ کشيده می شوند . در CSS می توان هر يک از اين خواص را به تنهايي تعريف کرده و برای هر کدام خواص جداگانه ای مثل رنگ ، ضخامت و ... تعيين کرد .
    ما ابتدا در اين قسمت خاصيت border را معرفی کرده و سپس تعيين آن را برای جهت های مختلف توضيح می دهيم :

    خاصيت border :
    خاصيت چند مقداری جهت دريافت کليه ویژگی های برای حاشيه کامل به دور عنصر است ، که هر يک از اين ويژگی ها بايد به ترتيب زير وارد شود :
    border : [ border-width ] [ border-style ] [ border-color ]
    مجموعه خواص border :

    مجموعه خواص border
    نام خاصيت نوع خاصيت شرح
    border-width thin
    medium
    thick
    length
    توسط اين خاصيت می توان ضخامت خطوط حاشيه را به وسيله يکی از حالت های زير تعيين کرد :
    - thin : در اين حالت خطوط حاشيه نازک خواهند بود .
    - medium : در اين حالت خطوط حاشيه متوسط خواهند بود .
    - thick : در اين حالت خطوط حاشيه ضخيم خواهند بود .
    - length : در اين حالت صخامت خطوط حاشيه را بر حسب واحدی مثل پيکسل ( pixel ) يا نقطه ( pt ) تعيين می کنيم .
    border-style none
    hidden
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    توسط اين خاصيت می توان حالت خطوط حاشيه را بر حسب يکی از حالت های زير تعيين کرد :
    - none : در اين حالت هيچ خطی به عنوان خطوط حاشيه عنصر نمايش داده نمی شود .
    - hidden : در اين حالت خطوط حاشيه مخفی هستند .
    - dotted : در اين حالت خطوط حاشيه به صورت نقطه نقطه نمايش داده می شوند .
    - dashed : در اين حالت خطوط حاشيه به صورت بريده بريده نمايش داده می شوند .
    - solid : در اين حالت خطوط حاشيه به صورت معمولی نمايش داده می شوند .
    - doubled : در اين حالت خطوط حاشيه به صورت دو خطی نمايش داده می شوند .
    - groove : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ پر رنگ تر از خطوط ديگر هستند .
    - ridge : در اين حالت خطوط حاشيه به صورت 3D با طيف رنگی نمايش داده می شوند .
    - inset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط بالايي و سمت چپ دارای سايه و تيره تر از خطوط ديگر هستند .
    - outset : در اين حالت خطوط حاشيه به صورت 3D نمايش داده می شوند که معمولا خطوط پايينی و سمت راست دارای سايه و تيره تر از خطوط ديگر هستند .
    border-color نام رنگ
    rgb (r,g,b)
    عدد هگزادسيمال
    تعيين کننده رنگ خطوط حاشيه است . رنگ میتواند به روش های زير تعيين شود :

    1. نام رنگ مثل blue يا red .
    2. تعيين رنگ به وسيله تابع rgb به صورت زير :
      ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb
      اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود .
      Example : rgb (10,65,232)
    3. نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال :
      ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز #
      Example : #08FF00
    مثال : در CSS می توان به بسياری از عناصر خطوط حاشيه داد . همچنين می توان هر يک از خواص border را به صورت جدا و يا در قالب خاصيت چند مقداری وارد کرد . به مثال های زير دقت کنيد :
    مثال border
    در مثال زير به يک جدول و خانه های آن خاصيت border داده ايم . در حالت اول به صورت تکی و در حالت دوم به صورت خاصيت چند مقداری اين کار را کرده ايم . در خاصيت border بهتر است به صورت چند مقداری عمل کنيم .
    نکته مهم : در جدول بايد خاصيت border را بر هر يک از خانه های جدول ( تگ td ) به صورت جداگانه اعمال کنيم . خواص هر خانه می تواند کاملا با ديگران متفاوت باشد .
    حالت اول
    < table cellspacing="0" style="border-color: Blue; border-style: solid; border-width: medium; width: 500px" >
    < tr >
    < td style="border-color: Blue; border-style: solid; border-width: medium" >
    Cell 1
    < /td >
    < td style="border-color: Green; border-style: solid; border-width: medium" >
    Cell 2
    < /td >
    < /tr >
    < /table >
    کد
    Cell 1 Cell 2
    خروجی
    حالت دوم
    < table cellspacing="0" style="border: solid medium blue ; width: 500px" >
    < tr >
    < td style= "border: solid medium blue" >
    Cell 1
    < /td >
    < td style= "border: solid medium green" >
    Cell 2
    < /td >
    < /tr >
    < /table >
    کد
    Cell 1 Cell 2
    خروجی
    در حالت زير خواص متفاوتی را برای هر کدام از خانه های جدول تعيين کرده ايم .
    < table cellpadding="5" cellspacing="5" style="border: solid medium blue; width: 500px" >
    < tr >
    < td style="border: solid thin blue" >
    Cell 1 solid , thin
    < /td >
    < td style="border: dashed medium blue" >
    Cell 2 dashed , medium
    < /td >
    < td style="border: double thick maroon" >
    Cell 3 double , thick
    < /td >
    < /tr >
    < tr >
    < td style="border: dotted thick green" >
    Cell 4 dotted , thick
    < /td >
    < td style="border: outset medium green" >
    Cell 5 outset , medium
    < /td >
    < td style="border: inset medium red" >
    Cell 6 inset , medium
    < /td >
    < /tr >
    < tr >
    < td style="border: ridge medium red" >
    Cell 7 ridge , medium
    < /td >
    < td style="border: groove medium red" >
    Cell 8 groove , medium
    < /td >
    < td style="border: hidden medium blue" >
    Cell 9 hidden , medium
    < /td >
    < /tr >

    < /table >
    کد
    Cell 1
    solid , thin
    Cell 2
    dashed , medium
    Cell 3
    double , thick
    Cell 4
    dotted , thick
    Cell 5
    outset , medium
    Cell 6
    inset , medium
    Cell 7
    ridge , medium
    Cell 8
    groove , medium
    Cell 9
    hidden , medium
    خروجی


    تکته مهم : خطوط حاشيه برای هر عنصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود . در CSS می توان تعيين يا عدم تعيين و خصوصيات خط حاشيه را برای هر جهت به صورت جدا مقدار دهی کرد .
    1 ) تعيين به صورت خاصيت چند مقداری :
    هر يک از خواص border-color , border-width , border-style معرفی شده در قسمت بالا می توانند خصوصيات 4 جهت خطوط حاشيه به دور يک عنصر را به صورت کامل در قالب يک خاصيت به شرح زير دريافت کنند :
    border- style : خط بالاstyle خط راستstyle خط پايينstyle خط چپstyle
    border- width : خط بالاwidth خط راستwidth خط پايينwidth خط چپwidth
    border- color : خط بالاcolor خط راستcolor خط پايينcolor خط چپcolor

    مثال : به طور مثال اگر خاصيت border-color برای يک خانه جدول به صورت زير تنظيم شود ، داريم :
    border-color : Red Black Blue Green ;
    به اين معنی است که رنگ خط حاشيه بالا قرمز ، رنگ حاشيه راست مشکی ، رنگ حاشيه پايين آبی و رنگ حاشيه چپ سبز خواهد بود .
    Example
    < table style="border: solid 2px maroon; width: 500px; height: 100px" >
    < tr >
    < td style="border-style: solid dashed solid dashed; border-color: Red Blue Green black" >
    Cell 1
    < /td >
    < td style="border-style: dashed solid dashed solid; border-color: Green Black Red Blue" >
    Cell 2
    < /td >
    < /tr >
    </table>
    کد
    Cell 1 Cell 2
    خروجی
    2 ) تعيين به صورت خاصيت تک مقداری :
    هر يک از خواص فوق را می توان به صورت تک مقداری نيز ، مقدار دهی کرد . مجموعه خواص جدول زير در برگيرنده کليه صفات ممکن برای خطوط 4 گانه هستند :
    نام خاصيت شرح
    border-right در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت راست عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :
    border-right : [ border-right-width] [ border-right-style ] [ border-right-color ]
    border-top در برگيرنده خواص کلی خط حاشيه برای خط حاشيه بالای عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :
    border-top : [ border-top-width] [ border-top-style ] [ border-top-color ]
    border-bottom در برگيرنده خواص کلی خط حاشيه برای خط حاشيه پايين عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :
    border-bottom : [ border-bottom-width] [ border-bottom-style ] [ border-bottom-color ]
    border-left در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت چپ عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است :
    border-left : [ border-left-width] [ border-left-style ] [ border-left-color ]
    border-right-color رنگ خط حاشيه سمت راست عنصر را تعيين می کند .
    border-top-color رنگ خط حاشيه بالای عنصر را تعيين می کند .
    border-bottom-color رنگ خط حاشيه پايين عنصر را تعيين می کند .
    border-left-color رنگ خط حاشيه سمت چپ عنصر را تعيين می کند .
    border-right-style style خط حاشيه سمت راست عنصر را تعيين می کند .
    border-top-style style خط حاشيه بالای عنصر را تعيين می کند .
    border-bottom-style style خط حاشيه پايين عنصر را تعيين می کند .
    border-left-style style خط حاشيه سمت چپ عنصر را تعيين می کند .
    border-right-width پهنای خط حاشيه سمت راست عنصر را تعيين می کند .
    border-top-width پهنای خط حاشيه بالای عنصر را تعيين می کند .
    border-bottom-width پهنای خط حاشيه پايين عنصر را تعيين می کند .
    border-left-width پهنای خط حاشيه سمت چپ عنصر را تعيين می کند .
    مثال : به مثال زير و نحوه تعيين خواص برای خطوط حاشيه خانه جدول توجه کنيد . برای دريافت اطلاعات راجع به هر خاصيت موس را چند لحظه روی کد آن نگه داريد :
    Example
    < table style="border: solid 2px maroon; width: 500px; height: 100px" >
    < tr >
    < td style =" border-top: dotted 3px green ; border-bottom-color: Red; border-bottom-style : double ; border-bottom-width : 2px; border-right: dashed 2px blue ; border-left: dashed 1px yellow" >
    Cell 1
    < /td >
    < /tr >

    < /table >
    کد
    Cell 1
    خروجی


    امید وارم که از این آموزش خوشتون بیاد
    بدرود
    موفق باشید

    کاربر مقابل از Patch Master بابت این پست مفید تشکر کرده است:

    mox




  2. گیفت کارت آیتونز

اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش تصویری ساخت فیلد بصورتی مولتی سلکت (بازی سنتر)
    توسط sr.major در انجمن آموزش های وی بولتین
    پاسخ: 14
    آخرين نوشته: 2013/03/22, 11:19 AM
  2. پاسخ: 0
    آخرين نوشته: 2012/02/10, 01:49 PM
  3. قالب زیبا و سبک آی تی ست یا همون آی تی تو نت
    توسط viera در انجمن استایل 3.8.x
    پاسخ: 94
    آخرين نوشته: 2012/01/08, 02:29 PM
  4. اسکریپت مولتی هاست لعنتی رو چجوری فارسی کنم؟!
    توسط Dark Knight در انجمن بحث آزاد
    پاسخ: 5
    آخرين نوشته: 2011/06/12, 07:58 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •