سبک دهی به متن در سی اس اس

سبک دهی به متن در سی اس اس

در این مطلب میخوام به چگونگی استایل دادن به متن در css بپردازم ، امیدوارم براتون مفید باشه و نظر هم یادتون نره!

مثال های که در این مطلب ارائه میشن در بیشتر مرورگرها پشتیبانی می شوند ولی پیشنهاد میکنم برای استفاده از امکانات css در طراحی خودتان اگر پشتیبانی مرورگرهای خاصی براتون اهمیت داره ، مثلا مرورگر IE9 به پایین که سهم شان در استفاده کاربران از آنها رو به روز کمتر میشه و دیگر مرورگر ها میتونید از این سایت استفاده کنید و اگر سوالی داشتید می توانید به این صفحه مراجعه کنید.

با تگ font در html حتما آشنایی دارید! برای آموزش html به این صفحه مراجعه کنید. خب میخواهیم دستورات font  را با css بنویسیم!

<p>
<font color="black" face="tahoma,arial">
lorem ipsum matnist azmayeshi
</font>
</p>

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

p{
color:black;
font-family: tahoma,arial;
font-size: 15px;
}

وقتی این کد را به قالبتون اضافه کردین ، بعد از این هر متنی که داخل تگ <p> نوشته بشه به صورت استایل مورد نظر نمایش داده میشه!

برای تعیین اندازه فونت در css واحدهای زیر میتونیم استفاده کنیم :

نام واحدها علامت اختصاری
picas pc
pixels px
Ems em
Exes ex
Persentages %
points pt

همچنین میتونید برای تعییا انداره فونت از کلمه کلیدی زیر استفاده کنید :

  • xx-small
  • x-smal
  • small
  • medium
  • large
  • x-large
  • xx-large

من خودم بیشتر از PX و % استفاده میکنم. اطلاعات بیشتر و اینجا.

اگر دقت کنید لینک های مطالب من خط زیرین ندارند! در صورتی که بظور پیش فرض لینک ها دارای خط زیرین هستن! برای حذف خط زیرین لینک ها از کد زیر استفاده میکنیم.

a:link,a:visited{
text-decoration: none;
}

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

a:link,a:visited{
text-decoration: underline overline;
}

در مطب بعدی ادامه استایل دادن به متن های لینک دار رو میگم. موفق باشید ! نظر یادتون نره!

نظرات۰

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی