در بخش آموزش CSS ، روش جديد قالب بندی و اعمال خواص به عناصر HTML مطرح شده است . در اين قسمت کاربرد ، نحوه کد نويسی و انواع حالت های ممکن را برای خواص اصلی و پر کاربرد CSS ، در قالب مثال های عملی همراه با کد برنامه و خروجی واقعی ارائه شده است . [h=2]با CSS چه کاری می خواهید انجام دهید ؟[/h] [TABLE] [TR] [TD] [/TD] [TD] با CSS چه کاری می خواهید انجام دهید ؟ آیا با CSS می خواهید کار خاصی انجام دهید و نمی دانید که کجا کد و آموزش آن قرار داده شده است ؟ در منوی زیر لیستی از موارد پر کاربرد استفاده از CSS در طراحی صفحات وب قرار داده شده است . [/TD] [/TR] [/TABLE] [h=2]خواص مقدماتی CSS[/h] متن و نوشته Text : به وسيله مجموعه خواص Text در CSS ، می توان ظاهر نوشته را تغيير داد . اين خواص برای تغيير رنگ نوشته ، جهت چيدمان ، اندازه و ... متن به کار می روند . مجموعه خواص text شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] color direction line-height letter-spacing text-align [/TD] [TD] text-decoration text-inednt text-transform white-space word-spacing [/TD] [/TR] [/TABLE] در ادامه مجموعه خواص مختلف CSS برای متن را همراه با مثال های عملی مشاهده خواهيد کرد : [h=3]خاصيت color :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت color [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] color [/TD] [TD="class: prbody"] نام رنگ rgb (r,g,b) عدد هگزادسيمال [/TD] [TD="class: prbody"] تعيين کننده رنگ نوشته است . رنگ میتواند به روش های زير تعيين شود : نام رنگ مثل blue يا red . تعيين رنگ به وسيله تابع rgb به صورت زير : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود . Example : rgb (10,65,232) نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال : ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز # Example : #08FF00 [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال color [/TD] [/TR] [TR] [TD="class: body"] < p style= "color : blue" > This Paragraph is blue < /p > < p style= "color : #AB4588" > This is another paragrph with different color < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This Paragraph is blue This is another paragrph with different color [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت direction :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت direction [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] direction [/TD] [TD="class: prbody"] rtl ltr [/TD] [TD="class: prbody"] جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند يکی از حالت های زير باشد : - rtl : راست به چپ . برای زبان هايي مثل فارسی که جهت آنها از راست به چپ است . - ltr : چپ به راست . برای زبان هايي مثل انگليسی که جهت آنها از چپ به راست است . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال direction [/TD] [/TR] [TR] [TD="class: body"] < p style= "color : blue ; direction : rtl" > . برای زبان فارسی جهت نوشته بايد از راست به چپ باشد < /p > < p style= "color : #AB4588 ; direction : ltr" > But for english it must be left to right ! < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] برای زبان فارسی جهت نوشته بايد از راست به چپ باشد . But for english it must be left to right ! [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت line-height :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت line-height [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] line-height [/TD] [TD="class: prbody"] معمولی normal عدد number اندازه length درصد % [/TD] [TD="class: prbody"] به وسيله اين خاصيت می توان فاصله بين خطوط را در پاراگراف تعيين کرد . برای اين کار يکی از حالت های زير را بايد استفاده کرد : - normal : فاصله بين خطوط در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب پيش فرض است . - number : يک عدد معمولی را تعيين می کنيم ، که اين عدد در اندازه استاندارد فاصله خطوط ضرب شده و اندازه جديد را ايجاد می کند . برای مثال اگر عدد 2 انتخاب شود ، فاصله بين خطوط 2 برابر اندازه معمولی می شود . - length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و ... را برای فاصله خطوط تعيين می کنيم . - درصد % : به وسيله اين حالت نسبت اندازه مورد نظر را به اندازه استاندارد فاصله خطوط تعيين می کنيم . برای مثال اگر 150% تعيين شود ، اندازه خطوط 5/1 برابر اندازه استاندارد می شود . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 4"] مثال line-height [/TD] [/TR] [TR] [TD="class: body, colspan: 3"] < p style= "color : blue ; line-height: 2 " > In this paragrph line height is 2 . In this paragrph line height is 2 . In this paragrph line height is 2 . < /p > < p style= "color : #AB4588 ; line-height: 12px " > In this paragrph line height is 12px . In this paragrph line height is 12px . In this paragrph line height is 12px . < /p > < p style= "color : green ; line-height: 150% " > In this paragrph line height is 150% . In this paragrph line height is 150% . In this paragrph line height is 150% . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] In this paragrph line height is 2 . In this paragrph line height is 2 . In this paragrph line height is 2 . [/TD] [TD="class: body"] In this paragrph line height is 12px . In this paragrph line height is 12px . In this paragrph line height is 12px . [/TD] [TD="class: body"] In this paragrph line height is 150% . In this paragrph line height is 150% . In this paragrph line height is 150% . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت letter-spacing :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت letter-spacing [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] letter-spacing [/TD] [TD="class: prbody"] معمولی normal اندازه length [/TD] [TD="class: prbody"] برای تعيين اندازه فاصله بين حروف در نوشته استفاده می شود ، که يکی از 2 حالت زير می تواند باشد : - normal : فاصله بين حروف در اين حالت به اندازه استاندارد و معمولی است ، که انتخاب پيش فرض است . - length : به وسيله اين خاصيت يک اندازه بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و ... را برای فاصله بين حروف تعيين می کنيم . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال letter-spacing [/TD] [/TR] [TR] [TD="class: body"] < p style="color: Blue; letter-spacing: normal" > Letter spacing in this paragraph is normal . < /p > < p style="color: Green; letter-spacing: 5pt" > Letter spacing in this paragraph is 5pt . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Letter spacing in this paragraph is normal . Letter spacing in this paragraph is 5pt . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت text-align :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت text-align [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] text-align [/TD] [TD="class: prbody"] left right center justify [/TD] [TD="class: prbody"] جهت چيدمان نوشته را در صفحه ، جدول ، پاراگراف و ... تعيين می کند ، که يکی از حالت های زير می تواند باشد : - left : جهت چيدمان نوشته از سمت چپ است . - right : جهت چيدمان نوشته از سمت راست است . - center : جهت چيدمان نوشته از سمت وسط است . - justify : نوشته را از هر دو سمت راست و چپ تراز می کند . اين حالت زمانی تاثير دارد که طول خط از عرض عنصر در بر گيرنده آن بيشتر است . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال letter-spacing [/TD] [/TR] [TR] [TD="class: body"] < p style="color: Blue; text-align : center" > This paragraph is aligned from center. < /p > < p style="color: Green; text-align : left" > This paragraph is aligned from left . < /p > < p style="color: Red; text-align : right" > This paragraph is aligned from right . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This paragraph is aligned from center . This paragraph is aligned from left . This paragraph is aligned from right .[/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت text-decoration :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت text-decoration [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] text-decoration [/TD] [TD="class: prbody"] none underline overline line-through [/TD] [TD="class: prbody"] از اين خواص برای اعمال جلوه های تصويری به نوشته استفاده می شود که يکی از خواص زير و يا ترکيبی از آنها را می توان استفاده کرد : - none : نوسشته به صورت ساده و بدون هيچ جلوه ای نمايش داده می شود که انتخاب پيش فرض است . - underline : نوشته به صورت خط زير دار نمايش داده می شود . - overline : نوشته به صورتی که يک خط در بالای آن کشيده شده ، نمايش داده می شود . - line-through : نوشته به صورتی که يک خط از وسط آن گذشته است ، نمايش داده می شود . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال text-decoration [/TD] [/TR] [TR] [TD="class: body"] < p style="color: blue" > This is a paragraph < span style="text-decoration: underline" > This part is underline < /span > and < span style="text-decoration: overline" > this part is overline < /span > and < span style="text-decoration: line-through" > this part is line through < /span > < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This is a paragraph This part is underline and this part is overline and this part is line through [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] نکته : می توان به يک متن بيش از يک خاصيت text-decoration داد . به مثال زير توجه کنيد : [/TD] [/TR] [TR] [TD="class: body"] < p style="text-decoration: underline overline line-through" > Can you read this text ? < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Can you read this text ? [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت text-indent :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] text-indent [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] text-indent [/TD] [TD="class: prbody"] length درصد % [/TD] [TD="class: prbody"] به وسيله اين خاصيت ميران تو رفتگی و نقطه شروع اولين خط از يک پاراگراف را به يکی از دو حالت زير می توان تعيين کرد : - length : ميزان رفتگی را بر حسب واحدی مثل پيکسل ( pixel ) ، نقطه ( pt ) و يا سانتيمتر ( cm ) تعيين می کنيم . - درصد % : ميزان تورفتگی را بر حسب درصد نسبت به عنصر مادر يا حالت استاندارد تعيين می کنيم . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال text-decoration [/TD] [/TR] [TR] [TD="class: body"] < p style="color: blue; text-indent: 5cm" > Indent of this paragraph is 5cm . < /p > < p style="color: Green; text-indent: 18pt" > Indent of this paragraph is 18pt . < /p > < p style="color: Red; text-indent: 20%" > Indent of this paragraph is 20% . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Indent of this paragraph is 5cm . Indent of this paragraph is 18pt . Indent of this paragraph is 20% . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت text-transform :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] text-transform [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] text-transform [/TD] [TD="class: prbody"] none capitalize uppercase lowercase [/TD] [TD="class: prbody"] از اين خاصيت برای کتنرل بزرگ يا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند يکی از حالت های زير را داشته باشد : - none : نوشته به صورت استاندارد و همانطوری که کاربر وارد کرده است ، نمايش داده می شود . - capitalize : در اين حالت ، اولين حرف کليه کلمات متن به صورت بزرگ نمايش داده می شوند . - uppercase : در اين حالت ، حروف کليه کلمات متن به صورت بزرگ نمايش داده می شوند . - lowercase : در اين حالت ، حروف کليه کلمات متن به صورت کوچک نمايش داده می شوند . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال text-decoration [/TD] [/TR] [TR] [TD="class: body"] < p style="color: blue; text-transform: capitalize " > Words of this paragraph is capitalized . < /p > < p style="color: Green; text-transform: uppercase " > All of the words of this paragraph is uppercase . < /p > < p style="color: Red; text-transform: lowercase " > All of the words of this paragraph is lowercase . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Words of this paragraph is capitalized . All of the words of this paragraph is uppercase . All of the words of this paragraph is lowercase . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت white-space :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] white-space [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] white-space [/TD] [TD="class: prbody"] normal pre nowrap [/TD] [TD="class: prbody"] توسط اين خاصيت می توان نحوه نمايش فاصله های خالی بين حروف و کلمات در نوشته توسط مرورگر را مديريت کرد ، که 3 حالت دارد : - normal : در اين حالت فاصله خالی بين کلمات توسط مرورگر ناديده گرفته شده و حداکثر يک فاصله خالی بين کلمات نمايش داده می شود ، که حالت پيش فرض است . - pre : در اين حالت نوشته با همان قالب بندی که توسط کاربر در صفحه وارد شده ، نمايش داده خواهد شد . عملکرد اين خاصيت همانند عملکرد تگ < pre > در HTML است . - nowrap : در اين حالت نوشته و متن به هيچ عنوان شکسته نشده و به خط بعدی نمی رود ، مگر به يک تگ < br / > برسد . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال white-space [/TD] [/TR] [TR] [TD="class: body"] < p style="color: blue" > This is normal paragraph , brower ignor white space . < /p > < p style="color: Green; white-space: pre" > This paragraph is shown in the way that it is . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This is normal paragraph , brower ignor white space . This paragraph is shown in the way that it is . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت word-spacing :[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] word-spacing [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] word-spacing [/TD] [TD="class: prbody"] normal length [/TD] [TD="class: prbody"] توسط اين خاصيت می توان فاصله بين کلمات را در يک نوشته تعيين کرد ، که يکی از 2 حالت زير را می تواند داشته باشد : - normal : فاصله بين کلمات به اندازه استاندارد و طبيعی است ، که انتخاب پيش فرض است . - length : توسط اين خاصيت می توان يک اندازه را بر حسب واحدی مثل پيکسل يا نقطه ، برای فاصله بين حروف تعيين کرد . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال word-spacing [/TD] [/TR] [TR] [TD="class: body"] < p style="color: Green" > This is normal paragraph , space between words is standard . < /p > < p style ="color: Red; word-spacing: 8px" > Word spacing in this paragraph is 8px . < /p > < p style="color: blue; word-spacing: 15pt" > Word spacing in this paragraph is 15pt . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This is normal paragraph , space between words is standard . Word spacing in this paragraph is 8px . Word spacing in this paragraph is 15pt . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ، به مثال زير توجه کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < p style="background-color: Green" > This paragraph has a background color . < span style="background-color: Yellow" > And this part is yellow . < /span > < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] This paragraph has a background color . And this part is yellow . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص مقدماتی CSS[/h] پس زمينه Background : از خاصيت پس زمينه ( background ) در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه يک عنصر مثل جدول يا صفحه استفاده می شود . خاصيت background : خاصيت چند مقداری برای دريافت کليه ويژگی های پس زمينه عنصر است که هر يک از ويژگی ها بايد به ترتيب زير در خاصيت background وارد شود : background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ] توجه : هر يک از خواص فوق را می توان به صورت تکی نيز ، تعريف و مقدار دهی کرد . به مثال های پايين صفحه دقت کنيد . در جدول زير هر يک از ويژگی های فوق را بررسی می کنيم : [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص background [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] background-color [/TD] [TD="class: prbody"] نام رنگ rgb (r,g,b) عدد هگزادسيمال [/TD] [TD="class: prbody"] تعيين کننده يک رنگ به عنوان پس زمينه عنصر است . رنگ میتواند به روش های زير تعيين شود : نام رنگ مثل blue يا red . تعيين رنگ به وسيله تابع rgb به صورت زير : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود . Example : rgb (10,65,232) نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال : ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز # Example : #08FF00 [/TD] [/TR] [TR] [TD="class: prbody"] background-image [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] مسير کامل يک عکس را که قرار است به عنوان پس زمينه عنصر استفاده شود ، را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] background-repeat [/TD] [TD="class: prbody"] repeat repeat-x repeat-y no-repeat [/TD] [TD="class: prbody"] چنانچه عکس انتخابی به عنوان پس زمينه يک عنصر از اندازه آن عنصر کوچکتر باشد ، تعيين می کند که آيا با تکرار عکس در سطح پس زمينه عنصر ، کل آنرا بپوشاند يا خير . که حالت های تکرار به صورت زير می تواند باشد : - repeat : عکس در جهت افقی و عمودی تکرار خواهد شد . - repeat-x : عکس فقط در جهت محورها x ها يعنی افقی تکرار خواهد شد . - repaet-y : عکس فقط در جهت محور y ها يعنی عمودی تکرار خواهد شد . - no-repaet : عکس در هيچ جهتی تکرار نخواهد شد ، که انتخاب پيش فرض است . [/TD] [/TR] [TR] [TD="class: prbody"] background-attachement [/TD] [TD="class: prbody"] scroll fixed [/TD] [TD="class: prbody"] تعيين می کند کند که آيا عکسی که به عنوان پس زمينه عنصر انتخاب شده است ، ثابت باشد و يا با حرکت عنصر در هنگام بالا و پايين رفتن صفحه ، آن عکس نيز حرکت کند . اين مسئله در مواردی مثل تعيين پس زمينه برای کل يک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمايش در مرورگر است ، کاربرد دارد . که 2 حالت زير را می تواند داشته باشد : - scroll : عکس با حرکت عنصر حرکت می کند . - fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند . [/TD] [/TR] [TR] [TD="class: prbody"] background-position [/TD] [TD="class: prbody"] top bottom center left right [/TD] [TD="class: prbody"] مکان شروع قرارگيری عکس را در پس زمينه عنصر تعيين می کند . اين حالت معمولا در هنگام کوچکتر بودن عکس از پس زمينه عنصر کاربرد دارد و می تواند يکی از حالت های زير باشد : - top : بالای عنصر . - bottom : پايين عنصر - center : در مرکز عنصر . - left : در سمت چپ عنصر . - right : در سمت راست عنصر . [/TD] [/TR] [/TABLE] مثال : در جدول زير چندين حالت ويژگی background را در عنصر table و td نشان داده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="background-color: #10AA32" > < tr > < td > اين خانه جدول دارای رنگ پس زمينه جدول است < /td > < /tr > < tr > < td style="background-color: Blue" > اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت style آن تعيين شده است < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD="align: center"] اين خانه جدول دارای رنگ پس زمينه جدول است [/TD] [/TR] [TR] [TD="bgcolor: Blue, align: right"] اين خانه دارای يک پس زمينه با رنگ مخصوص به خود است که توسط خاصيت style آن تعيين شده است [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2, align: center"] در مثال دوم يک تصوير که کوچکتر از خانه جدول است ، به عنوان پس زمينه جدول تعيين شده است . [/TD] [/TR] [TR] [TD="class: body"] < 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 > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 100%"] [TR] [TD] اين جدول دارای پس زمينه تصويری است [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: body, colspan: 2"] نکته مهم : در مثال دوم هر يک از ويژگی های background را به صورت تکی مقدار دهی کرده ايم . تمام آن ويژگی ها را می توان به صورت زير در خاصيت چند مقداری background نيز تعيين کنيم : < table style="background : url(../pic/bgexample.jpg) repeat fixed top" > ... . [/TD] [/TR] [/TABLE] مثال : همچنين می توان به يک متن نيز رنگ پس زمينه داد ، به مثال زير توجه کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < p style="background-color: Green" > This paragraph has a background color . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] This paragraph has a background color . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص مقدماتی CSS[/h] قلم و نوشته در CSS : به وسيله مجوعه خواص ارائه شده در اين قسمت می توان نوع ، اندازه و جلوه های مختلف را برای قلم نوشته در صفحات وب HTML تعيين کرد . خاصيت font : خاصيت چند مقداری برای دريافت کليه ويژگی های قلم نوشته است که هر يک از ويژگی ها بايد به ترتيب زير در خاصيت font وارد شود : نکته : ترتيب قرار گرفتن خواص در خاصيت های چند مقداری به نوع برنامه طراحی سايت بستگی دارد . font : [ font-family ] [ font-size ] [ font-style ] [ font-variant ] [ font-weight ] ليست زير مجموعه خواص font در CSS را شامل می شود ، که هر يک را به همراه مثال توضيح داده ايم . برای دريافت اطلاعات درباره هر خاصيت بر روی نام آن کليک کنيد : font-family font-size font-stretch font-style font-variant font-weight [h=3] خاصيت font-family : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت font-family [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] font-family [/TD] [TD="class: prbody"] نام قلم font name [/TD] [TD="class: prbody"] به وسيله اين خاصيت می توان از يک ليست آماده ( بر حسب نرم افزاری که برای طراحی صفحات استفاده می کنيد ) ، يک قلم را به عنوان قلم نوشته تعيين کنيد . نکته : چنانچه نام قلمی در اين قسمت ذکر شود و مرورگر در هنگام نمايش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پيش فرض خود استفاده می کند . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال font-family [/TD] [/TR] [TR] [TD="class: body"] < p style="color: Green; font-family: Arial" > Font of this paragraph is Arial . < /p > < p style="color: Blue; font-family: Times New Roman" > But font of this paragraph is Times New Roman . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Font of this paragraph is Arial . But font of this paragraph is Times New Roman . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت font-size : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت font-size [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] font-size [/TD] [TD="class: prbody"] xx-small x-small small medium large x-large xx-large smaller larger length درصد % [/TD] [TD="class: prbody"] به وسيله اين خاصيت می توان سايز قلم نوشته را توسط يکی از حالت های زير تعيين کرد : - xx-small : اندازه قلم بسيار کوچک است . - x-small : اندازه قلم کمی کوچک است . - small : اندازه قلم کوچک است . - medium : اندازه قلم متوسط است . - large : اندازه قلم بزرگ است . - x-large : اندازه قلم کمی بزرگ است . - xx-large : اندازه قلم بسيار بزرگ است . - larger : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی بزرگتر است . - smaller : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی کوچکتر است . - length :در اين حالت اندازه قلم نوشته را بر حسب واحدی مثل پيکسل ( px ) و يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت اندازه قلم نوشته را نسبت به عنصر مادر و يا حالت استاندارد ، بر حسب درصد بيان می کنيم . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال font-size [/TD] [/TR] [TR] [TD="class: header, colspan: 2, align: right"] در مثال زير قسمت های يک پاراگراف با انداره هاي قلم متفاوت نشان داده شده اند : [/TD] [/TR] [TR] [TD="class: body"] < p style="color: Maroon; font-family: Arial" > < span style="font-size: small ; color : green" > This part has a small font < /span > < span style="font-size: medium ; color : blue" > This part has a medium font < /span > < span style="font-size: x-large color : red" > This part has a big font < /span > < span style="font-size: 20px; color: Navy" > And size of font of this is 20px . < /span > < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This part has a small font This part has a medium font This part has a big font And size of font of this is 20px . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت font-strecth : [/h] نکته : خاصيت font-strecth را به دليل عدم پشتيبانی مرورگرهای اينترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ايم . اين خاصيت برای متراکم کردن يا کشيده شدن کلمات در نوشته استفاده می شود . [HR][/HR] [h=3] خاصيت font-style : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت font-style [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] font-style [/TD] [TD="class: prbody"] normal italic oblique [/TD] [TD="class: prbody"] از اين خاصيت با استفاده از حالت های زير می توان برای اعمال جلوه های نمايشی به متن استفاده کرد : - normal : نوشته بدون هيچ جلوه ای نمايش داده می شود ، که انتخاب پيش فرض است . - italic : نوشته به صورت خط کج نمايش داده می شود . - oblique : نوشته به صورت مورب نمايش داده می شود . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال font-style [/TD] [/TR] [TR] [TD="class: body"] < p style="font-family: Arial" > < span class="g" style="font-size: medium; font-style: italic" > This part has italic text. < /span > < span class="b" style="font-size: medium; font-style: oblique" > And this part has oblique text . < /span > < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This part has italic text. And this part has oblique text . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت font-variant : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت font-variant [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] font-variant [/TD] [TD="class: prbody"] normal small-caps [/TD] [TD="class: prbody"] توسط اين خاصيت می توان نوشته را به صورت معمولی ( noraml ) و يا حروف بزرگ ( small-caps ) نمايش داد . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال font-variant [/TD] [/TR] [TR] [TD="class: body"] < p style="font-family: Arial" > < span class="g" style="font-variant: normal" > This part has normal text . < /span > < span class="b" style="font-variant: small-caps" > And this part has small-caps text . < /span > < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This part has normal text. And this part has small-caps text . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت font-weight : [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خاصيت font-weight [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] font-weight [/TD] [TD="class: prbody"] normal bold bolder lighter 100 200 300 400 500 600 700 800 900 [/TD] [TD="class: prbody"] توسط اين گزينه می توان ميزان ضخامت قلم نوشته را بر حسب يکی از حالت های زير تعيين کرد : - normal : ميزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پيش فرض است . - bold : قلم نوشته به صورت توپر ( ضخيم ) نمايش داده می شود . - bolder : قلم نوشته به صورت خيلی توپر ( ضخيم ) نمايش داده می شود . - lighter : قلم نوشته کمی نازکتر از حالت معمولی نمايش داده می شود . - 100 تا 900 : توسط اين مقدارهای عددی می توان ميزان ضخامت نوشته را تعيين کرد ، که هر چه عدد بزرگتر باشد ، ضخامت نوشته بيشتر می شود . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال font-weight [/TD] [/TR] [TR] [TD="class: body"] < p style="font-family: Arial" > < span class="b" style="font-weight: lighter" > This part has light text . < /span > < span style="color : blue ; font-weight: normal" > This part has normal text . < /span > < span style="color : green ; font-weight: bold" > This part has bold text. < /span > < span style="color : red ; font-weight: 100" > This part has a text with 100 . < /span > < span style="color: Navy; font-weight: 900" > And this part has a text with 900 . < /span > </p> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This part has light text . This part has normal text . This part has bold text. This part has a text with 100 . And this part has a text with 900 . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص مقدماتی CSS[/h] حاشيه به دور عناصر : با استفاده از خاصيت margin در CSS ، می توان فضای خالی به دور عناصر ايجاد کرد . اين امکان نيز وجود دارد که با تعيين مقدارهای منفی ، باعث هم پوشانی و تداخل عناصر در يکديگر شد . می توان حاشيه دور عناصر را به صورت کلی در خاصيت چند مقداری margin و يا به صورت تکی برای هر يک از جهات 4 گانه عنصر تعيين کرد . 1 ) تعيين به صورت خاصيت چند مقداری : در خاصيت چند مقداری ، 4 مقدار برای ميزان حاشيه در 4 طرف عنصر به ترتيب زير تعيين می کنيم : margin: [ margin top ] [ margin right ] [ margin bottom ] [ margin left ] مثال : در مثال زير ميزان حاشيه دور عنصر را برای جهت های بالا و پايين 10px و برای جهت های راست و چپ 20px تعيين کرده ايم : margin : 10px 20px 10px 20px 2 ) تعيين به صورت خاصيت تک مقداری : در اين حالت ، ميزان حاشيه را در هر طرف به صورت تکی مقدار دهی می کنيم . مجموعه خواص زير برای تعيين تکی حاشيه به کار می رود : [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] margin-top[/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] ميزان حاشيه را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - auto : مرورگر به طور اتوماتيک يک حاشيه برای عنصر تعيين می کند . - length : در اين حالت ميزان حاشيه را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع سند را به عنوان فضای حاشيه در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] margin-right[/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] ميزان حاشيه را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - auto : مرورگر به طور اتوماتيک يک حاشيه برای عنصر تعيين می کند . - length : در اين حالت ميزان حاشيه را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض سند را به عنوان فضای حاشيه در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] margin-bottom[/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] ميزان حاشيه را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - auto : مرورگر به طور اتوماتيک يک حاشيه برای عنصر تعيين می کند . - length : در اين حالت ميزان حاشيه را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع سند را به عنوان فضای حاشيه در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] margin-left[/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] ميزان حاشيه را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - auto : مرورگر به طور اتوماتيک يک حاشيه برای عنصر تعيين می کند . - length : در اين حالت ميزان حاشيه را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض سند را به عنوان فضای حاشيه در نظر می گيريم . [/TD] [/TR] [/TABLE] مثال : در مثال زير هم به صورت خاصيت چند مقداری و هم به صورت خاصيت تک مقداری margin برای جدول ( Table 2 ) تعيين کرده ايم . به فاصله آن با جدول ديگر و همچنين خطوط حاشيه جدول اصلی در بر گيرنده مثال دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] به صورت خاصيت چند مقداری[/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 200px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 1 < /td > < /tr > < /table > < table style="border: solid 2px blue; width: 300px; margin: 50px 30px 50px 30px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 200"] [TR] [TD] Cell 1 , Table 1[/TD] [/TR] [/TABLE] [TABLE="width: 300"] [TR] [TD] Cell 1 , Table 2[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] به صورت خاصيت تک مقداری[/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 200px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 1 < /td > < /tr > < /table > < table style="border: solid 2px blue; width: 300px; margin-top: 50px; margin-right: 30px; margin-bottom: 50px; margin-left: 30px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 200"] [TR] [TD] Cell 1 , Table 1[/TD] [/TR] [/TABLE] [TABLE="width: 300"] [TR] [TD] Cell 1 , Table 2[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] تعيين به صورت مقدار منفی ( هم پوشانی و تداخل عناصر )[/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 200px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 1 < /td > < /tr > < /table > < table style="border: solid 2px blue; width: 300px; margin-top: -15px; margin-right: 30px; margin-bottom: -10px; margin-left: 30px" > < tr > < td style="border: solid 2px green" > Cell 1 , Table 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 200"] [TR] [TD] Cell 1 , Table 1[/TD] [/TR] [/TABLE] [TABLE="width: 300"] [TR] [TD] Cell 1 , Table 2[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص مقدماتی CSS[/h] حاشيه درونی عناصر : با استفاده از خاصيت padding در CSS ، می توان فاصله بين خطوط حاشيه دور يک عنصر را با محتويات درونی آن تنظيم کرد . برای مثال فاصله بين خطوط حاشيه يک خانه جدول با متن درون آن را با استفاده از خاصيت padding تنظيم می کنيم . نکته : در خاصيت padding استفاده از مقادير منفی مجاز نيست . فاصله درونی عناصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود ، که می توان با استفاده از خاصيت چند مقداری padding آن را برای تمام جهات تنظيم کرده و يا به صورت خاصيت تک مقداری ، ميزان فاصله را در هر جهت به صورت مجزا تعيين کرد . مجموعه خواص padding شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] padding padding-top padding-right [/TD] [TD] paddnig-bottom padding-left [/TD] [/TR] [/TABLE] 1 ) تعيين با استفاده از خاصيت چند مقداری padding : توسط خاصيت padding طبق الگوی زير ، ميزان فاصله را برای تمام جهات تنظيم می کنيم : padding : [ padding top ] [ padding right ] [ padding bottom ] [ padding left ] مثال : در مثال زير ميزان فاصله درونی را برای جهت های بالا و پايين 10px و برای جهت های راست و چپ 20px تعيين کرده ايم : padding : 10px 20px 10px 20px 2 ) تعيين به صورت خاصيت تک مقداری : در اين حالت ، ميزان فاصله را برای هر يک از جهات به صورت جدا مقدار دهی می کنيم . مجموعه خواص زير برای تعيين تکی فاصله درونی به کار می رود : [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] padding-top [/TD] [TD="class: prbody"] length درصد % [/TD] [TD="class: prbody"] ميزان فاصله درونی را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] padding-right [/TD] [TD="class: prbody"] length درصد % [/TD] [TD="class: prbody"] ميزان فاصله درونی را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] padding-bottom [/TD] [TD="class: prbody"] length درصد % [/TD] [TD="class: prbody"] ميزان فاصله درونی را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گيريم . [/TD] [/TR] [TR] [TD="class: prbody"] padding-left [/TD] [TD="class: prbody"] length درصد % [/TD] [TD="class: prbody"] ميزان فاصله درونی را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار دهی شود : - length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گيريم . [/TD] [/TR] [/TABLE] مثال : در مثال زير هم به صورت خاصيت چند مقداری و هم به صورت خاصيت تک مقداری padding برای جدول مثال تعيين کرده ايم . به فاصله محتويات خانه های جدول با خطوط حاشيه آنها مثال دقت کنيد : نکته مهم : در جدول مثال ، برای خانه Cell 3 فاصله درونی تعريف نکرده ايم ، ولی برای خانه های cell 1 و Cell 2 در درون تگ td آنها ، padding را تعيين کرده ايم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] به صورت خاصيت چند مقداری [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue" cellspacing="0" > < tr > < td style="border: solid 2px green; padding: 2px 10px 2px 10px; width: 200px" > Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 < /td > < td style="border: dashed 2px blue; padding: 10px 20px 30px 40px; width: 200px" > Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 < /td > < td style="border: solid 2px red; width: 200px" > Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 600"] [TR] [TD] Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 [/TD] [TD] Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 [/TD] [TD] Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] به صورت خاصيت تک مقداری [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue" cellspacing="0" > < tr > < td style="border: solid 2px green; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; width: 200px" > Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 < /td > < td style="border: dashed 2px blue; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-bottom: 40px; width: 200px" > Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 < /td > < td style="border: solid 2px red; width: 200px" > Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 600"] [TR] [TD] Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 Cell 1 [/TD] [TD] Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 Cell 2 [/TD] [TD] Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 Cell 3 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص مقدماتی CSS[/h] اندازه عناصر در CSS : در CSS مجموعه خواصی برای تعيين اندازه عناصر وجود دارد . در اين قسمت به معرفی خواصی می پردازيم که به ما امکان کنترل اندازه عرض و طولی عناصر در صفحه را می دهند . خواص ارائه شده در اين قسمت در ليست زير آمده اند . برای دريافت اطلاعات درباره هر کدام روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] height max-height min-height [/TD] [TD] width max-width min-width [/TD] [/TR] [/TABLE] [h=3]خواص تعيين اندازه در CSS[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] height [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] توسط اين خاصيت ، به يکی از روش های زير ارتفاع عنصر را تعيين می کنيم : - auto : در اين حالت مرورگر به صورت اتوماتيک ارتفاع عنصر را تنظيم می کند . - length : در اين حالت ميزان ارتفاع عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان ارتفاع در نظر گرفته می شود . [/TD] [/TR] [TR] [TD="class: prbody"] max-height [/TD] [TD="class: prbody"] none length درصد % [/TD] [TD="class: prbody"] حداکثر ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند : - none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود . - length : در اين حالت حداکثر ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان حداکثر ارتفاع در نظر گرفته می شود . [/TD] [/TR] [TR] [TD="class: prbody"] min-height [/TD] [TD="class: prbody"] none length درصد % [/TD] [TD="class: prbody"] حداقل ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند : - none : در اين حالت هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر گرفته نمی شود . - length : در اين حالت حداقل ارتفاع را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع صفحه يا عنصر در برگيرنده ، به عنوان حداقل ارتفاع در نظر گرفته می شود . [/TD] [/TR] [TR] [TD="class: prbody"] width [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] توسط اين خاصيت ، به يکی از روش های زير عرض عنصر را تعيين می کنيم : - auto : در اين حالت مرورگر به صورت اتوماتيک عرض عنصر را تنظيم می کند . - length : در اين حالت ميزان عرض عنصر را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان عرض در نظر گرفته می شود . [/TD] [/TR] [TR] [TD="class: prbody"] max-width [/TD] [TD="class: prbody"] none length درصد % [/TD] [TD="class: prbody"] حداکثر عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند : - none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود . - length : در اين حالت حداکثر عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان حداکثر عرض در نظر گرفته می شود . [/TD] [/TR] [TR] [TD="class: prbody"] min-width [/TD] [TD="class: prbody"] none length درصد % [/TD] [TD="class: prbody"] حداقل عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند : - none : در اين حالت هيچ مقدار و محدوديتی برای عرض عنصر درنظر گرفته نمی شود . - length : در اين حالت حداقل عرض را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض صفحه يا عنصر در برگيرنده ، به عنوان حداقل عرض در نظر گرفته می شود . [/TD] [/TR] [/TABLE] مثال : در مثال زير برای جدول و خانه های آن ارتفاع و عرض تعيين شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="colspan: 2, align: right"] نکته : در خانه های جدولی که در يک سطر يا ستون هستند ، چنانچه برای خانه ها ارتفاع يا عرض های متفاوت تعيين شود ، همواره ارتفاع يا عرض ستون يا سطر را عنصر با ارتفاع يا عرض بيشتر تعيين می کند و باعث تغيير اندازه ستون های ديگر می شود . برای نمونه در مثال زير ارتفاع خانه Ce11 1 برابر 40px و خانه Cell 2 برابر 100px تعيين شده و می بينيم که ارتفاع سطر برابر ارتفاع خانه Cell 2 تنظيم شده و باعث تغيير ارتفاع خانه Cell 1 شده است . [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue ; width : 600px ; height : 250px " > < tr > < td style="border: solid 2px green; width: 250px; height: 40px " > Cell 1 < /td > < td style="border: dashed 2px blue; width: 350px; height: 100px " > Cell 2 < /td > < /tr > < tr > < td style="border: solid 2px red; width: 600px; height: 150px ; text-align : center " colspan = "2" > Cell 3 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 600"] [TR] [TD] Cell 1 [/TD] [TD] cell 2 [/TD] [/TR] [TR] [TD="colspan: 2, align: center"] Cell 3 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص پيشرفته CSS[/h] جداول در CSS : با استفاده از مجموع خواص ارائه شده در اين بخش ، می توان خصوصيات و ظاهر جداول را در CSS تنظيم کرد . نکته مهم : قبل از مطالعه اين قسمت ، شما بايد با نحوه طراحی جداول در HTML به طور کامل اشنا باشيد . برای دريافت اطلاعات به بخش آموزش جداول در HTML برويد . خواص ارائه شده در اين قسمت در ليست زير آمده است . برای دريافت اطلاعات بر روی هر کدام کليک کنيد : [TABLE="width: 100%"] [TR] [TD] border-collapse border-spacing caption-side [/TD] [TD] empty-cells table-layout [/TD] [/TR] [/TABLE] [h=3] خاصيت border-collapse [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] border-collapse [/TD] [TD="class: prbody"] collapse seprate [/TD] [TD="class: prbody"] نحوه نمايش حاشيه يک جدول را به يکی از 2 حالت زير تعيين می کند : - collapse : در اين حالت ، خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيروني جدول ، در قالب يک خط ترکيب شده و يک خط واحد را تشکيل می دهند . - seprate : در اين حالت خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيرونی به صورت مجزا از هم نمايش داده می شوند ، که حالت استاندارد HTML است . [/TD] [/TR] [/TABLE] مثال : در مثال زير 2 حالت خاصيت border-collapse را نشان داده ايم . در جدول Table 1 حالت collapse و در جدول Table 2 حالت seprate نمايش داده شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 400px; border-collapse: collapse" > < tr > < td style="border: solid 2px blue" > Cell 1 , Table 1 < /td > < td style="border: solid 2px blue" > Cell 2 , Table 1 < /td > < /tr > < /table > < table style="border: solid 2px blue; width: 400px; border-collapse: separate" > < tr > < td style="border: solid 2px blue" > Cell 1 , Table 2 < /td > < td style="border: solid 2px blue" > Cell 2 , Table 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] Cell 1 , Table 1 [/TD] [TD] Cell 2 , Table 1 [/TD] [/TR] [/TABLE] [TABLE="width: 400"] [TR] [TD] Cell 1 , Table 2 [/TD] [TD] Cell 2 , Table 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت border-spacing [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] border-spacing [/TD] [TD="class: prbody"] length [/TD] [TD="class: prbody"] اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . مثال : اين خاصيت فقط در زمانی کاربرد دارد ، که خاصيت border-collapse روی مقدار seprate تنظيم شده باشد . [/TD] [/TR] [/TABLE] مثال : در مثال زير بين خطوط حاشيه خانه های جدول و خطوط حاشيه بيرونی ، فاصله ايجاد کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; border-collapse: separate ; border-spacing : 3px " > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت caption-side [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] caption-side [/TD] [TD="class: prbody"] top right bottom left [/TD] [TD="class: prbody"] اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ < caption > ايجاد می شود . حالت های ممکن عبارتند : - top : عنوان در بالای جدول قرار می گيرد . - right : عنوان در سمت راست جدول قرار می گيرد . - bottom : عنوان در پايين جدول قرار می گيرد . - left : عنوان در سمت چپ جدول قرار می گيرد . [/TD] [/TR] [/TABLE] مثال : در مثال زير چند حالت قرار گيری عنوان جدول را بررسی کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; caption-side: left ; width: 400px" > < caption > Table 1 , Caption left < /caption > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > </table> < table style="border: solid 2px blue; caption-side: bottom ; width: 400px" > < caption > Table 2 , Caption bottom < /caption > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > </table> < table style="border: solid 2px blue; caption-side: top ; width: 400px" > < caption > Table 3 , Caption top < /caption > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > </table> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] Table 1 , Caption left [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [TABLE="width: 400"] Table 2 , Caption bottom [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [TABLE="width: 400"] Table 3 , Caption top [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت empty-cells [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] empty-cells [/TD] [TD="class: prbody"] show hide [/TD] [TD="class: prbody"] مشخص می کند که آيا خانه های خالی جدول و خطوط حاشيه های آنها نمايش داده شود يا خير ، که دو حالت دارد : - show : خانه های خالی و خطوط حاشيه آنها نمايش داده می شود . - show : خانه های خالی و خطوط حاشيه آنها نمايش داده نمی شود ، که حالت پيش فرض است . [/TD] [/TR] [/TABLE] مثال : در مثال زير چند حالت های مختلف نمايش خانه های خالی را بررسی کرده ايم . در جدول اول خانه های خالی نمايش داده شده و در جدول دوم نمايش داده نشده است . ستون دوم جدول های زير خالی است که با رنگ سبز نمايش داده شده است . اشاره : متاسفانه بين مرورگرهای مختلف در نمايش بسياری از تگ ها و خواص HTML و CSS اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در 3 مرورگر مطرح Internet Explorer , FireFox و Opera مشاهده کنيد تا به اختلافات پی ببريد . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 400px; border-collapse: separate; empty-cells: show" > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px green" > < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > < /table > < table style="border: solid 2px blue; width: 400px; border-collapse: separate; empty-cells: hide" > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px green" > < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] Cell 1 [/TD] [TD] [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [TABLE="width: 400"] [TR] [TD] Cell 1 [/TD] [TD] [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت table-layout [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] table-layout [/TD] [TD="class: prbody"] auto fixed [/TD] [TD="class: prbody"] الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم : - الگوريتم نمايش اتوماتيک auto : در الگوريتم اتوماتيک ، عرض ستون های جدول بر حسب محتويات درونی آنها تنظيم می شود . الگوريتم اتوماتيک به دليل اينکه ابتدا نياز دارد تا کليه محتويات جدول ها را لود کند ، بنابراين در نمايش جدول ها کمی کند عمل می کند . - الگوريتم نمايش ثابت fixed : در الگوريتم ثابت ، عرض و ارتفاع جدول و خانه های آن بر حسب مقادير تعيين شده توسط کاربر تنظيم می شود و به محتويات درونی آن کاری ندارد . در الگوريتم ثابت ، مرورگر با سرعت بيشتری جدول را نمايش می دهد ، زيرا نيازی به لود شدن محتويات درونی آن ندارد . [/TD] [/TR] [/TABLE] مثال : در مثال زير چند حالت های مختلف الگوريتم های نمايش جداول را بررسی کرده ايم . در جدول اول از الگوريتم اتوماتيک auto و در جدول دوم از الگوريتم ثابت fixed استفاده کرده ايم . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue" > < tr > < td style="border: solid 2px blue ; table-layout :auto " > Cell 1 , Table 1 , Auto Algoritm < /td > < td style="border: solid 2px blue" > Cell 2 , Table 1 , Auto Algoritm < /td > < /tr > < /table > < table style="border: solid 2px blue; table-layout :fixed ; width: 500px; height: 80px" > < tr > < td style="border: solid 2px blue; width: 250px" > Cell 1 , Table 2 , Fixed Algoritm < /td > < td style="border: solid 2px blue; width: 250px" > Cell 2 , Table 2 , Fixed Algoritm < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE] [TR] [TD] Cell 1 , Table 1 , Auto Algoritm [/TD] [TD] Cell 2 , Table 1 , Auto Algoritm [/TD] [/TR] [/TABLE] [TABLE="width: 500"] [TR] [TD] Cell 1 , Table 2 , Fixed Algoritm [/TD] [TD] Cell 2 , Table 2 , Fixed Algoritm [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص پيشرفته CSS[/h] ليست ها در CSS : نکته مهم : قبل از مطالعه اين قسمت شما بايد به طور کامل با نحوه ايجاد ليست ها در HTML آشنا باشيد . برای دريافت اطلاعات در مورد ليست ها به بخش آموزش ليست ها در HTML برويد . با استفاده از مجموعه خواص ليست ها در CSS ، می توان ويژگی های مختلف ليست ها را از قبيل موقعيت ، شکل يا نحوه نمايش اعداد و استفاده از تصاوير را در ليست ها تنظيم کرد . مجموعه خواص زير در اين قسمت بررسی می شوند ، برای دريافت اطلاعات درباره هر کدام روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] list-style list-style-image [/TD] [TD] list-style-position list-style-type [/TD] [/TR] [/TABLE] نکته : خواص مختلف يک ليست را در CSS می توان به صورت يکجا در خاصيت چند مقداری list-style تعيين کرده و يا هر کدام از ويزگی ها را به صورت جدا مقدار دهی کرد . 1 ) تعيين خواص به وسيله خاصيت چند مقداری list-style : می توان کليه ويژگی های يک ليست را طبق الگوی زير در خاصيت چند مقداری list-style تعيين کرد : list-style : [ list-style-image ] [ list-style-position ] [ list-style-type ] هر يک از موارد فوق را در قسمت دوم توضيح داده ايم : 2 ) تعيين خواص به صورت جدا : هر يک از خواص فوق را می توان به صورت تک مقداری نيز مقدار دهی کرد . اين خواص در جدول زير معرفی شده اند : [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] list-style-image [/TD] [TD="class: prbody"] none URL مسير فايل [/TD] [TD="class: prbody"] در اين حالت يک عکس به عنوان نشانه ليست در ابتدای هر آيتم ليست ، به صورت يک آيکون کوچک نشان داده می شود . برای تعيين عکس به روش زير عمل می کنيم : - none : در اين حالت هيچ عکسی در ليست نمايش داده نمی شود . - URL : آدرس تصويری که می خواهيم در ليست قرار بگيرد را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] list-style-position [/TD] [TD="class: prbody"] inside outside [/TD] [TD="class: prbody"] موقعيت قرار گيری نشانه و متن آيتم های ليست را بر حسب يکی از حالت های زير تعيين می کند : - inside : نشانه ليست و متن آيتم های آن کمی تو رفته تر نمايش داده می شوند . - outside : نشانه ليست و متن آيتم های به صورت عادی نمايش داده می شوند . [/TD] [/TR] [TR] [TD="class: prbody"] list-style-type [/TD] [TD="class: prbody"] none disc cicle square demical demiacl-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian hiragana katakana hiragana-iroha katakana-iroha [/TD] [TD="class: prbody"] نوع نشانه ليست را از يکی از موارد زير تعيين می کند : - none : هيچ نشانه ای در ابتدای آيتم های ليست نمايش داده نمی شوند . - disc : دايره توپر ، که انتخاب پيش فرض است . - circle : دايره معمولی . - square : مربع . - demiacal : اعداد انگليسی ( 1 و 2 و 3 و ... ) . - demiacal-leading-zero : اعداد انگليسی به همراه يک صفر در ابتدای اعداد کوچکتر از 10 ( 01 و 02 و 03 و ... ) . - lower-roman : اعداد کوچک يونانی ( iv , iii , ii , i , ... ) . - upper-roman : اعداد بزرگ يونانی ( IV , III , II , I , ... ) . - lower-alpha : حروف کوچک انگليسی ( c , b , a , ... ) . - upper-alpha : حروف بزرگ انگليسی ( C , B , A , ... ) . - lower-latin : حروف کوچک انگليسی ( c , b , a , ... ) . - upper-latin : حروف بزرگ انگليسی ( C , B , A , ... ) . - lower-greek : اعداد يونانی که به صورت حروفی نمايش داده می شود ( gamma , beta , alpha ... ) . - hebrew : يک نوع نشانه گذاری قديمی است که توسط IE پشتيبانی نمی شود . - armenian : يک نوع نشانه گذاری قديمی است که توسط IE پشتيبانی نمی شود . - georgian : يک نوع نشانه گذاری قديمی به صورت ( gan , ban , an , ... ) است که توسط IE پشتيبانی نمی شود . - hirgana : يک نوع نشانه گذاری قديمی به صورت ( e , u , i , a , ... ) است که توسط IE پشتيبانی نمی شود . - katakana : يک نوع نشانه گذاری قديمی به صورت ( E , U , I , A ... ) است که توسط IE پشتيبانی نمی شود . - hirgana-iroha : يک نوع نشانه گذاری قديمی به صورت ( ni , ha , ro , i ... ) است که توسط IE پشتيبانی نمی شود . - katakana-iroha : يک نوع نشانه گذاری قديمی به صورت ( NI , HA , RO , I , ... ) است که توسط IE پشتيبانی نمی شود . [/TD] [/TR] [/TABLE] [h=3] مثال ها :[/h] در مثال های زير خواص بالا را بررسی می کنيم : مثال 1 : تعيين يک عکس به عنوان نشانه ليست : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: header"] خاصيت تک مقداری [/TD] [TD="class: header"] خاصيت چند مقداری [/TD] [/TR] [TR] [TD="class: body"] My List : < ul style="list-style-image: url(../pic/mobsync.03.ico)" > < li > Item 1 < /li > < li > Item 2 < /li > < /ul > [/TD] [TD="class: body"] My List : < ul style="list-style : url(../pic/mobsync.03.ico) outside none" > < li > Item 1 < /li > < li > Item 2 < /li > < /ul > [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] My List : Item 1 Item 2 [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 2 : مقايسه حالت های list-style-position : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: header"] خاصيت تک مقداری [/TD] [TD="class: header"] خاصيت چند مقداری [/TD] [/TR] [TR] [TD="class: body"] My List 1 : < ul style="list-style-position : inside" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style-position : outside" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > </ul> [/TD] [TD="class: body"] My List 1 : < ul style="list-style : none inside disc" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style : none outside disc" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > </ul> [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] My List 1 : List 1 , Item 1 List 1 , Item 2 My List 2 : List 2 , Item 1 List 2 , Item 2 [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال 3 : نمايش برخی از حالت های list-style-type : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] ليست های نشانه ای [/TD] [/TR] [TR] [TD="class: body, colspan: 2, align: right"] نکته مهم : در خاصيت چند مقداری ، می توان هر يک از خواصي که لازم است مقداردهی شود ، را تعيين کرد و جای بقيه را خالی گذاشت . به مثال 2 و مثال 3 دقت کنيد . [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: header"] خاصيت تک مقداری [/TD] [TD="class: header"] خاصيت چند مقداری [/TD] [/TR] [TR] [TD="class: body"] My List 1 : < ul style="list-style-type: circle" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style-type: disc" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > < /ul > My List 3 : < ul style="list-style-type: square" > < li > List 3 , Item 1 < /li > < li > List 3 , Item 2 < /li > < /ul > [/TD] [TD="class: body"] My List 1 : < ul style="list-style : circle" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style : disc" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > < /ul > My List 3 : < ul style="list-style : square" > < li > List 3 , Item 1 < /li > < li > List 3 , Item 2 < /li > < /ul > [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: body"] My List 1 : List 1 , Item 1 List 1 , Item 2 [/TD] [TD="class: body"] My List 2 : List 2 , Item 1 List 2 , Item 2 [/TD] [TD="class: body"] My List 3 : List 3 , Item 1 List 3 , Item 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] ليست های ترتيبی عددی [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: header"] خاصيت تک مقداری [/TD] [TD="class: header"] خاصيت چند مقداری [/TD] [/TR] [TR] [TD="class: body"] My List 1 : < ul style="list-style-type: demical" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style-type: upper-alpha" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > < /ul > My List 3 : < ul style="list-style-type: lower-roman" > < li > List 3 , Item 1 < /li > < li > List 3 , Item 2 < /li > < /ul > [/TD] [TD="class: body"] My List 1 : < ul style="list-style : demical" > < li > List 1 , Item 1 < /li > < li > List 1 , Item 2 < /li > < /ul > My List 2 : < ul style="list-style : upper-alpha" > < li > List 2 , Item 1 < /li > < li > List 2 , Item 2 < /li > < /ul > My List 3 : < ul style="list-style : lower-roman" > < li > List 3 , Item 1 < /li > < li > List 3 , Item 2 < /li > < /ul > [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: body"] My List 1 : List 1 , Item 1 List 1 , Item 2 [/TD] [TD="class: body"] My List 2 : List 2 , Item 1 List 2 , Item 2 [/TD] [TD="class: body"] My List 3 : List 3 , Item 1 List 3 , Item 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص پيشرفته CSS[/h] تنظيمات نمايش در CSS : با مجموعه خواص ارائه شده در اين قسمت می توان نحوه و مکان نمايش عناصر را در صفحه توسط CSS تنظيم کرد . خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] clear curser display [/TD] [TD] float position visibility [/TD] [/TR] [/TABLE] [h=3]خاصيت clear[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] clear[/TD] [TD="class: prbody"] right left both none [/TD] [TD="class: prbody"] در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد را مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد . در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود . - right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد . - left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد . - both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد . - none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است . [/TD] [/TR] [/TABLE] [HR][/HR] [h=3]خاصيت curser[/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] curser[/TD] [TD="class: prbody"] URL auto crosshair default poniter move help e-resize ne-resize nw-resize s-size text w-size wait [/TD] [TD="class: prbody"] نوع اشاره گر موس را در هنگام قرار گيری بر روی عنصر مورد نظر تعيين می کند ، که انواع حالت های آن عبارتند از : - URL : مسير فايل نگهدارنده اطلاعات مربوط به يک نوع خاص از اشاره گر را تعيين می کند . - default : اشاره گر پيش فرض . - auto : مرورگر به صورت اتوماتيک يک اشاره گر را انتخاب می کند . - crosshair : اشاره گر به صورت يک علامت بعلاوه بزرگ در می آيد . - pointer : اشاره گر به صورت يک دست در می آيد . - move : اشاره گر به صورت يک فلش 4 جهته در می آيد . - e-resize : اشاره گر به صورت يک فلش 2 جهته رو به بالا در می آيد . - help : اشاره گر به صورت معمولی به همراه يک علامت سئوال در کنارآن نمايش داده می شود . - n-resize : اشاره گر به صورت يک فلش 2 جهته رو به بالا در می آيد . - ne-resize : اشاره گر به صورت يک فلش 2 جهته مورب چپ به راست در می آيد . - nw-resize : اشاره گر به صورت يک فلش 2 جهته مورب راست به چپ در می آيد . - s-resize : اشاره گر به صورت يک فلش 2 جهته عمودی در می آيد . - text : اشاره گر به صورت نمايش در محيط های متنی در می آيد . - w-resize : اشاره گر به صورت يک فلش 2 جهته افقی در می آيد . - wait : اشاره گر به صورت ساعت شنی در می آيد . [/TD] [/TR] [/TABLE] مثال : در مثال زير برخی از حالت های اشاره گر موس را بر روی عناصر بررسی کرده ايم . برای مشاهده هر کدام از حالت ها بر روی يک خانه جدول مثال برويد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 500px; text-align: center" > < tr > < td style="border: solid 2px blue; cursor: default" > 1 default < /td > < td style="border: solid 2px blue; cursor: crosshair" > 2 crosshair < /td > < td style="border: solid 2px blue; cursor: pointer" > 3 pointer < /td > < td style="border: solid 2px blue; cursor: move" > 4 move < /td > < /tr > < tr > < td style="border: solid 2px blue; cursor: ne-resize" > 5 ne-resize < /td > < td style="border: solid 2px blue; cursor: e-resize" > 6 e-resize < /td > < td style="border: solid 2px blue; cursor: text" > 7 text < /td > < td style="border: solid 2px blue; cursor: wait" > 8 wait < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 500"] [TR] [TD] 1 default [/TD] [TD] 2 crosshair [/TD] [TD] 3 pointer [/TD] [TD] 4 move [/TD] [/TR] [TR] [TD] 5 ne-resize [/TD] [TD] 6 e-resize [/TD] [TD] 7 text [/TD] [TD] 8 wait [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت display [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] display[/TD] [TD="class: prbody"] none inline block list-item run-in compact table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-group table-cell table-caption [/TD] [TD="class: prbody"] خاصيت display نحوه نمايش عنصر مورد نظر را در صفحه تعيين می کند ، که می تواند يکی از حالت های زير را داشته باشد : - none : عنصر بر روی صفحه نمايش داده نمی شود . - block : عنصر به صورت يک شی مجزا با يک خط فاصله قبل و بعد از آن نمايش داده می شود . - inline : عنصر به صورت يک شی درون خطی بدون هيچ خط فاصله قبل و بعد از آن نمايش داده می شود ، که حالت پيش فرض است . - list-item : عنصر به صورت يک ليست نمايش داده می شود . - run-in : عنصر به صورت يک شی مجزا يا درون خطی ، بسته به محتويات درونی صفحه نمايش داده می شود . - compact : عنصر به صورت يک شی مجزا يا درون خطی ، بسته به محتويات درونی صفحه نمايش داده می شود . - table : عنصر به صورت يک جدول با يک خط فاصله قبل و بعد از آن صفحه نمايش داده می شود . - inline-table : عنصر به صورت يک شی دورن جدولی بدون خط فاصله قبل و بعد از آن صفحه نمايش داده می شود . - table-row-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tbody > نمايش داده می شود . - table-header-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < thead > نمايش داده می شود . - table-footer-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tfoot > نمايش داده می شود . - table-row : عنصر به صورت اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tr > نمايش داده می شود . - table-column-group : عنصر به صورت بخشی از اجزای يک ستون جدول همانند تگ < colgroup > نمايش داده می شود . - table-column : عنصر به صورت اجزای يک ستون جدول همانند تگ < td > نمايش داده می شود . - table-group : عنصر به صورت يک خانه ستون های جدول همانند تگ < col > نمايش داده می شود . - table-cell : عنصر به صورت خانه يک ستون جدول همانند تگ های < td > و < th > نمايش داده می شود . - table-caption : عنصر به صورت عنوان يک جدول نمايش داده می شود . [/TD] [/TR] [/TABLE] مثال : در مثال زير 2 حالت inline و block با هم مقايسه شده اند . به نحوه نمايش 2 عنصر در کنام هم توجه کنيد ، در حالت inline دو عنصر به صورت خطی و در کنار هم نمايش داده شده ولی در حالت block ، که حالت پيش فرض است با يک خط فاصله نمايش داده شده اند . بررسی بقيه حالت ها را به عهده خواننده می گذاريم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت inline [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue ; width: 400px; display: inline" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/imgexample.jpg" style="display: inline" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت block [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue ; width: 400px; display: block" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < src="../Pic/imgexample.jpg" style="display: block" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت float [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] float[/TD] [TD="class: prbody"] right left none [/TD] [TD="class: prbody"] توسط اين خاصيت ، نحوه تراز بندی و موقعيت قرار گيری عناصر را در صفحه نسبت به هم تعيين می کنيم ، که می تواند يکی از حالت های زير باشد : نکته : از اين خاصيت می توان برای قرار گيری عناصر در يک خط ، در کنار هم استفاده کرد . - right : عنصر در سمت راست عنصر ديگر قرار می گيرد . - left : عنصر در سمت چپ عنصر ديگر قرار می گيرد . - none : عناصر به همان ترتيبی که در طراحی و کدنويسی صفحه تعيين شده است ، در کنار هم قرار می گيرند . [/TD] [/TR] [/TABLE] مثال : در مثال زير يک عنصر جدول و يک عنصر عکس قرار داده ايم . در حالت 1 ، عکس را در سمت چپ جدول و در حالت 2 ، عکس را در سمت راست آن قرار داده ايم : نکته : چنانچه فضای کافی در عرض صفحه برای قرار گرفتن دو عنصر يا بيشتر در کنار هم وجود نداشته باشد ، عنصر به خط بعدی انتقال می يابد . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت 1 [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue ; width: 400px; float: right" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/bgexample.jpg" style="float: left" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت 2 [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 400px; float: left" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/bgexample.jpg" style="float: right" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت position [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] position[/TD] [TD="class: prbody"] static relative absolute fixed [/TD] [TD="class: prbody"] توسط اين خاصيت می توان موقعيت و مختصات قرار گيری عنصر را در صفحه تعيين کرد ، که می تواند يکی از حالت های زير باشد : - static : در اين حالت عنصر در موقعيتی که مرورگر در هنگام تنظيم نمايش صفحه با توجه به مکان ساير محتويات به آن اختصاص می دهد ، قرار می گيرد که حالت پيش فرض است . - relative :در اين حالت ، چنانچه برای عنصر توسط يکی از خواص left , right , top و bottom مقداری تعيين شود ، آن مقدار به موقعيت عادی آن عنصر اضافه شده و نمايش داده می شود . برای مثال چنانچه مقدار خاصيت left = 20px در نظر گرفته شود ، 20px به موقعيت قرار گيری عنصر در سمت چپ اضافه می شود . - absolute : در اين حالت موقعيت قرار گيری عنصر با توجه به مختصات تعيين شده ، توسط 4 خاصيت left , right , top و bottom در صفحه يا عنصر در برگيرنده آن تعيين می شود . در اين حالت امکان قرار گيری عناصر بر روی هم وجود دارد . - fixed : اين حالت هم عملکردی همانند حالت absolute دارد و می توان موقعيت قرار گيری عنصر را به طور دقيق در صفحه تعيين کرد . [/TD] [/TR] [/TABLE] مثال : در مثال زير نيز يک عنصر جدول و يک عنصر عکس قرار داده ايم . در 3 حالت انواع حالت های قرار گيری عناصر را در صفحه بررسی کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت static [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 400px; position : static" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/bgexample.jpg" style="position : static" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت relative نکات : برای عنصر جدول از سمت چپ 30px و برای عنصر عکس از سمت بالا 10px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت قبل مقايسه کنيد . تراز بندی عناصر در خروجی نسبت به عنصر در برگيرنده آنها ، يعنی خانه جدول تعيين می شود . [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; border-spacing: 20px; width: 400px; position: relative; left: 30px" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/bgexample.jpg" style="position: relative; top: 10px" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت absolute و fixed نکات : در حالت absolute , fixed موقعيت قرار گيری عناصر نسبت به کل صفحه در نظر گرفته می شود ، نه نسبت به عنصر در بر گيرنده آن . برای عنصر جدول از سمت بالا 6700px و از سمت راست 250px و برای عنصر عکس از سمت بالا 6700px و از سمت چپ 550px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت های قبل مقايسه کنيد . در حالت absolute و fixed عناصر به صورت شناور در می آيند و در محيط Design می توان آنها را با موس جابجا کرد . [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; border-spacing: 20px; width: 400px; position: absolute ; top: 6700px; right: 550px" > < tr > < td style="border: solid 2px blue" > a < /td > < td style="border: solid 2px blue" > b < /td > < td style="border: solid 2px blue" > c < /td > < /tr > < /table > < img src="../Pic/bgexample.jpg" style="position: position: absolute; top: 6700px; right: 250px" / > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [TD] c[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت visibility [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] visibility[/TD] [TD="class: prbody"] visible hidden [/TD] [TD="class: prbody"] توسط اين خاصيت نمايش يا عدم نمايش عنصر را در صفحه تعيين می کنيم ، که 2 حالت ممکن دارد : : - visible : در اين حالت عنصر بر روی صفحه نمايش داده می شود ، که حالت پيش فرض است . - hidden : در اين حالت عنصر بر روی صفحه وجود دارد ، ولی نمايش داده نمی شود ( به اصطلاح مخفی است ) . [/TD] [/TR] [/TABLE] مثال : در مثال زير نيز يک عنصر جدول را قرار داده ايم ، که در حالت اول قابل مشاهده و در حالت دوم مخفی است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت visible [/TD] [/TR] [TR] [TD="class: body"] < table cellpadding="10" cellspacing="0" style="border: solid 2px blue; width: 400px; visibility: visible" > < tr > < td style="border: solid 2px blue; color: Red" > a < /td > < td style="border: solid 2px blue; color: Red" > b < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت hidden [/TD] [/TR] [TR] [TD="class: body"] < table cellpadding="10" cellspacing="0" style="border: solid 2px blue; width: 400px; visibility: hidden" > < tr > < td style="border: solid 2px blue; color: Red" > a < /td > < td style="border: solid 2px blue; color: Red" > b < /td > < /tr > < /table > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 400"] [TR] [TD] a[/TD] [TD] b[/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE]
پاسخ : # آموزش CSS [h=2]خواص پيشرفته CSS[/h] تنظيمات موقعيت عناصر در CSS و ساير خواص: با مجموعه خواص ارائه شده در اين قسمت می توان مکان قرار گيری عناصر را در صفحه توسط CSS تنظيم کرد . خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد : [TABLE="width: 100%"] [TR] [TD] left right top bottom [/TD] [TD] overflow vertical-align z-index [/TD] [/TR] [/TABLE] [h=3]خواص تنظيم موقعيت عناصر در CSS :[/h] در بخش خاصيت position در صفحه قبل ، اشاره کرديم چنانچه خاصيت position بر روی يکی از مقادير relative , absolute يا fixed تنظيم شود می توان توسط خواص left , right , top و bottom مختصات دقيق محل قرار گيری عنصر را در صفحه يا عنصر در بر گيرنده آن تعيين کرد . در اين بخش به معرفی 4 خاصيت اشاره شده برای تنظيمات مکان قرار گيری عناصر می پردازيم : نکات : در صورتی که خاصيت position بر روی مقدار static تنطيم شده باشد ، تعيين مختصات برای عناصر بي اثر بوده و مرورگر عناصر را در مکان مورد نظر خود بر حسب محتويات صفحه نمايش می دهد . در حالتی که خاصيت position بر روی مقدار relative تنظيم شود ، مختصات تعيين شده در اين قسمت ، نسبت به عنصر در برگيرنده عنصر مورد نظر محاسبه می شود . ولی در حالت هايي که خاصيت position بر روی مقادير absolute يا fixed تعيين شده باشد ، مختصات نقاط شروع نسبت به کل صفحه در نظر گرفته می شود . برای درک بهتر به مثال های خاصيت position در صفحه قبل دقت کنيد . [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] left [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] مختصات نقطه شروع عنصر را از سمت چپ در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند : - auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت چپ عنصر را تنظيم می کند . - length : در اين حالت مختصات نقطه شروع عنصر را در سمت چپ بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت چپ تعيين می شود . برای مثال اگر مقدار 10% تعيين شود و عرض کل عنصر 200px باشد ، نقطه شروع 20px از سمت چپ تعيين می شود . [/TD] [/TR] [TR] [TD="class: prbody"] right [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] مختصات نقطه شروع عنصر را از سمت راست در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند : - auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع سمت راست عنصر را تنظيم می کند . - length : در اين حالت مختصات نقطه شروع عنصر را در سمت راست بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت بر حسب درصد تعيين شده از کل عرض عنصر ، به عنوان نقطه شروع عنصر در سمت راست تعيين می شود . برای مثال اگر مقدار 10% تعيين شود و عرض کل عنصر 200px باشد ، نقطه شروع 20px از سمت راست تعيين می شود . [/TD] [/TR] [TR] [TD="class: prbody"] top [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] مختصات نقطه شروع عنصر را از سمت بالا در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند : - auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت بالای عنصر تنظيم می کند . - length : در اين حالت مختصات نقطه شروع عنصر را در سمت بالا بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت بالا تعيين می شود . برای مثال اگر مقدار 10% تعيين شود و ارتفاع کل عنصر 200px باشد ، نقطه شروع 20px از سمت بالا تعيين می شود . [/TD] [/TR] [TR] [TD="class: prbody"] bottom [/TD] [TD="class: prbody"] auto length درصد % [/TD] [TD="class: prbody"] مختصات نقطه شروع عنصر را از سمت پايين در صفحه يا عنصر در برگيرنده عنصر مورد نظر را به يکی از روش های زير تعيين می کند : - auto : در اين حالت مرورگر به صورت اتوماتيک بر حسب محتويات صفحه ، نقطه شروع را از سمت پايينی عنصر تنظيم می کند . - length : در اين حالت مختصات نقطه شروع عنصر را در سمت پايين بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت بر حسب درصد تعيين شده از کل ارتقاع عنصر ، به عنوان نقطه شروع عنصر در سمت پايين تعيين می شود . برای مثال اگر مقدار 10% تعيين شود و ارتفاع کل عنصر 200px باشد ، نقطه شروع 20px از سمت پايين تعيين می شود . [/TD] [/TR] [/TABLE] مثال : در مثال زير برای جدول مقدارهای top و left را تعيين کرده ايم . دقت کنيد که مقدار خاصيت position بروری relative تنظيم شده و مختصات مکان جدول با توجه عنصر در بر گيرنده آن يعنی خانه جدول تنظيم می شود : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style="border: solid 2px blue; width: 200px; height: 100px; top: 25px; left: 200px; position: relative" cellspacing="0" > < tr > < td style="border: solid 2px blue" > Cell 1 < /td > < td style="border: solid 2px blue" > Cell 2 < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 200"] [TR] [TD] Cell 1 [/TD] [TD] Cell 2 [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت overflow [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] overflow [/TD] [TD="class: prbody"] visible hidden scroll auto [/TD] [TD="class: prbody"] توسط اين خاصيت تعيين می شود که چنانچه محتويات يک عنصر از عرض يا طول تعيين شده برای آن بيشتر شد ، مرورگر برای نمايش قسمت اضافه چه کاری انجام دهد ، که می تواند يکی از حالت های زير باشد : - visible : در اين حالت ، قسمت اضافه نيز درون عنصر نمايش داده شده و عرض و طول آن به اندازه ای که کل محتويات را درون خود جای دهد ، افزايش می يابد . - hidden : در اين حالت ، فقط به اندازه تعيين شده برای عنصر از محتويات آن نمايش داده می شود و قسمت اضافه مخفی می ماند . - scroll : در اين حالت ، مرورگر به طور اتوماتيک در جهت هايي که نياز به افزايش اندازه عنصر برای مشاهده قسمت های اضافه است ، نوار پيمايش قرار می دهد و فقط به اندازه واقعی عنصر در هر لحظه از محتويات آن را نمايش می دهد . - auto : در اين حالت نيز مرورگر به طور اتوماتيک در صورت نياز در 2 جهت نوار پيمايش قرار می دهد . [/TD] [/TR] [/TABLE] مثال : در مثال زير يک پارگراف با عرض و طول مشخص قرار داده شده است ، ولی ميزان محتويات درونی آن از اندازه تعيين شده برای آن بيشتر است . در 3 خروجی زير انواع حالت های ممکن برای نحوه نمايش قسمت اضافه نمايش داده شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت visible نکته : می بينيم که در اين حالت عرض پاراگراف از انداره واقعی بيشتر شده تا کل محتويات را نمايش دهد . [/TD] [/TR] [TR] [TD="class: body"] < p style="width: 120px; height: 50px; overflow: visible" > DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت hidden نکته : در اين حالت عرض و ارتفاع پاراگراف از انداره واقعی بيشتر نشده و محتويات اضافه نمايش داده نشده است . [/TD] [/TR] [TR] [TD="class: body"] < p style="width: 120px; height: 50px; overflow: hidden" > DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] حالت scroll و auto نکته : می بينيم که در اين حالت برای نمايش محتويات اضافه از نوار پيمايش استفاده شده و عنصر در اندازه واقعی خود نمايش داده می شود . [/TD] [/TR] [TR] [TD="class: body"] < p style="width: 120px; height: 50px; overflow: scroll" > DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] DeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudioDeveloperStudio [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت vertical-align [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] vertical-align [/TD] [TD="class: prbody"] baseline top text-top middle sub super bottom text-bottom length [/TD] [TD="class: prbody"] اين خاصيت نحوه تراز بندی عمودی عنصر را در عنصر در برگيرنده آن تعيين می کند ، که می تواند يکی از حالت های زير باشد : - baseline , top , text-top : عنصر در بالای عنصر در برگيرنده آن قرار می گيرد . - middle : عنصر در وسط عنصر در برگيرنده آن قرار می گيرد . - sup : عنصر به صورت زير نويس ( در پايين )عنصر در بر گيرنده آن قرار می گيرد . - super : عنصر به صورت بالا نويس ( در بالای )عنصر در بر گيرنده آن قرار می گيرد . - bottom , text-bottom : عنصر در پايين عنصر در برگيرنده آن قرار می گيرد . - length : در اين حالت می توان مکان قرار گيری عمودی عنصر را از بالا ، بر حسب واحدی مثل px يا pt تعيين کرد . [/TD] [/TR] [/TABLE] مثال : در مثال زير در خانه های مختلف جدول ارائه شده ، برخی از حالت های تراز بندی عمودی متن را نمايش داده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < table style ="width : 600px; height: 80px" > < tr > < td style="vertical-align: baseline " > baseline < /td > < td style="vertical-align: top" > top , text-top < /td > < td style="vertical-align: middle" > middle < /td > < td style="vertical-align: bottom" > bottom , text-bottom < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [TABLE="width: 600"] [TR] [TD] baseline [/TD] [TD] top , text-top [/TD] [TD] middle [/TD] [TD] bottom , text-bottom [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR] [h=3] خاصيت z-index [/h] [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] z-index [/TD] [TD="class: prbody"] number عدد [/TD] [TD="class: prbody"] اين خاصيت يک شماره منحصر به فرد برای ترتيب قرار گيری عناصری که بر روی هم هستند ، استفاده می شود که عنصر با شماره بزرگتر در بالای عنصر ديگر قرار می گيرد . اين خاصيت فقط در زمانی کاربرد دارد که خاصيت positon عنصر بر روی مقدار relative يا absolute تنظيم شده باشد . [/TD] [/TR] [/TABLE]
