background-position

این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.

دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:

• top, center, or bottom
• left, center, or right

برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:

• background-position:top right
  این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
• background-position:center right
  این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
• background-position:bottom center
  این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در جدول زیر ملاحظه کنید:

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

background-color

این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

color

از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

text-transform

این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.

به یک مثال در مورد این ویژگی توجه کنید:

این هم نتیجه:

همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

letter-spacing

ین ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یک متن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خود بگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم:

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

نتیجه را به صورت زیر مشاهده خواهید کرد:

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

حاشیه ها

margin-left

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

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

margin-right

این گزینه هم مانند گزینه بالا عمل می کند با این تفاوت که مقدار حاشیه را از سمت راست تعیین می کند:

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از راست نشان می دهد:

عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:

نتیجه به صورت زیر خواهد بود:

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

• سلکتور کلاس

با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

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

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.

اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق «فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در جهت بهبود این بخش استفاده کنیم.