طراحی وب , آموزش سی اس اس , اچتمل , فیلتر در سی اس اس , css3

کار با متن ها (۲)

ویژگیهای مربوط به متن در CSS

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

text-transform

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

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

<div style="text-transform: uppercase">This is an example of uppercase in text-transform property.</div>

این هم نتیجه:

This is an example of uppercase in text-transform property.

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

این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:

  • none :
    با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.
  • lowercase :
    با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.
  • uppercase :
    این گزینه متن را با حروف بزرگ نمایش می دهد.
  • capitalize :
    این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:
<div style="text-transform: capitalize">this is an example of capitalize value for text-transform propety</div>

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

this is an example of capitalize value for text-transform propety

 

line-height

این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.

برای مثال اگر بخواهیم سطرها از هم 50 پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:

<div style="line-height: 50px">بین این سطر و سطر بعدی<br>20 پیکسل فاصله وجود دارد.</div>

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

بین این سطر و سطر بعدی
20 پیکسل فاصله وجود دارد.

text-indent

این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.

در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:

<div style="text-intend: 30px">
سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>

این هم نتیجه:

سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.
در حالی که بقیه سطرها به صورت عادی و
بدون تو رفتگی نمایش داده می شوند.
امین یکشنبه 13 دی‌ماه سال 1388 ساعت 03:45 ب.ظ
0 نظر

کار با متن ها (۱)

ویژگیهای متن در CSS

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

 

letter-spacing

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

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

<div style="letter-spacing:5px">
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>

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

حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.

 

text-align

این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.

این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:

  • left :
    با استفاده از این مقدار می توانیم محتویات یک تگ را در سمت چپ صفحه نمایش دهیم.
    right :
    این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.
  • center :
    این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.

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

<div style="text-align:left; border:thin dashed #00CCFF">محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.</div>

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

محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.

text-decoration

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

<div style="text-decoration: overline">به این متن توجه کنید!!</div>

این هم نتیجه:

به این متن توجه کنید!!

این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:

  • none :
    این گزینه به صورت پیش فرض بر روی متن اعمال می شود (البته برای لینکها به صورت پیش فرض underline اعمال می شود) و در نتیجه آن متنها به صورت ساده و معمولی نمایش داده می شوند. در صورتی که بخواهیم لینکهایی در متن ما بدون زیر خط نشان داده شوند می توانیم از این گزینه برای تگ لینک استفاده کنیم.
  • underline :
    از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد.
  • overline :
    این گزینه برای نمایش خط بالای متن استفاده می شود.
  • line-through :
    این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد.
  • blink :
    از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البته این گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود.

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

<a href="#example" style="text-decoration:none>متن مورد استفاده در لینک</a>

این هم لینک بدون زیر خط:

متن مورد استفاده در لینک

امین یکشنبه 13 دی‌ماه سال 1388 ساعت 03:44 ب.ظ
0 نظر

تعیین موقعیت عناصر صفحه

تغییر موقعیت عناصر صفحه با استفاده از CSS

position

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

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

static

این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای top, left, bottom, right کاربردی ندارند.

این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد.

fixed

اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و برای همین از نسخه 7 به بعد آن مشاهده می نماییم که در این مرورگرها هم از این ویژگی استفاده می گردد. ویژگی fixed در CSS ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می کنیم:

در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم:

<div style="position:fixed; top:50%;left10px">اگر با مرورگر netscape,IE7,IE8 یا مرورگرهایی مثل firefox و opera از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به نمایش در می آیند.</div>

اگر می خواهید ببینید این ویژگی چگونه کار می کند لینک زیر را با یکی از مرورگرهای Opera, Netscape یا Firefox , IE7 , IE8 مشاهده کنید و صفحه را با استفاده از اسکرول بار به بالا و پایین ببرید:

استفاده از ویژگی position:fixed ( لینک در پنجره جدید باز می شود ).

absolute

ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید:

<div style="position:absolute; top:0px; right:0px; border: #fff 2px solid; width:350px; color:#fff; background-color:#3399cc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

همانطور که در کد بالا می بینید برای DIV موقعیتی با فاصله 0 پیکسل از بالای صفحه و 0 پیکسل از سمت راست صفحه تعیین کرده ایم. با کلیک کردن بر روی لینک زیر می توانید نتیجه را مشاهده کنید:

استفاده از absolute برای ویژگی position ( لینک در یک پنجره جدید باز خواهد شد ).

top

این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. )

در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:0px استفاده شده است که این ویژگی معین می کند که DIV با فاصله 0 پیکسل از بالای پنجره مرورگر به نمایش در می آید.

مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس از عدد با ید از علامت درصد (%) استفاده شود.

bottom

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

right

این ویژگی فاصله عناصر را از سمت راست صفحه تعیین می کند. همانطور که در مثال قبل می بینید، از این ویژگی به صورت right:0px استفاده شده است یعنی DIV مربوطه با فاصله 0 پیکسل از سمت راست پنجره مرورگر قرار خواهد گرفت.

left

این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.

در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم:

<div style="position:absolute; bottom:0px; left:0px; border:#fff 2px solid; width:350px; color:#fff; background-color:#3399cc; height: 150px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

برای اینکه نتیجه را مشاهده کنید لینک زیر را کلیک کنید:

استفاده از ویژگیهای bottom و left ( لینک در پنجره جدید باز می شود ).

در مثال ذکر شده DIV به اندازه 0 پیکسل از پایین و 0 پیکسل از سمت چپ پنجره مرورگر فاصله دارد.

امین یکشنبه 13 دی‌ماه سال 1388 ساعت 03:32 ب.ظ
1 نظر