ایرن‏آن

آموزش CSS قسمت هفتم با استفاده از استایل ما می توانیم برای اجزای یک صفحه کادر ایجاد کنیم. با استفاده از پارامتر border-style می توانیم مشخص کنیم که آیا می خواهیم کادر داشته باشیم یا نه، و اگر می خواهیم نوع کادری را که می خواهیم ایجاد کنیم مشخص کنیم. در اینجا می توانید برخی از مقادیری را که می توانیم برای border-style استفاده کنیم را ببینید: none با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت. solid dashed dotted double groove hidden inset outset ridge این مقادیر را امتحان کنید تا متوجه نتیجه آنها شوید … ما باید همیشه عرض کادر هم مشخص کنیم مثال از روش استفاده : کد: <div style=”width:۳۰۰px; border-style:solid”> برای این کادر عرض ۳۰۰ پیکسل تعیین شده است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> border-width این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد: مقدار عددی بر حسب پیکسل در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید: کد: <div style=”border-style:solid; border-width:۱۰px”> این کادر ۱۰ پیکسل ضخامت دارد </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com thin این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر: کد: <div style=”border-style:solid; border-width:thin”> ضخامت این کادر thin در نظر گرفته شده است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> thick این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید: کد: <div style=”border-style:solid; border-width:thick”> ضخامت این کادر thick در نظر گرفته شده است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> border-color شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد. برای بدست آوردن کد رنگ ها میتوانید از یک نرم افزار گرافیکی مثل فتوشاپ استفاده نمایید . همچنین میتوانید از جدول موجود در آدرس http://www.IRNON.com/tags/ref_colornames.asp استفاده نمایید و کد رنگ مورد نظر و یا نام رنگ را انتخاب نمایید. به یک نمونه برای تغییر رنگ کادر توجه کنید: استفاده از نام رنگها: کد: <div style=”border-style:solid; border-color:green”> این کادر به رنگ سبز خواهد بود .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> استفاده از معادل هگزا دسیمال رنگها: کد: <div style=”border-style:solid; border-color:#۰۰۸۰۰۰″> این کادر به رنگ سبز خواهد بود .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت هشتم حاشیه ها : margin-left این گزینه به ما اجازه وی دهد تا برای هر یک از اجزای صفحه حاشیه چپ مشخصی را تعیین کنیم. در حقیقت این گزینه مقدار فاصله اجزا را از سمت چپ صفحه مشخص می کند. به یک مثال در این مورد توجه کنید: کد: <div style=”margin-left:۲۰۰px; border:double”> این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و ۲۰۰ پیکسل حاشیه از چپ نشان می دهد margin-right این گزینه هم مانند گزینه بالا عمل می کند با این تفاوت که مقدار حاشیه را از سمت راست تعیین می کند مثال : کد: <div style=”margin-right:۲۰۰px; border:double”> این DIV دویست پیکسل از سمت راست صفحه فاصله دارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> کد بالا یک DIV را با کادر مضاعف و ۲۰۰ پیکسل حاشیه از راست نشان می دهد margin-top این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از بالای صفحه تعیین می کند کد: <div style=”margin-top:۱۰۰px; border:double”> این DIV صد پیکسل از بالای صفحه فاصله دارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> margin-bottom این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از پایین صفحه تعیین می کند کد: <div style=”margin-bottom:۱۰۰px; border:double”> این DIV صد پیکسل از پایین صفحه فاصله دارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> Padding : padding-right پارامتر padding در CSS مشابه شناسه cellpadding در جدولهاست که با این تفاوت که می توان آنرا برای بالا، پایین، چپ و راست به صورت جداگانه تعریف کرد به جای اینکه به صورت یکجا تعیین شود. در اینجا می توانید یک نمونه از padding را که برای راست تعریف شده است را ببینید: کد: <div style=”padding-right:۱۰۰px; border-style:double”> برای این DIV معادل ۱۰۰ پیکسل padding تعریف شده است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> padding-top مانند قسمت قبل است با این تفاوت که به جای راست برای بالا تعریف می شود padding-left مانند padding-right است با این تفاوت که برای چپ تعیین می شود. padding-bottom مانند padding-top است با این تفاوت که برای پایین تعیین می شود. به یاد داشته باشید که در صورتی که پارامتر padding بدون right, left, top یا bottom به کار رود مقدار وارد شده برای هر چهار جهت مورد استفاده قرار می گیرد، البته در مورد margin هم به همین صورت است: کد: <div style=”padding:۳۵px; width:۲۵۰px; border-style:solid “> در این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت نهم position ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید: -------------------------------------------------------------------------------- static : این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند. absolute : این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم. fixed : این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته نسخه های قدیمی اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ، ولی مرورگر های دیگر پشتیبانی می کنند -------------------------------------------------------------------------------- static این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای top, left, bottom, right کاربردی ندارند. این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد. fixed چون اینترنت اکسپلورر ( نسخه های قبل از ۷ ) بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم. اما در هر صورت ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می کنیم: در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم: کد: <div style=”position:fixed; top:۵۰%; float:right”> اگر با مرورگر netscape یا مرورگرهایی مثل firefox و opera از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به نمایش در می آیند .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> اگر می خواهید ببینید این ویژگی چگونه کار می کند لینک زیر را با یکی از مرورگرهای Opera, Netscape یا Firefox مشاهده کنید و صفحه را با استفاده از اسکرول بار به بالا و پایین ببرید : ( Internet Explorer نسخه ۷ به بعد نیز از این امکان پشتیبانی می کند … ) لینک نمونه : http://IRNON.com/fixed.htm absolute ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است. در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید: کد: <div style=”position:absolute; top:۶۵px; right:۲۰px; border:double #۰۰۳۳cc; width:۳۵۰px; color:#ffff۰۰; background-color:#۳۳cccc; height: ۴۰px;”> این div در موقعیت تعیین شده در کد آن نمایش داده می شود .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> همانطور که در کد بالا می بینید برای DIV موقعیتی با فاصله ۶۵ پیکسل از بالای صفحه و ۲۰ پیکسل از سمت راست صفحه تعیین کرده ایم. با کلیک کردن بر روی لینک زیر می توانید نتیجه را مشاهده کنید: لینک نمونه : http://IRNON.com/absolute.htm top این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. ) در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:۶۵px استفاده شده است که این ویژگی معین می کند که DIV با فاصله ۶۵ پیکسل از بالای پنجره مرورگر به نمایش در می آید. مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس از عدد با ید از علامت درصد (%) استفاده شود. bottom کاربردی همانند ویژگی بالا دارد با این تفاوت که میزان فاصله عناصر را از پایین پنجره مرورگر مشخص می کند.در مثال بعدی از این ویژگی استفاده خواهیم کرد. right این ویژگی فاصله عناصر را از سمت راست صفحه تعیین می کند. همانطور که در مثال قبل می بینید، از این ویژگی به صورت right:۲۰px استفاده شده است یعنی DIV مربوطه با فاصله ۲۰ پیکسل از سمت راست پنجره مرورگر قرار خواهد گرفت. left این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند. در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم: کد: <div style=”position:absolute; bottom:۶۵px; left:۲۰px; border:double #۰۰۳۳cc; width:۳۵۰px; color:#ffff۰۰; background-color:#۳۳cccc; height: ۴۰px;”> این div در موقعیت تعیین شده در کد آن نمایش داده می شود .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com در مثال ذکر شده DIV به اندازه ۶۵ پیکسل از پایین و ۲۰ پیکسل از سمت چپ پنجره مرورگر فاصله دارد. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت دهم در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم. letter-spacing این ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یک متن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خود بگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم: فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم: کد: <div style=”letter-spacing:۵px”> حروف این متن با فاصله ۵ پیکسل از یکدیگر نمایش داده خواهند شد. </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> کد را آزمایش کنید و نتیجه را مشاهده کنید text-align این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم. این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد: left : با استفاده از این مقدار می توانیم محتویات یک تگ را در سمت چپ صفحه نمایش دهیم. right : این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند. center : این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند. برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چین نمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم: <!--[if !supportLineBreakNewLine]--> <!--[endif]--> کد: <div style=”text-align:left; border:thin dashed #۰۰CCFF”> محتویات این DIV در سمت چپ صفحه نمایش داده می شوند .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> text-decoration این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیتهای از قبیل زیرخط تعریف کنیم. مثلاً فرض کنید می خواهیم یک متن را با خطی بالای آن به وجود بیاوریم. در اینجام می توانیم از این ویژگی به صورت زیر استفاده متین کد: <div style=”text-decoration: overline”> به این متن توجه کنید!! <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com </div> این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم: none : این گزینه به صورت پیش فرض بر روی متن اعمال می شود (البته برای لینکها به صورت پیش فرض underline اعمال می شود) و در نتیجه آن متنها به صورت ساده و معمولی نمایش داده می شوند. در صورتی که بخواهیم لینکهایی در متن ما بدون زیر خط نشان داده شوند می توانیم از این گزینه برای تگ لینک استفاده کنیم. underline : از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد. overline : این گزینه برای نمایش خط بالای متن استفاده می شود. line-through : این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد. blink : از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البته این گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود. در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود کد: <a href=”#example” style=”text-decoration:none> متن مورد استفاده در لینک </a> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> text-transform این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید. کد: <div style=”text-transform: uppercase”> This is an example of uppercase in text-transform property. </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com این هم نتیجه: THIS IS AN EXAMPLE OF UPPERCASE IN TEXT-TRANSFORM PROPERTY همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود. این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید: none : با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود. lowercase : با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود. uppercase : این گزینه متن را با حروف بزرگ نمایش می دهد. capitalize : این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید: line-height این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند. برای مثال اگر بخواهیم سطرها از هم ۵۰ پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم: کد: <div style=”line-height: ۵۰px”> بین این سطر و سطر بعدی<br>۲۰ پیکسل فاصله وجود دارد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> نتیجه به صورت زیر خواهد بود: بین این سطر و سطر بعدی ۲۰ پیکسل فاصله وجود دارد. text-indent این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد. در مثال زیر این مقدار تو رفتگی را ۳۰ پیکسل در نظر می گیریم: کد: <div style=”text-intend: ۳۰px”> سطر اول این قسمت با ۳۰ پیکسل تو رفتگی نمایش داده می شود.<br> در حالی که بقیه سطرها به صورت عادی و<br> بدون تو رفتگی نمایش داده می شوند. </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> این هم نتیجه: سطر اول این قسمت با ۳۰ پیکسل تو رفتگی نمایش داده می شود. در حالی که بقیه سطرها به صورت عادی و بدون تو رفتگی نمایش داده می شوند. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ آموزش CSS قسمت یازدهم در این قسمت در مورد تنظیم Font صفحه توضیح داده میشهfont-family ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است. در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم: کد: <div style=”font-family: Arial”>این متن با فونت Arial نمایش داده می شود.</div> <!–[if !supportLineBreakNewLine]–> <!–[endif]–> البته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظر شما را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده می کند. برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید که معمولاً به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند. برای مثال فونت مورد استفاده ما در سایت Tahoma میباشد font-size این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است. فرض کنید می خواهیم متن درون یک DIV با اندازه ۳۰ پیکسل نمایش داده شود: کد: <div style=”font-size: ۳۰px”>این متن با اندازه ۳۰ پیکسل نمایش داده می شود.</div> <!–[if !supportLineBreakNewLine]–> <!–[endif]–> font-style کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد: normal italic oblique به یک مثال در مورد این ویژگی توجه کنید: کد: <div style=”font-style:oblique”>این متن به صورت مورب مشاهده می شود.</div> <!–[if !supportLineBreakNewLine]–> <!–[endif]–> font-weight این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم: normal bold bolder lighter ۱۰۰ ۲۰۰ ۳۰۰ ۴۰۰ ۵۰۰ ۶۰۰ ۷۰۰ ۸۰۰ ۹۰۰ در اینجا به ذکر یک مثال می پردازیم: کد: <div style=”font-weight: ۷۰۰″>این متن تقریباً ضخیم مشاهده می شود.</div> <!–[if !supportLineBreakNewLine]–> <!–[endif]–> کد ها را حتما با مقادیر مختلف امتحان کنید