خانه / مقالات اموزشی / css / آموزش CSS @font-face
آموزش CSS
آموزش CSS

آموزش CSS @font-face

آموزش CSS (فصل سوم – جلسه ۲) : قالب بندی متون

خصوصیت text transform

با استفاده از این خاصیت می توان کلمات (انگلیسی) را به حروف بزرگ یا حروف کوچک تبدیل کرد، و یکی از چهار مقدار زیر را می گیرد:

  • Capitalize : اولین کاراکتر از هر کلمه را با حروف بزرگ نمایش می دهد.
  • Uppercase: تمامی کاراکترهای یک کلمه را با حروف بزرگ نمایش می دهد.
  • Lowercase :تمامی کاراکترهای یک کلمه را با حروف کوچک نمایش می دهد.
  • None : مقدار پیشفرض را برای کاراکتر ها در نظر می گیرد.

مثال :

و کد css زیر :
 

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

خصوصیت white space

مقدار پیشفرض: normal

  • Pre : از این مقدار برای نمایش متن به همان شکلی که در عنصر مورد نظر نوشته شده با در نظر گرفتن تمامی فضاهای خالی و شکست های خط استفاده می شود. از مقدار pre معمولا برای عنصر <code> استفاده می شود. مقدار pre معادل تگ pre در HTML می باشد.
  • Nowrap :استفاده از مقدار nowrap از شکست خط در متن جلوگیری می کند می کند، مگر اینکه از تگ <br> استفاده شده باشد. این مقدار تقریبا هیچ وقت استفاده نمی شود زیرا استفاده از این مقدار آرایش صفحه را به هم می زند.

مثال:

و کد CSS :
1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

خصوصیت text-shadow

این خاصیت که در css3 اضافه شده است با استفاده از آن می توان به متن سایه داد، که چهار مقدار را همزمان می پذیرد:

  • مقدار اول : مقداری عددی (هم مثبت و هم منفی) که سایه متن را روی محور افقی یا همان محور x تنظیم می کند
  • مقدار دوم : مقداری عددی (هم مثبت و هم منفی) که سایه متن را روی محور عمودی یا همان محور y تنظیم می کند
  • مقدار سوم : مقداری عددی (فقط مثبت) که مقدار محو بودن سایه را مشخص می کند.
  • مقدار چهارم : از این مقدار برای تعیین رنگ سایه استفاده می شود، و مقداری بر حسب rgb، هگزادسیمال و یا کلمات کلیدی رنگ ها را می پذیرد.

مثال :

و کد css :
 

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

نکته : هنگامی که می خواهییم از مقدار عددی ۰ استفاده کنیم نیازی به تعیین واحد نیست.

خصوصیت Column

این خاصیت که در css3 اضافه شده است با استفاده از آن می توان متن را چند ستونه کرد، و به طور زیر باید به آن مقدار دهی کرد:

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

و کد سی اس اس
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

  • column-count : تعداد ستون ها را مشخص می کند.
  • column-width : پهنای هر ستون را تنظیم می کند . با افزایش پهنا ، تعداد ستونها کاهش پیدا خواهد کرد.
  • column-gap : دستور gap فاصله ی بین متن ستون و خط جدا کننده ستونها را تنظیم میکند.
  •  column-rule: این دستور همزمان سه مقدار را میگیرد که مقدار اول ضخامت، مقدار دوم طرح و مقدار سوم رنگ خط جدا کننده را مشخص می کند.
نکته : با اینکه این خصوصیت در css3 معرفی شده است در مرورگرهای قدیمی پشتیبانی نمیشود، در ضمن در مرورگر ie از نسخه ۱۰ به بعد می توان از خصوصیات css3 استفاده کرد.
نکته :

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

پیشوند مرورگرها

پیشوند مرورگرها را می توانید در تصویر زیر مشاهده کنید. :

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

::. طبق تجربیات، مرورگر گوگل کروم نیز با افزودن پیشوند   -webkit- خصوصیت مورد نظر را تاثیر می دهد.

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

مثال:

 

کد بالا به این معناس که سایه متن تگ p را در همه ی مرورگرها به رنگ آبی  (خط ۲ ) اما در مرورگر گوگل کروم و سافاری، به رنگ سبز (خط ۳) ، در مرورگر فایرفاکس به رنگ سیاه (خط ۴ )، در مرورگر اوپرا به رنگ زرد (خط ۵) و در مرورگر اینترنت اکسپلورر به رنگ قرمز (خط ۶) نشان دهد.

[/nt]

خصوصیت @font-face

در بعضی از مواقع دلمان می خواهد از فونت های مورد نظرمان استفاده کنیم، اما به دلیل اینکه شاید این فونت بر روی سیستم کاربر نصب نشده باشد، از آن فونت صرف نظر می کنیم و باز به دنبال انتخاب فونتی از میان فونت های پیشفرض می رویم. اما با آمدن css3 و معرفی خصوصیت font-face  شما می توانید از هر فونتی حتی اگر بر روی سیستم کاربر نصب نشده باشد نیز استفاده کنید.

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

به طور مثال
و کد css :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

نکته : همه ی مرورگرها از همه ی فرمت های فونت پشتیبانی نمی کنند. به تصویر زیر دقت کنید تا با پشتیبانی مرورگرها از فرمت های فونت ها آشنا شوید :

1x1.trans آموزش CSS (فصل سوم   جلسه 2) : قالب بندی متون

نکته : این خصوصیت را باید در فصل دوم که مربوط به فونت ها بود معرفی می کردم، اما چونکه یادم رفته بود، اینجا براتون توضیحش دادم.

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

منبع:۷learn

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

دیدگاهتان را بنویسید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net