آموزش css 2

شروع موضوع توسط bluekerm ‏28 فوریه 2010 در انجمن زبان HTML

  1. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    خب دوستان آموزش CSS رو شروع میکنیم. منبع این آموزش سایت w3school هستش و یک روز در میان آموزشها رو در سایت قرار میدم.
    از توضیح مفاهیم اولیه مثل استایل ، کاربرد CSSو... فاکتور میگیرم با این فرض که شما اینارو میدونید!
    بریم سراغ آموزش
    سه روش برای استفاده از کدهای CSS وجود دارد:
    1)external style sheet (شیوه نامه ی خارجی ): در این روش کدهای css رو در یک فایل جداگانه نوشته و با پسوند .css ذخیره میکنیم. سپس در هر صفحه ی html ای که نیاز داشتید ، فایل css رو لینک میکنید. برای لینک کردن از کد زیر استفاده می کنیم:
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<link rel="stylesheet" type="text/css" href="mystyle.css" />[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    این استایل شیت رو در هر برنامه ی ویرایشگر متنی میتونید تولید کنید ولی به دو نکته حتما دقت کنید:
    1) حتما فایل با پسوند css ذخیره بشه
    2) در این فایل از هیچگونه تگ html استفاده نکنید.

    2)internal style sheet ( شیوه نامه ی داخلی):در این روش کدهای css رو داخل صفحه ی html مینویسم. در این صورت استایل های تعریف شده فقط در همان صفحه html قابل استفاده هستند. برای استفاده از این روش در قسمت head و با تگ style استایل ها را تعریف میکنیم:
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]  ……….. [/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    3)inline style : در این روش کدهای css رو برای تگ خاصی و درون تگ خاصی مینویسیم. برای این کار از خصوصیت style هر تگ استفاده میکنیم. مثال:
    <p style="color:red;"> This is a test!</p>
    حال این سوال پیش میاد که کدوم یکی از این روش ها رو استفاده کنیم؟
    در صورتی که کدهای شما زیاد باشن و برای چند صفحه بخواهید استفاده کنید بهتره از روش اول استفاده کنید ولی اگه کدها کمه و مربوط به یک صفحه html میشه بهتره از روش دوم استفاده کنید. روش سوم زیاد توصیه نمی شه ولی در موارد جزئی ازش استفاده کنید. البته برای یه صفحه میتونید از هر 3 روش هم استفاده کنید. در این صورت اگه یه استایل رو به هر 3 صورت هم تعریف کرده باشید ، اولویت با روش inline style است و بعد از اون اولویت با internal style sheet است و در آخر external style sheet.

    هر دستور css از دو قسمت تشکیل شده : سلکتور و declaration ( متاسفانه معادل فارسی خوبی برای این کلمه پیدا نکردم!)
    سلکتور در واقع همان تگ یا جزیی از عناصر html است که قراره استایل رو براش تعریف کنیم. قسمت declaration شامل یک خصوصیت (ویژگی ، property) و مقداری برای آن خصوصیت است.
    برای نوشتن دستورات css میتونید به چند روش عمل کنید.
    1)یک راه استفاده از تگ هاست. مثل :
    کد (Text):
     p {color:red;}
    این کد باعث میشه همه ی تگهای P با رنگ قرمز نوشته بشن.
    2)راه دیگه استفاده از id است. در این روش از یه اسم دلخواه به همراه # برای تعریف استایل استفاده میشه. و در تگ html ای که میخواهیم این استایل به آن اعمال شود از خصوصیت id اش برای ارجاع به استایل استفاده می کنیم. مثال:
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]                                            #setred {color:red;}[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<p id="setred"> Red color! </p>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<h1> Test </h1>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<h1 id="setred"> RED ! </h1>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    این کدها رو نوشته و خروجی رو مشاهده کنید! میبینید که تگ p و تگh1 دوم که id اونها مقداردهی شده با رنگ قرمز نوشته میشوند.
    3)روش دیگه استفاده از کلاس هاست. کلاسها رو با . شروع میکنیم و در تگهای html از خصوصیت class برای ارجاع به استایل استفاده میکنیم.
    مثال:
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]                                            .setred {color:red;}[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<p> Text in default color </p>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<h1 class="setred"> RED ! </h1>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    در اینجا هم تگ p اول و تگ h1 با رنگ قرمز نوشته میشن.
    همچنین میتونیم کلاسها رو برای تگ خاصی تعریف کنیم. مثل:

    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]                                            p.setred {color:red;}[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<p>text in default color </p>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<h1 class="setred">NOT RED ! </h1>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    بعد از اجرای کدهای بالا مشاهده میکنید که کلاس setred فقط برای تگهای p کار میکنه! یعنی برای تگ h1 هیچ تاثیری نداره چون موقع تعریف استایل فقط برای تگ p تعریف شده.
    *نکته: اسم کلاس ها و id ها رو با عدد شروع نکنید! چون فقط IE از اینجور اسمها پشتیبانی میکنه! یعنی مرورگرهای دیگه اصلا کلاسهای شما رو تشخیص نمیدن و استایلها رو اعمال نمی کنن.

    خب امیدوارم خسته نشده باشین. این از استارت آموزش CSS سوالی در این مورد داشتین در خدمتم. ادامه ی آموزش در :oops:11/12/88
     
    آخرین ویرایش: ‏28 فوریه 2010
    نوشته شده توسط bluekerm در ‏28 فوریه 2010
    ahmad_it، Photo Maker، aria-adword و 23 نفر دیگر از این ارسال تشکر کرده اند.
  2. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    قبل از هر چیز بگم که به یه نکته دقت کنین وقتی تو یه صفحه html میخواهین از css استفاده کنین حتما قسمت DOCTYPE رو قبل از هر چیزی بنوسین که مرورگرها مخصوصا IE از همه ی css ها پشتیبانی کنه! البته اگه از نرم افزارهای طراحی وب استفاده میکنین بصورت خودکار این کدها ایجاد میشن!
    نوشتن توضیحات در css : برای نوشتن comment یا توضیحات برای کدهای css میتونید از علامت های */ و /* استفاده کنید مثل :
    کد (Text):
     [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]/* set the p tag color */[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]P {color:red;}[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    در واقع هر چیزی رو که در توضیحات می نویسید ، مرورگر ها اونها رو نادیده می گیرن پس می تونید هر چیزی بنویسید !
    مزایای استفاده از comment ها: اگه برای قسمت های پیچیده ی کدها توضیحات بنویسید و بعد از مدتی دوباره برید سراغ کدهاتون میفهمید که چیکار کردید .

    CSS BACKGROUND
    خصوصیت background در css برای تعریف جلوه هایی برای پس زمینه عناصر html استفاده میشه. برای این کار میتونیم از پنج ویژگی (property) استفاده کنیم:
    1. Background-color
    2. Background-image
    3. Background-repeat
    4. Background-position
    5. Background-attachment
    background-color
    :این ویژگی برای مشخص کردن رنگ پس زمینه استفاده میشه. مثال:
    کد (Text):
    body {background-color:#60c40e;}
    *نکته: در کلیه کدهای css برای تعیین رنگ ها سه راه وجود داره:
    · تعیین رنگها بصورت rgb : مثل-> color: rgb(250,0,0) ( توی پرانتز 3 تا عدد مینویسین بین 0 تا 255 . عدد اول مقدار قرمزی رنگ ، عدد دوم مقدار سبزی رنگ و عدد سوم مقدار آبی رنگ رو مشخص میکنه)
    · تعیین رنگها بصورت یه مقدار هگزادسیمال: مثل -> color: #ff0000
    · نوشتن اسم رنگ : مثل-> color:blue
    البته در صورتیکه از نرم افزارهایی مثل dreamweaver استفاده میکنید بعد از نوشتن color: پانل رنگها باز میشه و رنگ رو از پانل انتخاب میکنید!
    background-image
    : این ویژگی برای مشخص کردن تصویر پس زمینه عناصر html است. مثال:
    کد (Text):
    body { background-image:url('bg.jpg');}
    background-repeat :به صورت پیش فرض عکسی که با background-image تعیین میشه از هر طرف ( عمودی و افقی ) تکرار میشه تا کل سطح پس زمینه رو بپوشونه . برای کنترل چگونگی تکرار عکس از این ویژگی background-repeat استفاده میکنیم.
    مثال: میخواهیم عکس پس زمینه فقط به صورت افقی تکرار بشه:
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body { background-image:url('bg.jpg');[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]           background-repeat:repeat-x; }[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    background-position: موقعیت قرار گرفتن عکس پس زمینه توسط این ویژگی تعیین میشه.
    مثال: عکس پس زمینه بدون تکرار و در قسمت بالا سمت راست قرار گیرد.
    کد (Text):

     
    کد (Text):
     [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body {  background-image:url('bg.jpg');[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]                          background-repeat:no-repeat;[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]            background-position:top right;}[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    background-attachment: مشخص میکنه عکس پس زمینه ثابت باشه یا همراه بقیه صفحه scroll بشه.
    *نکته : میتونیم کل ویژگی های پس زمینه رو بصورت خلاصه بنویسیم .
    مثال :
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body {  background-image:url('bg.jpg');[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]                          background-repeat:no-repeat;[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]            background-position:top right;[/SIZE][/FONT]

    [FONT=Tahoma][SIZE=3]            background-attachment:fixed;}[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    بجای نوشتن کد بالا میتونیم این جوری بنویسیم:
    کد (Text):
    Body { background  url('bg.jpg')  no-repeat  fixed  top right; }
    وفتی از این شکل خلاصه استفاده می کنید ترتیب نوشتن باید اینجوری باشه :
    { background background-color background-image background-repeat background-attachment background-position ; }
    در این قسمت کلیه خصوصیات و مقادیری که میتونین برای هر کدوم استفاده کنین ذکر شده:


    background-attachment

    scroll
    fixed


    background-color

    color-rgb
    color-hex
    color-name
    transparent


    background-image

    url(URL)
    none


    background-position

    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    x% y%
    xpos ypos



    background-repeat

    repeat
    repeat-x
    repeat-y
    no-repeat

    ادامه در 13/12/88
     
    آخرین ویرایش: ‏2 مارس 2010
    نوشته شده توسط bluekerm در ‏2 مارس 2010
    ahmad_it، aria-adword، mazyar_f و 10 نفر دیگر از این ارسال تشکر کرده اند.
  3. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6

    CSS TEXT

    color(1
    [FONT=&quot]: برای تعیین رنگ نوشته ، که به همون سه روش گفته شده موتونید مقداردهی کنید. [/FONT]

    [FONT=&quot]2)[/FONT]text-align [FONT=&quot] :[/FONT]این ویژگی برای تعیین ترازبندی افقی متن بکار میره. متن میتونه center ، left ، right ، justified باشد.
    [FONT=&quot]مثال:[/FONT]

    کد (Text):
    h1 (text-align:center;}                                                                                                                                    
    کد (Text):
     [SIZE=3]
      [/SIZE][LEFT][RIGHT][SIZE=3]   P {text-align:right;}[/SIZE][/RIGHT]
    [/LEFT]
     
    [FONT=&quot]3)[/FONT]text-decoration [FONT=&quot]: [/FONT][FONT=&quot]این ویژگی برای حذف یا اضافه کردن مدل هایی به متن استفاده می شه. مثلا حذف[/FONT]Underlineاز لینک های صفحه. مثال:
    کد (Text):
    a {text-decoration:none;}
    [FONT=&quot]*[/FONT]توصیه نمیشه که از underline برای نوشته هایی که لینک نیستند استفاده کنید!
    [FONT=&quot]4)[/FONT]text-tarnsform [FONT=&quot]: [/FONT]این ویژگی برای تعیین حروف کوچک و بزرگ استفاده می شود. میتونید از مقدارهایuppercase ، lowercase، capitalize استفاده کنید. (capitalize ابتدای هر کلمه را با حروف بزرگ مینویسه.)
    [FONT=&quot]5)[/FONT] text-indent [FONT=&quot]: برای تعیین تورفتگی سطر اول متن استفاده می شه. مثال[/FONT][FONT=&quot]:[/FONT]
    کد (Text):
    p {text-indent:50px;}
    اینم خصوصیات کلی و مقادیر ممکن:

    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین رنگ متن[/FONT]
    [FONT=&quot]color[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین جهت متن (راست به چپ یا چپ به راست)[/FONT]
    [FONT=&quot]ltr
    rtl[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین فاصله میان خطوط[/FONT]
    [FONT=&quot]normal
    number
    length
    %
    [/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]افزایش یا کاهش فاصله میان کاراکترها[/FONT]
    [FONT=&quot]normal
    length[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تراز کردن متن در یک عنصر[/FONT]
    [FONT=&quot]left
    right
    center
    justify[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین مدل خاص متن[/FONT]
    [FONT=&quot]none
    underline
    overline
    line-through
    blink[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تورفتگی اولین سطر[/FONT]
    [FONT=&quot]length
    %[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]نحوه ی نمایش حروف[/FONT]
    [FONT=&quot]none
    capitalize
    uppercase
    lowercase[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین ترازبندی عمودی[/FONT]
    [FONT=&quot]baseline
    sub
    super
    top
    text-top
    middle
    bottom
    text-bottom
    length
    %[/FONT]
    [FONT=&quot]
    [/FONT]
    [FONT=&quot]تعیین نحوه قرارگیری فضای خالی در یک عنصر[/FONT]
    [FONT=&quot]normal
    pre
    nowrap[/FONT]
    [FONT=&quot]1[/FONT]
    [FONT=&quot]افزایش یا کاهش فضای خالی میان کلمات[/FONT]
    [FONT=&quot]normal
    length[/FONT]
    [FONT=&quot]
    [/FONT]

    [FONT=&quot]خب حالا یه مثال کلی میزنم . مثال:[/FONT]
    کد (Text):
     [/LEFT]
    [SIZE=3]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">[/SIZE]
    [SIZE=3]<"html xmlns="http://www.w3.org/1999/xhtml>[/SIZE]
    [SIZE=3]<head>[/SIZE]
    [SIZE=3]</meta http-equiv="Content-Type" content="text/html"; charset=utf-8>[/SIZE]
    [SIZE=3]<title>Untitled 1</title>[/SIZE]
    [SIZE=3]<"style type="text/css>[/SIZE]
    [SIZE=3] .co {color:red;}[/SIZE]
    [SIZE=3] . indent { text-indent:10%;}[/SIZE]
    [SIZE=3].dec {text-decoration:none;}[/SIZE]
    [SIZE=3]</style>[/SIZE]
    [SIZE=3]</head>[/SIZE]
    [SIZE=3]<body>[/SIZE]
    [SIZE=3]<p class="co"> Change the color ! </p>[/SIZE]
    [SIZE=3]<p class="indent"> This paragraph has 10% indent in first line!paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>[/SIZE]
    [SIZE=3]<p style="text-indent:50px;"> And this paragraph has 50px indent! </p>[/SIZE]
    [SIZE=3]<a class="dec" href="#"> This is a link without underline!</a>[/SIZE]
    [SIZE=3]<p class="space"> OH! Spaces are unusuall! aren't they?! </p>[/SIZE]
    [SIZE=3]</body>[/SIZE]
    [SIZE=3]</html>[/SIZE]
    [LEFT]
    [FONT=&quot]*نکته: بین مقدار خصوصیات و واحد اونها فاصله نزارین !(مثلا ننویسین [/FONT]text-indent:50 px ) چون اینطور نوشتن فقط توسط IE پشتیبانی میشه! (البته خودم با firefox امتحان کردم مشکلی نداشت! ولی طبق گفته ی سایت w3school ممکنه مشکل پیش بیاد)

    [FONT=&quot]CSS FONT[/FONT]
    [FONT=&quot]font-family[/FONT] : برای تعیین فونت استفاده میشه. مثال:
    کد (Text):
    p { font-family:"Times New Roman",Times,Serif;}
    همون طور که در مثال بالا دیدید اگه اسم فونت بیشتر از یه کلمه است باید اونو با " " بنویسید.
    font-style : برای italic نوشتن از این ویژگی استفاده میشه که میتونه این مقادیر رو بگیره : normal-italic-oblique حالت سوم هم یه جور italic هستش .
    font-size : برای تعیین سایز.
    بهتره سایز فونت نوشته هاتون رو حتما مشخص کنید ( یا بر حسب px یا بر حسب em. 1em=16px ) در صورتیکه این کار رو نکنید اگه کاربر سایز فونت ها رو برای مرورگر خودش تغییر داده باشه سایت شما بهم میزیزه! و سایز فونت های سایت شما هم تغییر میکنه !
    font-weight: برای تعین ضخامت فونت ها.
    font-variant: اگه این خصوصیت با small-caps تعیین شده باشه متن نوشته شده اینجوری میشه:
    کد (Text):
    <p style=" font-variant:small-caps;"> This is a tesT </p>
    خروجی :
    This is a tesT
    در واقع این ویژگی میاد همه ی حروف رو با بزرگ مینویسه ولی اونایی رو که شما با بزرگ تایپ کردین رو بزرگتر میکنه :D


     
    آخرین ویرایش: ‏4 مارس 2010
    نوشته شده توسط bluekerm در ‏4 مارس 2010
    hadi71120000، aria-adword، mazyar_f و 11 نفر دیگر از این ارسال تشکر کرده اند.
  4. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    [FONT=&quot]LINK STYLE[/FONT]
    [FONT=&quot]خب حالا میخوایم با [FONT=&quot]css[/FONT][FONT=&quot] یرای لینکها استایل بنویسیم. لینک ها در چهار وضعیت زیر قرار میگیرن:[/FONT][/FONT]
    [FONT=&quot]1)[FONT=&quot]a:link[/FONT][FONT=&quot] -> لینک نرمال ( کلیک نشده)[/FONT][/FONT]
    [FONT=&quot]2)[FONT=&quot]a:visited[/FONT][FONT=&quot]-> لینکی که کاربر آنرا مشاهده کرده[/FONT][/FONT]
    [FONT=&quot]3)[FONT=&quot]a:hover[/FONT][FONT=&quot] -> لینکی که موس روی آن قرار میگیره (کلیلک نشده! میتونیم بگیم کاربر با موس فقط به اون لینک اشاره میکنه)[/FONT][/FONT]
    [FONT=&quot]4)[FONT=&quot]a:active[/FONT][FONT=&quot] -> دقیقا همون لحظه ای که روی لینک کلیک میشه[/FONT][/FONT]
    [FONT=&quot]لینک ها رو میتونین با هر ویژگی دلخواهی که میخواین استایل بدین مثل [FONT=&quot]color – font-family – background-color- text-decoration, …[/FONT][/FONT]
    [FONT=&quot]مثال:[/FONT]
    کد (Text):
    [/SIZE][/FONT][/LEFT][/RIGHT]
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]a:hover { background-color:#0F0;}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<a href="#"> This is a test! </a>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [FONT=&quot] [/FONT]​
    [FONT=&quot]CSS LISTS[FONT=&quot][/FONT][/FONT]
    [FONT=&quot]در [FONT=&quot]html[/FONT][FONT=&quot] دو نوع لیست داشتیم : [/FONT][/FONT]
    [FONT=&quot]1)لیستهای نامرتب که آیتم های لیست با [FONT=&quot]bullet[/FONT][FONT=&quot] ها علامت گذاری میشدن[/FONT][/FONT]
    [FONT=&quot]2)لیستهای مرتب که آیتم های لیست با شماره یا علامت گذاری میشدن[/FONT]
    [FONT=&quot]list-style-type [FONT=&quot]: نوع علامتهای لیست رو میتونین با این ویژگی مشخص کنین[/FONT][/FONT]
    [FONT=&quot]مثال:[/FONT]
    کد (Text):
    [/SIZE][/FONT][/LEFT][/RIGHT]
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3].listmark { list-style-type:circle;}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<ul class="listmark">[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> a </li>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> b </li>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> c </li>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</ul>[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [FONT=&quot]بعضی از ویژگی ها برای لیست های نامرتب هستن و بعضی ها برای لیست های مرتب:[/FONT]
    [FONT=&quot]مقادیر برای لیستهای نامرتب[/FONT]​


    [FONT=&quot]none[/FONT]​
    [FONT=&quot]بدون علامت[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]disc[/FONT]​
    [FONT=&quot]پیش فرض. دایره توپر[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]circle[/FONT]​
    [FONT=&quot]دایره تو خالی[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]square[/FONT]​
    [FONT=&quot]مربع[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot] [/FONT]
    [FONT=&quot]مقادیر برای لیستهای مرتب[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot] [/FONT]​


    [FONT=&quot]*armenian[/FONT]​
    [FONT=&quot]عدد گزاری سنتی ارمنی[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]decimal[/FONT]​
    [FONT=&quot]عدد[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]*decimal-leading-zero[/FONT]​
    [FONT=&quot]عدد که با 0 شروع میشود[FONT=&quot] (01, 02, 03, ...)[/FONT][/FONT]​
    [FONT=&quot]*georgian[/FONT]​
    [FONT=&quot]عددگزاری قدیمی [FONT=&quot]georgian[/FONT][FONT=&quot] [/FONT][FONT=&quot] (an, ban, gan, ...)[/FONT][/FONT]​
    [FONT=&quot]lower-alpha[/FONT]​
    [FONT=&quot]حروف کوچک الفبا[FONT=&quot] [/FONT][FONT=&quot](a, b, c, d, e, ...)[/FONT][/FONT]​
    [FONT=&quot]*lower-greek[/FONT]​
    [FONT=&quot]یونانی[FONT=&quot] [/FONT][FONT=&quot](alpha, beta, gamma, …)[/FONT][/FONT]​
    [FONT=&quot]*lower-latin[/FONT]​
    [FONT=&quot]The marker is lower-latin (a, b, c, d, e, …)[/FONT]​
    [FONT=&quot]lower-roman[/FONT]​
    [FONT=&quot] i, ii, iii, iv, v, …[/FONT]​
    [FONT=&quot]upper-alpha[/FONT]​
    [FONT=&quot]حروف بزرگ[FONT=&quot] (A, B, C, D, E, …) [/FONT][/FONT]​
    [FONT=&quot]*upper-latin[/FONT]​
    [FONT=&quot]حروف بزرگ[FONT=&quot] (A, B, C, D, E, …)[/FONT][/FONT]​
    [FONT=&quot]upper-roman[/FONT]​
    [FONT=&quot] I, II, III, IV, V, …[/FONT]​
    [FONT=&quot] [/FONT]
    [FONT=&quot]*نکته: [FONT=&quot]IE[/FONT][FONT=&quot] هیچکدام از ویژگی هایی که با * مشخص شده اند رو پشتیبانی نمیکنه! [/FONT][/FONT]
    [FONT=&quot]میتونید از یک عکس بعنوان علامت آیتمها استفاده کنید. برای این کار:[/FONT]
    کد (Text):
    ul { list-style-image:url('lstimg.gif');}
    [FONT=&quot]
    [/FONT]​
    [FONT=&quot]با نوشتن کد بالا ممکنه عکس در همه ی مرورگرها به یک شکل نمایش داده نشه . یعنی مکان قرارگیری عکس نسبت به آیتم های لیست همونی نشه که شما میخواین. برای این که این مشکلو حل کنیم:[/FONT]
    کد (Text):
    [/SIZE][/FONT][/LEFT][/RIGHT]
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]ul {[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]list-style-type:none;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]padding:0px;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]margin:0px;}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]li{[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-image:url('listimg.gif');[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-repeat:no-repeat;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-position:0px 5px;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]padding-left:20px;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [FONT=&quot][/FONT]​
     
    آخرین ویرایش: ‏7 مارس 2010
    نوشته شده توسط bluekerm در ‏7 مارس 2010
    aria-adword، mazyar_f، Morteza1371 و 7 نفر دیگر از این ارسال تشکر کرده اند.
  5. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    [FONT=&quot]CSS TABLES
    [/FONT] [FONT=&quot]Border[FONT=&quot] : برای تعیین حاشیه [/FONT][FONT=&quot](border)[/FONT][FONT=&quot] جدول ها از این ویژگی استفاده میکنیم. [/FONT]
    [/FONT] [FONT=&quot]مثال:
    [/FONT]
    کد (Text):
    table { border:2px solid black;}
    [FONT=&quot]border-collapse[FONT=&quot]: این ویژگی مشخص میکنه که حاشیه جدول ادغام بشه یا نه جدا باشه! با یه مثال توضیحش میدم :[/FONT]
    [/FONT] [FONT=&quot]مثال:
    [/FONT]
    کد (Text):
       [LEFT][RIGHT][FONT=Tahoma][SIZE=3][FONT=&quot]<[/FONT][FONT=&quot]style type="text/css"[/FONT][FONT=&quot]>[/FONT][/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]
      [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3] table { border-collapse:collapse ;[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]                    ;border-color:#300[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]                   border-width:2px ; [/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]                    border-style:dashed ;[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3] td {border:1px solid red ;} [/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]<table width="200" border="1">[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]   <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]</table>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    [FONT=&quot]اگه خروجی کد بالا رو مشاهده کنین میبینین که جاهیی که خطوط حاشیه جدول استایل دارن استایل سطر ها نادیده گرفته شده :( عکس ضمیمه شده رو نگاه کنین collapse.jpg )
    [/FONT]​
    [FONT=&quot]ولی اگه بجای [FONT=&quot]border-collapse:collapse[/FONT][FONT=&quot] از [/FONT][FONT=&quot]border-collapse:separate[/FONT][FONT=&quot] استفاده کنین استایل های جدول و سطر ها هر دو نشون داده میشه :[/FONT] ( عکس sep.jpg رو مشاهده کنین)

    [/FONT] [FONT=&quot]Width [FONT=&quot]و [/FONT][FONT=&quot]height[/FONT][FONT=&quot] : برای مشخص کردن عرض و طول جدول . مثال:[/FONT]
    [/FONT]
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Table { width:100%;}[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]Td { height:100px;}[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    [FONT=&quot]در مثال بالا جدولمون 100% صفحه رو میگیره و ارتفاع سطر هاش 100 پیکسل.
    [/FONT] [FONT=&quot]Text-align[FONT=&quot] : برای تعیین تراز افقی متن داخل جدول استفاده میشه. میتونه شامل مقادیر [/FONT][FONT=&quot]center, left , right , justify[/FONT][FONT=&quot] باشه.[/FONT]
    [/FONT] [FONT=&quot]Vertical-align[FONT=&quot] : برای تعیین تراز عموذی متن داخل جدول استفاده میشه. [/FONT]
    [/FONT] [FONT=&quot]مثال: در این مثال متن داخل خونه های جدول وسط و بالا تراز میشن:
    [/FONT]
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Td { text-align:center; [/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]        Vertical-align:top;}[/SIZE][/FONT][/RIGHT]
    [/LEFT]
     
    [FONT=&quot]Padding[FONT=&quot] : برای تعیین فاصله بین حاشیه و متن داخل جدول از این ویژگی استفاده میشه. این ویژگی رو برای [/FONT][FONT=&quot]td[/FONT][FONT=&quot] و[/FONT][FONT=&quot] th[/FONT][FONT=&quot] مینویسیم.[/FONT]
    [/FONT]
    کد (Text):
    Td { padding:30px;}
    [FONT=&quot]برای اینکه برای جدولتون یه عنوان بنویسین میتونین از تگ [FONT=&quot]caption[/FONT][FONT=&quot] استفاده کنین[/FONT]
    [/FONT] [FONT=&quot]مثال:
    [/FONT]
    کد (Text):
    [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"style type="text/css>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3] caption { caption-side:bottom; }[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]<table width="200" border="1">[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <caption> TABLE ONE </caption>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaap;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]    <td>asfsffdsfsp;</td>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

    [RIGHT][FONT=Tahoma][SIZE=3]</table>[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3][FONT=&quot]</[/FONT][FONT=&quot]body[/FONT][FONT=&quot]>[/FONT][/SIZE][/FONT]  
    [FONT=&quot]فکر کنم مثال کاملا واضحه . با [FONT=&quot]caption-side[/FONT][FONT=&quot] میتونین جای قرار گیری عنوان رو تعیین کنین.[/FONT]
    [/FONT] [FONT=&quot]*[FONT=&quot]IE8[/FONT][FONT=&quot] به بالا این ویژگی رو پشتیبانی میکنن.![/FONT][/FONT]
     

    پیوست ها:

    • collapse.jpg
      collapse.jpg
      اندازه فایل:
      کیلوبایت 7.3
      نمایش ها:
      15
    • sep.jpg
      sep.jpg
      اندازه فایل:
      کیلوبایت 9.2
      نمایش ها:
      9
    آخرین ویرایش: ‏9 مارس 2010
    نوشته شده توسط bluekerm در ‏9 مارس 2010
    aria-adword، pba.max، Morteza1371 و 7 نفر دیگر از این ارسال تشکر کرده اند.
  6. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    [FONT=&quot]CSS BOX MODEL
    [/FONT] [FONT=&quot]همه ی عناصر [FONT=&quot]css[/FONT][FONT=&quot] میتونن بعنوان جعبه هایی در نظر گرفته بشن. این مدل برای طرح بندی عناصر صفحه استفاده میشه برای درک بهتر این مدل شکل ضمیمه شده رو نگاه کنید. [/FONT]
    [/FONT] [FONT=&quot]خب همون طور که از شکل پیداست [FONT=&quot]content[/FONT][FONT=&quot] درواقع همون قسمت اصلی اطلاعات یه عنصر هستش. [/FONT][FONT=&quot]Border[/FONT][FONT=&quot] خطوط حاشیه اون محتوا [/FONT][FONT=&quot]padding[/FONT][FONT=&quot] ناحیه ای است بین محتوا ( و خطوط حاشیه ) و [/FONT][FONT=&quot]margin[/FONT][FONT=&quot] و [/FONT][FONT=&quot]margin[/FONT][FONT=&quot] هم فضای خالی دور هر عنصر هستش.[/FONT]
    [/FONT] [FONT=&quot]وقتی طول و عرض عنصری رو با [FONT=&quot]css[/FONT][FONT=&quot] و با ویژگی های [/FONT][FONT=&quot]width[/FONT][FONT=&quot] و[/FONT][FONT=&quot] height [/FONT][FONT=&quot] مشخص میکنین در واقع فقط فضای لازم برای نمایش محتوای هر عنصر رو مشخص می کنین. برای این که فضای کلی یه عنصر مشخص بشه از فرمولهای زیر استفاده میکنیم:[/FONT]
    [/FONT]
    [FONT=&quot]Total Width= width + left padding + right padding + left border + right border + left margin + right margin[/FONT]​
    [FONT=&quot]Total Height= height + top padding + bottom padding + top border + bottom border + top margin + bottom margin[/FONT]​
    [FONT=&quot]Border-style[FONT=&quot] : مشخص میکنه خطوط حاشیه چه جوری باشن[/FONT]
    [/FONT] [FONT=&quot]Border-width[FONT=&quot]: برای تعیین ضخامت خطوط حاشیه. هم میتونیم یه مقدار بر حسب پیکسل بدیم و هم از مقادیر [/FONT][FONT=&quot]thin , medium, thick[/FONT][FONT=&quot] استفاده کنیم.[/FONT]
    [/FONT] [FONT=&quot]Border-color[FONT=&quot]: برای تعیین رنگ خطوط حاشیه. میتونین بصورت شفاف نیز تعریف کنین. یعنی :[/FONT]
    [/FONT]
    کد (Text):
    Border-color: transparent;
    [FONT=&quot]در این صورت خطوط حاشیه دیده نمیشن!
    [/FONT] [FONT=&quot]در [FONT=&quot]css[/FONT][FONT=&quot] میتوینم برای جانب های یک عنصر [/FONT][FONT=&quot]border[/FONT][FONT=&quot] های مختلفی تعریف کنیم. مثال:[/FONT]
    کد (Text):
    [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]P { border-top-style:dotted;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-right-style:solid;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-bottom-style:dotted;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-left-style:solid;}[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]
    [/FONT][FONT=&quot]کد بالا رو می تونیم بصورت خلاصه تری هم بنویسیم:
    [/FONT] [FONT=&quot]به ترتیب : بالا – راست – پایین – چپ
    [/FONT]
    کد (Text):
    Border-style: dotted solid dotted solid;
    [FONT=&quot] و یا: بالا – راست+چپ – پایین
    [/FONT]
    کد (Text):
    Border-style: dotted solid dotted;
    [FONT=&quot] و یا : بالا+پایین – راست+ چپ
    [/FONT]
    کد (Text):
    Border-style: dotted solid;
    [FONT=&quot]علاوه بر این که میتونیم [FONT=&quot]style[/FONT][FONT=&quot] های مختلفی به جانب های [/FONT][FONT=&quot]border[/FONT][FONT=&quot] بدیم ، امکانش هست که هر کدوم از جانب ها رنگی خاص و ضخامتی خاص داشته باشن. مثال:[/FONT]
    کد (Text):
    [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-top-color:red;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-left-color:yellow;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-top-width:10px;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-left-width:20px;[/SIZE][/FONT][/RIGHT]
    [/LEFT]
    [FONT=Tahoma][SIZE=3]  
     
    [/FONT][FONT=&quot]
    CSS OUTLINE
    [/FONT][FONT=&quot]این ویژگی به خطی هستش دور عناصر .(دور [FONT=&quot]border[/FONT][FONT=&quot]) [/FONT]
    [/FONT]
    [FONT=&quot]تعیین رنگ[/FONT]​
    [FONT=&quot]color_name
    hex_number
    rgb_number
    [FONT=&quot]invert
    inherit[/FONT]
    [/FONT]​
    [FONT=&quot]تعیین استایل[/FONT]​
    [FONT=&quot]none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    inherit
    [/FONT]​
    [FONT=&quot]تعیین ضخامت[/FONT]​
    [FONT=&quot]thin
    medium
    thick
    length
    inherit
    [/FONT]​

    [FONT=&quot]CSS MARGIN
    [/FONT] [FONT=&quot]این ویژگی فضای اطراف یه عنصر رو مشخص میکنه و بدون رنگ هستش . برای فضای بالا- پایین – چپ- راست میتونیم مقادیر مختلفی داشته باشیم. ترتیب نوشتن هم مثل [FONT=&quot]border[/FONT][FONT=&quot] هاست. ( یعنی بالا- راست-پایین-چپ و ...)[/FONT]
    [/FONT] [FONT=&quot]سه جور میتونین این خصوصیت رو مقدار دهی کنین:
    [/FONT] [FONT=&quot]1)[FONT=&quot]auto [/FONT][FONT=&quot] : در این حالت مرورگر حاشیه ([/FONT][FONT=&quot]margin[/FONT][FONT=&quot]) ها رو تنظیم میکنه[/FONT]
    [/FONT] [FONT=&quot]2)[FONT=&quot]length[/FONT][FONT=&quot]: در این صورت حاشیه های ثابتی بر حسب [/FONT][FONT=&quot]px,em,pt,…[/FONT][FONT=&quot] رو تعیین میکنیم[/FONT]
    [/FONT] [FONT=&quot]3)% :[FONT=&quot] بصورت درصدی مشخص میکنیم[/FONT]
    [/FONT]
    [FONT=&quot]فضای پایین[/FONT]​
    [FONT=&quot]auto
    length
    %
    [/FONT]​
    [FONT=&quot]فضای چپ[/FONT]​
    [FONT=&quot]auto
    length
    %
    [/FONT]​
    [FONT=&quot]فضای راست[/FONT]​
    [FONT=&quot]auto
    length
    %
    [/FONT]​
    [FONT=&quot]فضای بالا[/FONT]​
    [FONT=&quot]auto
    length
    %
    [/FONT]​

    [FONT=&quot]CSS PADDING
    [/FONT] [FONT=&quot]این خصوصیت برای تعیین فضای بین [FONT=&quot]BORDER[/FONT][FONT=&quot] و [/FONT][FONT=&quot]CONTENT[/FONT][FONT=&quot] است.[/FONT]
    [/FONT]
    [FONT=&quot]تعیین فاصله پایین یک عنصر[/FONT]​
    [FONT=&quot]length
    %
    [/FONT]​
    [FONT=&quot]تعیین فاصله چپ یک عنصر[/FONT]​
    [FONT=&quot]length
    %
    [/FONT]​
    [FONT=&quot]تعیین فاصله راست یک عنصر[/FONT]​
    [FONT=&quot]length
    %
    [/FONT]​
    [FONT=&quot]تعیین فاصله بالا یک عنصر[/FONT]​
    [FONT=&quot]length
    %
    [/FONT]​
     

    پیوست ها:

    • box-model.gif
      box-model.gif
      اندازه فایل:
      کیلوبایت 4.4
      نمایش ها:
      31
    نوشته شده توسط bluekerm در ‏13 مارس 2010
    aria-adword، Morteza1371، baviran و 6 نفر دیگر از این ارسال تشکر کرده اند.
  7. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    [FONT=&quot]گروه بندی و تو در تو نوشتن سلکتور ها :[FONT=&quot] (CSS Grouping & Nesting Selectors)[/FONT][/FONT]
    [FONT=&quot]گروه بندی سلکتورها: در استایل شیت ها اغلب عناصری وجود دارند که می خواهیم استایل مشابهی داشته باشند برای این که حجم کد ها رو کم کنید، میتونیم چند سلکتور رو با هم بنویسیم[/FONT]
    [FONT=&quot]مثال:[/FONT]
    کد (Text):
    H1,h2,p { color:green;}
    [FONT=&quot]
    [/FONT]​
    [FONT=&quot]تو در تو نوشتن سلکتور ها : با یه مثال این طرز نوشتن استایل رو توضیح میدم[/FONT]
    [FONT=&quot]مثال:
    کد (Text):
    [/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3][/SIZE][/FONT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"style type="text/css>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]P {[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]color:blue;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]text-align:center;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]marked.[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]{[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-color:blue;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]marked p.[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]color:white;[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]{[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style/>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body >[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"div class="marked>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<p > This paraghraph is using marked class nesting in p tag </p>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</div>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<h1 class="marked"> this is a h1 tag with marked class </h1>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<p> this is a normal p tag </p>[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [/FONT] [FONT=&quot]با این مثال میبینید که تو در تو نوشتن تگ ها چه جوری صورت میگیره. یعنی اگه جایی از کلاس [FONT=&quot]marked[/FONT][FONT=&quot] استفاده کرده باشین و داخل اون تگ از تگ [/FONT][FONT=&quot]p[/FONT][FONT=&quot] استفاده کرده باشین استایل [/FONT][FONT=&quot]marked p [/FONT][FONT=&quot] اعمال میشه.[/FONT][/FONT]
    [FONT=&quot] [/FONT]
    [FONT=&quot]CSS DIMENSION[/FONT]
    [FONT=&quot]خصوصیات زیر برای تعیین اندازه عناصر [FONT=&quot]html[/FONT][FONT=&quot] توسط [/FONT][FONT=&quot]css[/FONT][FONT=&quot] استفاده میشن.[/FONT][/FONT]
    [FONT=&quot]height[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین ارتفاع[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]auto
    length
    %

    [/FONT]​
    [FONT=&quot]max-height[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین حداکثر ارتفاع[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]none
    length
    %

    [/FONT]​
    [FONT=&quot]max-width[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین حداکثر عرض[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]none
    length
    %

    [/FONT]​
    [FONT=&quot]min-height[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین حداقل ارتفاع[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]length
    %

    [FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]min-width[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین حداقل عرض[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]length
    %

    [FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]width[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]تعیین عرض[FONT=&quot][/FONT][/FONT]​
    [FONT=&quot]auto
    length
    %

    [/FONT]​
    [FONT=&quot] [/FONT]
    [FONT=&quot]برای مخفی کردن یک عنصر از این دو کد میتونیم استفاده کنیم:[/FONT]
    کد (Text):
    [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Display:none[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Visibility:hidden[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [FONT=&quot]
    [/FONT] [FONT=&quot]به تفاوت این دو کد توجه کنید:[/FONT]
    [FONT=&quot]Visibility:hidden[FONT=&quot] : این کد باعث میشه عنصر مربوطه مخفی بشه ولی مثل حالت نرمال فضا میگیره[/FONT][/FONT]
    [FONT=&quot]Display:none[FONT=&quot] : این کد عنصر رو مخفی میکنه و فضایی هم نمیگیره مثل اینه که اصلا این عنصر وجود نداره.[/FONT][/FONT]
    [FONT=&quot] [/FONT]
    [FONT=&quot]CSS BLOCK AND INLINE ELEMENTS[FONT=&quot][/FONT][/FONT]
    [FONT=&quot]در [FONT=&quot]css[/FONT][FONT=&quot] دو دسته میشن عناصر صفحه . یه دسته [/FONT][FONT=&quot]block[/FONT][FONT=&quot] یا بلوکی هستند و دسته ی دیگه [/FONT][FONT=&quot]inline[/FONT][FONT=&quot] . یه عنصر بلوکی کل عرض ممکنه صفحه رو میگیره و یه خط فاصله ایجاد میکنن قبل و بعد از خودشون. مثل [/FONT][FONT=&quot]h1 , p , div[/FONT][FONT=&quot][/FONT][/FONT]
    [FONT=&quot]ولی عناصر [FONT=&quot]inline [/FONT][FONT=&quot] فقط همونقدر عرض رو اشغال میکنن که نیاز باشه و فاصله هم ایجاد نمیکنن مثل [/FONT][FONT=&quot]span,a[/FONT][FONT=&quot][/FONT][/FONT]
    [FONT=&quot]گاهی لازم میشه عناصر [FONT=&quot]inline[/FONT][FONT=&quot] رو تبدیل به بلوکی کنیم یا برعکس. برای این کار از ویژگی [/FONT][FONT=&quot]display[/FONT][FONT=&quot] استفاده میکنیم[/FONT][/FONT]
    [FONT=&quot]مثال:[/FONT]
    کد (Text):
    [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Li { display:inline;}[/SIZE][/FONT][/LEFT][/RIGHT]
      [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Span {display:block;}[/SIZE][/FONT][/LEFT][/RIGHT]
    [FONT=Tahoma][SIZE=3]
    [FONT=&quot]
    [/FONT]​
     
    نوشته شده توسط bluekerm در ‏15 مارس 2010
    aria-adword، Morteza1371، baviran و 5 نفر دیگر از این ارسال تشکر کرده اند.
  8. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6

    CSS POSITIONIG
    ویژگی position در css اجازه میده که موقعیت قرار گیری عناصر رو تنظیم کنید.
    4 متد برای تنطیم مکان عناصر وجود دازه:
    1) Static : بصورت پیش فرض عناصر html به این صورت تنظیم میشن. یعنی موقعیت اجزا طبق حالت نرمال صفحه تنظیم میشه و عناصر با این positioning توسط ویژگیهای top,left,… تغییر نمی کنند.
    2) Fixed : با این روش مکان عناصر بستگی به پنجره مرورگر داره و عناصر با scroll شدن صفحه حرکت نمی کنن. عناصری که دارای این ویژگی باشن میتونن overlap بشن.
    3) Relative : تغییرات به حالت نرمال نمایش عناصر بستگی داره. در این حالت هم overlap عناصر امکان پذیره.
    4) Absolute : با توجه به اولین والدی که position ای به جز static داشته باشه تعیین میشه اگه همچین عنصر والدی پیدا نشد <html> رو در نظر میگیره به عنوان والد. در اینجا هم overlap امکان پذیره.
    حالا چند تا مثال برای اینکه این positioning ها رو بهتر متوجه بشین:
    مثال 1:

    کد (Text):
     [RIGHT]<"style type="text/css>


    table {position:static;


    ;top:130px


    ;}left:150px


    </style>


    <body>


    <table width="200" border="1">


    <tr>


    <td>&nbsp;</td>


    <td>&nbsp;</td>


    </tr>


    <tr>


    <td>&nbsp;</td>


    <td>&nbsp;</td>


    </tr>


    </table>


    </body>[/RIGHT]
     

    خب اگه این کد رو بنوسید و خروجی رو مشاهده کنین میبینید که ویژگی های top و left هیچ تاثیری نداشته و جدول بالای صفحه قرار میگیره
    مثال 2:


    کد (Text):
     [RIGHT]<"style type="text/css>


    table {position:fixed;


    ;top:130px


    ;}left:150px


    </style>


    <body>


    <table width="200" border="1">


    <tr>


    <td>&nbsp;</td>


    <td>&nbsp;</td>


    </tr>


    <tr>


    <td>&nbsp;</td>


    <td>&nbsp;</td>


    </tr>


    </table>


    </body>[/RIGHT]
     

    خب حالا خروجی این کد رو مشاهده کنید. جدول از بالا 130 پیکسل و از چپ 150 پیکسل فاصله داره و اگه صفحه مرورگر رو هم کوچیک یا بزرگ کنید هیچ تفاوتی در مکان جدول ایجاد نمی شه.
    مثال 3:

    کد (Text):
     [RIGHT]<"style type="text/css>


    img {position:absolute ;


    ;top:0px


    ;left:0px


    { ;z-index:-1


    p { position:relative


    ;}top:0px;left:0px


    </style>


    <body>


    </"img src="../root/logo222.jpg>


    <p > This is an OVERLAPPING paragraph!</p>


    </body>[/RIGHT]
     

    تو قسمت توضیحات گفتم که با برخی ویژگی ها میشه overlap هم داشته باشیم. با این مثال میبینید چه جوری overlap میشن . اگه به جای position:absolute در استایل img بنویسید position:fixed هم خروجی به همون شکل خواهد بود و overlap میشن. ولی اگه بنویسید static دیگه امکان overlapping وجود نداره.
    در مثال بالا از یه ویژگی دیگه هم استفاده کردم به نام z-index .این ویژگی تعیین میکنه کدوم عنصر باید رو قرار بگیره و کدوم زیر. مقدار این ویژگی میتونه منفی یا مثبت باشه و عنصری که z-index بزرگتر رو داشته باشه روی عنصری قرار میگیره که z-index کوچک تری داره.
    مثال 4:

    کد (Text):
     [RIGHT]<style type="text/css>


    .img1 {position:absolute ;


    ;top:20px


    ;left:20px


    ;border:#0F0 dotted


    .img2 {position:absolute ;


    ;top:20px


    ;left:300px


    ;border:#F00 dashed


    img3 {position:absolute ;.


    ;top:20px


    ;left:650px


    ;border:#0FF solid


    ;p1 { position:relative.


    ;top:0px;left:0px


    p2 { position:relative.


    ;top:10px;left:0px


    </style>


    <body>


    <p class="p1">


    <img class="img1" src="../root/logo222.jpg" /<


    </p>


    <p class="p2">


    </img class="img2" src="../root/logo222.jpg" <


    </p>


    <img class="img3" src="../root/logo222.jpg"/<


    </body>[/RIGHT]
     

    خب تو این مثال هم میبینین که relative چه جوری عمل میکنه. عکس های اول و دوم با توجه به تگ p که در اون قرار دارن موقعیتشون تنظیم میشه ولی عکس آخر چون parent ای نداره با تگ html تنظیم میشه.
    اینم ویژگی هایی که میتونین برای تعیین موقعیت استفاده کنین:




    تعیین فاصله از پایین صفحه


    auto
    length
    %




    تعیین نوع اشاره گر ماوس


    url
    auto
    crosshair
    default
    pointer
    move
    e-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    text
    wait
    help
    left


    تعیین فاصله از چپ


    auto
    length
    %




    وقتی عنصر اورلپ شد چه اتفاقی بیفته


    auto
    hidden
    scroll
    visible


    position
    absolute
    fixed
    relative
    static




    تعیین فاصله از راست


    auto
    length
    %


    top


    تعیین فاصله از بالا


    auto
    length
    %


    z-index
    number
    auto




     
    نوشته شده توسط bluekerm در ‏25 مارس 2010
    aria-adword، Morteza1371، baviran و 5 نفر دیگر از این ارسال تشکر کرده اند.
  9. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    CSS Float
    با ویژگی float در css یک عنصر رو میتوند به راست یا چپ هل بدید. معمولا از این ویژگی برای عکس ها استفاده میشه ولی موقع کار با layout ها هم کاربرد داره.
    عناصر فقط بصورت افقی float میشن (یعنی فقط چپ و راست نا بالا و پایین ). خب تو قسمت تعریف float گفتم هل دادن منظور از هل دادن ایه که مثلا یه عکس رو به سمت چپ یه متن هل بدین ، متن مجبور میشه تغییر وضعییت بده تا بتونه عکس رو جا بده تا هم متن نشون داده بشه و هم عکس. مثل کد های زیر:
    کد (Text):
    <body>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <img src="../root/3.jpg" style="float:left">
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
      </body>
    اگه خروجی مثال بالا رو نگاه کنین میبینید که متن بعد از img تغییر وضعییت داده پس:عناصر float شده روی عناصر قبل از خودشون تاثیری ندارن و فقط روی عناصر بعد از خودشون تاثیر میزارن.
    حالا برای اینکه تفاوت استفاده از float رو بهتر متوجه بشین یه باره دیگه مثال بالا رو اجرا کنین ولی اینبار قسمت style در تگ img رو حذف کنین.
    همچنین میتونین اجازه ندین که عناصری float بشن برای این کار از clear استفاده می کنین.
    مثال:
    کد (Text):
    <"style type="text/css>
    Thumbnail.
    }
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    {
    .text_line
    {
    clear:both;
    margin-bottom:2px;
    }
    </style>
    </head>
    <body>
    <h3>Image Gallery</h3>
    <"img class="thumbnail" src="../root/2.jpg" width="107" height="90>
    <img class="thumbnail" src="../root/2.jpg" width="107" height="80">
    <h3>first row without any style!</h3>
    <"img class="thumbnail" src="../root/2.jpg" width="116" height="90>
    <"img class="thumbnail" src="../root/2.jpg" width="120" height="90>
    <h3 class="text_line">Second row</h3>
    <img class="thumbnail" src="../root/2.jpg" width="107" height="90">
    <"img class="thumbnail" src="../root/2.jpg" width="107" height="80>
    <"img class="thumbnail" src="../root/2.jpg" width="116" height="90>
    <img class="thumbnail" src="../root/2.jpg" width="120" height="90">
    </body>
    خروجی این مثال رو ببینین و تفاوت استفاده از float و clear رو بهتر متوجه میشین.
    clear
    تعیین میکنه از کدوم سمت قابلیت فلوت شدن نداشته باشه left
    right
    both
    none

    float
    left
    right
    none
     
    نوشته شده توسط bluekerm در ‏14 آوریل 2010
    hadi71120000، aria-adword، Morteza1371 و 8 نفر دیگر از این ارسال تشکر کرده اند.
  10. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    CSS Navigation Bars
    Navigation bars = لیستی از لینک ها ( منو)
    برای ایجاد لیستی از لینک ها به صورت یک منو ساده ابتدا توسط li و ul لیست را ایجاد میکنیم:
    کد (Text):
    <ul>
    <li><a href="1.htm">Page One</a></li>
    <li><a href="2.htm">Page Two</a></li>
    <li><a href="3.htm">Page Three</a></li>
    </ul>
    و در قسمت استایل ها برای لیست ، حاشیه ها و تورفتگی ها و بالت های لیستهای معمولی را حذف میکنیم:
    کد (Text):
    <style>
    ul { list-style-type:none;
          margin:0;
         padding:0;}
    </style>
     
    خب حالا اگه منوی عمودی می خواهیم باید برای تگ a یه استایل کوچولو بنویسیم. در واقع تگ a رو به بلوکی تبدیل میکنیم :
    کد (Text):
    a { display:block;
         width:60px;}
    حتما width رو مقدار ثابت بدین تا شکل منو بشه.
    حالا یه مثال کامل:
    کد (Text):
    <head>
     < "  style type="text/css>
     ; ul { list-style-type:none
          ; margin:0px
          ; padding:0px
      }
     ; a:link { display:block
         ; border:1px
        ;  border-color:#F3F
         ; border-style:dashed
         ; font-weight:200px
        ;  color:#F0F
         ; background-color:#373737
         ; width:120px
         ; text-align:center
         ; padding:4px
         ; text-decoration:none
      }
      a:hover,a:active
      {; background-color:#404040}
    <style/>
    <head/>
    <body>
    <ul>
    <li><a href="1.htm">Page One</a></li>
    <li><a href="2.htm">Page Two</a></li>
    <li><a href="2.htm">Page Three</a></li>
    </ul>
     
    برای ساخت منو های افقی از دو روش میتونین استفاده کنین.
    روش اول: li ها را به صورت inline نمایش میدهیم.
    مثال: همون مثال قبل ولی قسمت استایل این جوری تغییر میکنه:
    کد (Text):
    <" style type="text/css>
     ; ul { list-style-type:none
          ; margin:0px
          ; padding-top:7px
          ; padding-bottom:7px
      {
     ; li{ display:inline
    {
      a:link {
         ; border:1px
         ; border-color:#F3F
         ; border-style:dashed
         ; font-weight:200px
         ; color:#F0F
         ; background-color:#373737
         ; text-align:center
         ; text-decoration:none
          {
      a:hover,a:active
      {; background-color:#404040}
    </style>
     
    روش دوم: استفاده از float
    در مثال بالا همه لینک ها عرض های متفاوتی داشتند برای این که عرض همه یکسان باشهfloat ، li ها را تنظیم میکنیم و width رو هم برای a تنظیم میکنیم.
    کد (Text):
    [LEFT]{;Li { float:left
    A { display:block; width:120px[/LEFT]
     
    نوشته شده توسط bluekerm در ‏28 آوریل 2010
    aria-adword، 286، Morteza1371 و 4 نفر دیگر از این ارسال تشکر کرده اند.
  11. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    CSS Image Gallery
    با css میتونیم یه گالری عکس داشته باشیم. مثال زیر یه گالری ساده رو میسازه
    مثال:
    کد (Text):
    <style type="text/css">
    div.img { margin: 2px;
     border: 1px solid #0000ff;
     height: auto;
     width: auto;
     float: left;
     text-align: center; }
     div.img img { display: inline;
     margin: 3px;
     border: 1px solid #ffffff; }
     div.img a:hover img {border: 1px solid #0000ff;}
     div.desc { text-align: center;
     font-weight: normal;
     width: 120px;
     margin: 2px; }
     </style>
    </head>
     <body>
     <div class="img"> <a target="_blank" href="1.htm"> <img src=" l.jpg" width="110" height="90" /></a>
     <div class="desc">image one</div>
     </div>
     <div class="img"> <a target="_blank" href="2.htm"><img src="2.jpg" width="110" height="90" /></a>
    <div class="desc">image two</div>
     </div>
     <div class="img"> <a target="_blank" href="3.htm"><img src="3.jpg" width="110" height="90" /></a>
     <div class="desc">image three</div>
     </div>
     <div class="img"> <a target="_blank" href="4.htm"><img src="4.jpg" width="110" height="90" /></a>
     <div class="desc">image four</div>
     </div>
     </body>
     
    نوشته شده توسط bluekerm در ‏29 آوریل 2010
    mazyar_f، Morteza1371 و pouya saadeghi از این ارسال تشکر کرده اند.
  12. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    CSS Image Opacity/Transparency
    این یکی از ویژگی های css استاندارد نیست ولی در همه ی مرورگرهای مدرن کار میکنه.
    برای ساخت یه عکس شفاف :
    کد (Text):
    <img  src="1.jpg" width="150" height="113" style="opacity:0.4;filter:alpha(opacity=40)"/>
    Firefox از ویژگی opacity:x برای شفافی استفاده میکند و IE از filer:alpha(opacity=x) استفاده میکند.
    در firefox در دستور opacity:x عدد x میتونه عددی بین 0.0 تا 1.0 باشه.و عدد کوچکتر باعث شفافیت بیشتر میشه. ( تا اونجایی که من امتحان کردم google chrome هم از همین ویژگی استفاده میکنه)
    در IE در دستور filter:alpha(opacity=x) عدد x میتونه بین 0 تا 100 باشه. و عدد کوچکتر باعث شفافیت بیشتر میشه.
    مثال:
    کد (Text):
    <img src="3.jpg"
    style="opacity:0.4;filter:alpha(opacity=40)"
     onmouseover="[COLOR="Red"]this.style.opacity=1[/COLOR];[COLOR="SeaGreen"]this.filters.alpha.opacity=100[/COLOR]"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
    در این مثال هر وقت رویداد ماوس روی عکس قرار میگیره عکس به حالت اولیه ( بدون شفافیت) نمایش داده میشه. درواقع دستو onmouseover وقتی اجرا میشه که ماوس روی عکس قرار بگیره و onmouseout وقتی اجرا میشه که ماوس روی عکس نباشه.
    قسمتی که با قرمز مشخص شدن برای مرورگر firefox هستن و قسمت های سبز برای IE.
    مثال: اینم یه کاربرد جالب از این ویژگی CSS
    کد (Text):
    <html>
    <head>
    <style type="text/css">
    div.background
      {
      width:500px;
      height:250px;
      background:url(3.jpg) repeat;
      border:2px solid black;
      }
    div.transbox
      {
      width:400px;
      height:180px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid black;
       filter:alpha(opacity=60);
       opacity:0.6;
      }
    div.transbox p
      {
      margin:30px 40px;
      font-weight:bold;
      color:#000000;
      }
    </style>
    </head>

    <body>

    <div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    </p>
    </div>
    </div>

    </body>
    </html>
    خروجی این مثال رو میتونین در عکس ضمیمه شده ببینید.
     

    پیوست ها:

    نوشته شده توسط bluekerm در ‏29 آوریل 2010
    mazyar_f، Morteza1371، baviran و یک نفر دیگر از این ارسال تشکر کرده اند.
  13. hamidreza68504

    hamidreza68504 Member

    ارسال‌ها:
    154
    تشکر شده:
    49
    امتیاز دستاورد:
    16
    سلام دوست جان
    میشه یه لطفی بکنی این آموزش رو pdfاش رو هم بذاری؟
     
    نوشته شده توسط hamidreza68504 در ‏11 می 2010
    Morteza1371 از این پست تشکر کرده است.
  14. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    سلام بله بزودی pdf اش میکنم البته کامل نشده هنوز ، آموزشه کامل بشه فایل pdf اشو هم میزارم.
     
    نوشته شده توسط bluekerm در ‏12 می 2010
    mazyar_f، toxin و webmasterafkari از این ارسال تشکر کرده اند.
  15. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    اینم pdf
     

    پیوست ها:

    • css.pdf
      اندازه فایل:
      کیلوبایت 593.6
      نمایش ها:
      131
    نوشته شده توسط bluekerm در ‏9 جولای 2010
    mazyar_f، toxin و nasim_fz از این ارسال تشکر کرده اند.
  16. ArefGod

    ArefGod Member

    ارسال‌ها:
    58
    تشکر شده:
    98
    امتیاز دستاورد:
    6
    خوب پس کی کامل میشه هر وقت کامل شد pdf بزار :mad:اصلا pdf بدرد هم نمی خوره!:green:
     
    نوشته شده توسط ArefGod در ‏9 جولای 2010
  17. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    :-? نظر شماست
    در ضمن قرار نبود تو pdf چیز خاصی باشه و چیزی اضافه بشه همین مطالب رو که نوشتم در چند تا پست همینا رو خواستن pdf کنم :green:
     
    نوشته شده توسط bluekerm در ‏10 جولای 2010
  18. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6
    Image Sprites
    Image sprite در واقع یه مجموعه از تصاویر است که در یک عکس قرار دارند . مثل عکس 1
    این عکس سه قسمته ولی در یه فایل.
    با css ما می تونیم فقط یه قسمت عکس رو که می خوایم نشون بدیم
    مثال: در اینجا فقط یه قسمت عکس که شامل عکس "خونه" هست رو نشون می دیم.
    کد (Text):
    [LEFT]<"DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd!>
    <html>
    <head>
    <"style type="text/css>
    img.home
    }
    width:46px;
    height:44px;
    background:url(img_navsprites.gif) 0 0;
    {
    </style>
    <head/>
    <body>
    <"img class="home" src="img_trans.gif" / >
    <body/>
            <html/>
    [/LEFT]
    در قسمت css مشخص کردیم چقدر از عکس مشخص بشه.
    خب حالا می خواهیم از این ویژگی استفاده کنیم و یه navigation list ( معادل فارسیشو نمی دونم دقیقا ) ایجاد کنیم.
    مثال:
    کد (Text):
    [LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
    <head>
    <style type="text/css">
    #navlist{position:relative;}
     #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #navlist li, #navlist a{height:44px;display:block;}
     #home{left:0px;width:46px;}
     #home{background:url('img_navsprites.gif') 0 0;}
     #prev{left:63px;width:43px;}
     #prev{background:url('img_navsprites.gif') -47px 0;}
     #next{left:129px;width:43px;}
     #next{background:url('img_navsprites.gif') -91px 0;}
     </style>
     </head>
    <body>
    <ul id="navlist"> <li id="home"><a href="home.htm "></a></li>
     <li id="prev"><a href="prev.htm"></a></li>
     <li id="next"><a href="next.htm"></a></li>
     </ul>
     </body>
     </html>
    [/LEFT]
    با یه مثال دیگه نشون میدیم که میشه با این ویژگی از حالت hover هم استفاده کنیم. فقط کافیه یه عکس دیگه اضافه کنیم. (عکس 2) قسمت بالا برای حالت نرمال و قسمت پایین برای حالت hover.
    مثال:
    کد (Text):
    [LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
     <head>
     <style type="text/css">
     #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
     #navlist li, #navlist a{height:44px;display:block;}
     #home{left:0px;width:46px;}
     #home{background:url('img_navsprites_hover.gif') 0 0;}
     #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
     #prev{left:63px;width:43px;}
     #prev{background:url('img_navsprites_hover.gif') -47px 0;}
     #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
     #next{left:129px;width:43px;}
     #next{background:url('img_navsprites_hover.gif') -91px 0;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
    </style>
    </head>
    <body>
     <ul id="navlist">
     <li id="home"><a href="default.asp"></a></li>
     <li id="prev"><a href="css_intro.asp"></a></li>
     <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
    </body>
     </html>
    [/LEFT]
     

    پیوست ها:

    آخرین ویرایش: ‏10 جولای 2010
    نوشته شده توسط bluekerm در ‏10 جولای 2010
    baviran و ♠ Mohammad ♠ از این پست تشکر کرده اند.
  19. ♠ Mohammad ♠

    ♠ Mohammad ♠ New Member

    ارسال‌ها:
    1
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    مرسی

    دستت درد نکنه خیلی مفیده
     
    نوشته شده توسط ♠ Mohammad ♠ در ‏10 جولای 2010
    bluekerm از این پست تشکر کرده است.
  20. bluekerm

    bluekerm Member

    ارسال‌ها:
    62
    تشکر شده:
    166
    امتیاز دستاورد:
    6

    خب حالا تعیین می کنیم که document ما چه جوری نشون داده بشه در رسانه های مختلف مثلا روی صفحه نمایش ، روی کاغذ و ... چه جوری باشه.
    بعضی از ویژگی های css فقط برای بعضی از رسانه ها قابل استفاده هستند مثل voice-family که فقط برای رسانه های شنوایی قابل استفاده اند ولی font-size برای صفحه نمایش و پرینت استفاده میشه. و یا مثلا اگه قرار باشه document روی مانیتور نشون داده بشه باید فونت درشت تری داشته باشه و اگه قرار باشه چاپ بشه فونت سایز کوچیک تر هم قابل استفاده است.
    @media
    @media این امکان رو میده تا قوانین مختلفی رو برای رسانه های مختلف تعریف کنیم.
    مثال:
    کد (Text):
    <html>
    <head>
    <style>
    @media screen
      {
      p.test {font-family:verdana,sans-serif;font-size:14px;}
      }
    @media print
      {
      p.test {font-family:times,serif;font-size:10px;}
      }
    @media screen,print
      {
      p.test {font-weight:bold;}
      }
    </style>
    </head>

    <body>
    ....
    </body>
    </html>

    در این مثال مشخص کردیم که اگه روی مانیتور نشون داده شد فونت سایز 14 از خانواده verdana و sans-seif باشه ( @media screen) و همین طور در قسمت @media print ویژگی که باید موقع پرینت داشه باشه رو تعیین کردیم. @media screen,print هم که تعیین میکنه کدوم ویژگی در هر دو مشترک باشه.

    all : برای همه رسانه ها
    aural : برای رسانه های گفتاری و شنیداری
    braille : برای رسانه هایی که از بریل استفاده می کنن (نابینایان)
    embossed: برای پرینتر های بریل
    handheld: برای وسایل کوچک و قابل حمل
    print : برای پرینتر
    projection: برای نمایش با ویدئو پروژکتورمثل سلاید ها
    screen : برای نمایش در مانیتور
    tty : برای نمایش در رسانه هایی مثل ترمینال ها و تله تکست ها
    tv : برای نمایش در تلوزیون

     
    آخرین ویرایش: ‏10 جولای 2010
    نوشته شده توسط bluekerm در ‏10 جولای 2010
    1dayan و baviran از این پست تشکر کرده اند.

به اشتراک بگذارید